Overview
Discover the foundational elements of Plus UI, including our design tokens for color, spacing, typography, and more.
The “Foundation” section is your guide to the core design principles and tokens that form the basis of all Plus UI components. Understanding these foundational elements is key to customizing the library to match your brand and building a consistent user experience.
Our foundation is built on a system of CSS Custom Properties (variables) for colors and Tailwind CSS utility classes for most other aspects like spacing and typography.
Key Foundation Areas:
Section titled “Key Foundation Areas:”- Color: A multi-layered color system with brand palettes and semantic tokens for light and dark modes.
- Icons: A comprehensive icon library with a registration system for adding your own custom icons.
- Typography: A typographic scale managed with Tailwind classes for consistent text styling.
- Spacing: A systematic spacing scale for creating harmonious and balanced layouts.
- Border & Shadows: Utilities for managing borders, radii, and shadow effects.
- Breakpoints: Responsive breakpoints for building adaptive user interfaces.
- Opacity: Tokens and utilities for controlling element opacity.
Join the Community
Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.