- Components
- theme
Theming tokens
Foundation of JK-ui’s design system: semantic tokens for colors, surfaces, borders, typography, spacing, and radii to ensure visual consistency.
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. |