- Docs
- theme
Theming Tokens
Flexiwind's UI design system: semantic colors, backgrounds, borders, typography, and tokens for consistent theming.
Colors
We’ve opted for semantic naming approche, so we have color’s name as primary
,
secondary
, etc…
| Color | Description |
|---|---|
primary
|
The main brand color used for core actions and key UI elements such as primary buttons, links, and active states.
|
secondary
|
A supporting brand color used for secondary actions, complementary UI elements, or to provide visual hierarchy alongside the primary color.
|
accent
|
A highlight color used sparingly to draw attention to specific elements like badges, highlights, or special interactions.
|
info
|
Used to communicate neutral or informative messages, such as tips, hints, or informational alerts.
|
success
|
Indicates successful actions or positive states, such as confirmations, completed tasks, or valid inputs.
|
warning
|
Signals caution or potential issues that require user attention but are not critical errors.
|
danger
|
Represents destructive actions, errors, or critical states that may cause data loss or irreversible changes.
|
gray
|
A neutral color scale used for backgrounds, borders, text, disabled states, and non-emphasized UI elements.
|
Background
Background tokens define surfaces and layers. Use Tailwind utilities like bg-bg
,
bg-bg-muted
, bg-card
, bg-card-gray
.
| Token | Description |
|---|---|
--bg
|
Default app background.
|
--bg-subtle
|
Subtle background to separate sections.
|
--bg-surface
|
Elevated or surface layers (panels, sheets).
|
--bg-muted
|
Muted background for less emphasis.
|
--card
|
Card background.
|
--card-gray
|
Neutral/gray variant for cards.
|
--popover
|
Popover/tooltip background.
|
--popover-gray
|
Neutral/gray variant for popovers.
|
--overlay
|
Overlays and scrims (modals, drawers).
|
Foreground
Foreground tokens define text and icon colors. Use text-fg
, text-fg-title
, text-fg-subtitle
, text-fg-muted
.
| Token | Description |
|---|---|
--fg
|
Default foreground for body text and icons.
|
--fg-title
|
High-emphasis titles and headings.
|
--fg-subtitle
|
Secondary headings and labels.
|
--fg-muted
|
Muted/tertiary text, placeholders, help text.
|
Border
Border tokens control outlines and separators. Use border-border
,
border-border-strong
and opacity variants like border-border/40
.
| Token | Description |
|---|---|
--border
|
Default border color for components.
|
--border-strong
|
Stronger emphasis borders and outlines.
|
--border-subtle
|
Subtle dividers and separators.
|
--border-card
|
Card borders.
|
--border-input
|
Input and form control borders.
|
Border radius
| Variable | Description |
|---|---|
--radius-ui
|
Default border radius for components.
|