Design System
All design tokens in this project, organized across three layers: primitives, semantic variables and component-level tokens. Click any token to copy its name.
Defined in globals.css → :root. Raw scale values — pure neutrals, breakpoints, radius and typography.
--whiteoklch(1 0 0)copy--blackoklch(0.15 0.005 285.823)copy--teal-50oklch(0.984 0.014 180.72)copy--teal-100oklch(0.953 0.051 180.8)copy--teal-200oklch(0.910 0.096 180.9)copy--teal-300oklch(0.855 0.138 181.071)copy--teal-400oklch(0.777 0.152 181.9)copy--teal-500oklch(0.704 0.14 182.503)copy--teal-600oklch(0.600 0.118 184.704)copy--teal-700oklch(0.511 0.096 186.391)copy--teal-800oklch(0.437 0.078 188.216)copy--teal-900oklch(0.386 0.063 188.4)copy--teal-950oklch(0.277 0.046 192.524)copy--slate-50oklch(0.984 0.003 247.858)copy--slate-100oklch(0.968 0.007 247.896)copy--slate-200oklch(0.929 0.013 255.508)copy--slate-300oklch(0.869 0.022 252.894)copy--slate-400oklch(0.704 0.04 256.788)copy--slate-500oklch(0.554 0.046 257.417)copy--slate-600oklch(0.446 0.043 257.281)copy--slate-700oklch(0.372 0.044 257.287)copy--slate-800oklch(0.279 0.041 260.031)copy--slate-900oklch(0.208 0.042 265.755)copy--slate-950oklch(0.129 0.042 264.695)copy--red-50oklch(0.971 0.013 17.38)copy--red-100oklch(0.936 0.032 17.576)copy--red-200oklch(0.885 0.062 18.334)copy--red-300oklch(0.808 0.114 19.571)copy--red-400oklch(0.704 0.191 22.216)copy--red-500oklch(0.637 0.237 25.331)copy--red-600oklch(0.577 0.245 27.325)copy--red-700oklch(0.505 0.213 27.518)copy--red-800oklch(0.444 0.177 26.899)copy--red-900oklch(0.396 0.141 25.723)copy--red-950oklch(0.258 0.092 26.042)copy--breakpoint-xs360pxcopy--breakpoint-mm460pxcopy--breakpoint-xxl1280pxcopy--radius0.45remcopy--radius-smcalc(var(--radius) * 0.6)copy--radius-mdcalc(var(--radius) * 0.8)copy--radius-lgvar(--radius)copy--radius-xlcalc(var(--radius) * 1.4)copy--radius-2xlcalc(var(--radius) * 1.8)copy--radius-3xlcalc(var(--radius) * 2.2)copy--radius-4xlcalc(var(--radius) * 2.6)copy--font-sansInter via next/font (--font-sans inline style on <html>)copy--font-headingvar(--font-sans)copy--font-monoGeist Mono via next/font (--font-mono inline style on <html>)copyDefined in globals.css → :root / .dark. OKLCH color values for each role. Live swatches reflect the current computed value.
--backgroundoklch(1 0 0)copy--foregroundoklch(0.129 0.042 264.695)copy--cardoklch(1 0 0)copy--card-foregroundoklch(0.129 0.042 264.695)copy--popoveroklch(1 0 0)copy--popover-foregroundoklch(0.129 0.042 264.695)copy--primaryoklch(0.511 0.096 186.391)copy--primary-foregroundoklch(0.984 0.014 180.72)copy--secondaryoklch(0.968 0.007 247.896)copy--secondary-foregroundoklch(0.208 0.042 265.755)copy--mutedoklch(0.968 0.007 247.896)copy--muted-foregroundoklch(0.554 0.046 257.417)copy--accentoklch(0.968 0.007 247.896)copy--accent-foregroundoklch(0.208 0.042 265.755)copy--destructiveoklch(0.577 0.245 27.325)copy--destructive-foregroundoklch(0.985 0 0)copy--borderoklch(0.929 0.013 255.508)copy--inputoklch(0.929 0.013 255.508)copy--ringoklch(0.704 0.04 256.788)copy--chart-1oklch(0.855 0.138 181.071)copy--chart-2oklch(0.704 0.14 182.503)copy--chart-3oklch(0.6 0.118 184.704)copy--chart-4oklch(0.511 0.096 186.391)copy--chart-5oklch(0.437 0.078 188.216)copy--sidebaroklch(0.984 0.003 247.858)copy--sidebar-foregroundoklch(0.129 0.042 264.695)copy--sidebar-primaryoklch(0.511 0.096 186.391)copy--sidebar-primary-foregroundoklch(0.984 0.014 180.72)copy--sidebar-accentoklch(0.968 0.007 247.896)copy--sidebar-accent-foregroundoklch(0.208 0.042 265.755)copy--sidebar-borderoklch(0.929 0.013 255.508)copy--sidebar-ringoklch(0.704 0.04 256.788)copyDefined in globals.css → @theme inline. These are the CSS custom properties that Tailwind v4 exposes as utility classes (e.g. bg-primary, rounded-xl).
--color-backgroundvar(--background)copy--color-foregroundvar(--foreground)copy--color-cardvar(--card)copy--color-card-foregroundvar(--card-foreground)copy--color-popovervar(--popover)copy--color-popover-foregroundvar(--popover-foreground)copy--color-primaryvar(--primary)copy--color-primary-foregroundvar(--primary-foreground)copy--color-secondaryvar(--secondary)copy--color-secondary-foregroundvar(--secondary-foreground)copy--color-mutedvar(--muted)copy--color-muted-foregroundvar(--muted-foreground)copy--color-accentvar(--accent)copy--color-accent-foregroundvar(--accent-foreground)copy--color-destructivevar(--destructive)copy--color-destructive-foregroundvar(--destructive-foreground)copy--color-bordervar(--border)copy--color-inputvar(--input)copy--color-ringvar(--ring)copy--color-chart-1var(--chart-1)copy--color-chart-2var(--chart-2)copy--color-chart-3var(--chart-3)copy--color-chart-4var(--chart-4)copy--color-chart-5var(--chart-5)copy--color-sidebarvar(--sidebar)copy--color-sidebar-foregroundvar(--sidebar-foreground)copy--color-sidebar-primaryvar(--sidebar-primary)copy--color-sidebar-primary-foregroundvar(--sidebar-primary-foreground)copy--color-sidebar-accentvar(--sidebar-accent)copy--color-sidebar-accent-foregroundvar(--sidebar-accent-foreground)copy--color-sidebar-bordervar(--sidebar-border)copy--color-sidebar-ringvar(--sidebar-ring)copy--font-sansvar(--font-sans)copy--font-headingvar(--font-sans)copy--font-monovar(--font-mono)copy--radius-smcalc(var(--radius) * 0.6)copy--radius-mdcalc(var(--radius) * 0.8)copy--radius-lgvar(--radius)copy--radius-xlcalc(var(--radius) * 1.4)copy--radius-2xlcalc(var(--radius) * 1.8)copy--radius-3xlcalc(var(--radius) * 2.2)copy--radius-4xlcalc(var(--radius) * 2.6)copy--breakpoint-xs360pxcopy--breakpoint-mm460pxcopy--breakpoint-xxl1280pxcopyInline CSS custom properties scoped to individual component instances. Set at runtime via style or component props.
| Component | Token | Value | Description |
|---|---|---|---|
| Card | --card-spacing | spacing(4) [default] · spacing(3) [sm] | Inner padding of card and sub-parts |
| Sidebar | --sidebar-width | 16rem | Sidebar expanded width |
| Sidebar | --sidebar-width-icon | 3rem | Sidebar collapsed (icon-only) width |
| Accordion | --accordion-panel-height | dynamic (Base UI) | Animated panel height for open/close |
| InputOTP | --cell-size | 2rem | Width/height of each OTP slot |
| InputOTP | --cell-radius | var(--radius) | Border radius of OTP slot |
| Skeleton | --skeleton-width | dynamic | Width of skeleton shimmer element |
| Select, Dropdown Menu, Combobox | --anchor-width | trigger width (Base UI positioner) | Popup matches the trigger element's width |
| Select, Dropdown Menu, Context Menu, Combobox | --available-height | viewport-aware (Base UI positioner) | max-height clamp so the popup fits the viewport |
| Combobox, Navigation Menu | --available-width | viewport-aware (Base UI positioner) | max-width clamp so the popup fits the viewport |
| Popover, Hover Card, Tooltip, Select, Dropdown Menu, Context Menu, Combobox, Navigation Menu | --transform-origin | dynamic (Base UI positioner) | Open/close scale animates from the side facing the trigger |
| Toggle Group | --gap | spacing prop (default 2) | Gap between toggle items — 0 joins them into one segmented control |
| Navigation Menu | --popup-width | dynamic (active item's content) | Width of the currently active submenu viewport |
| Navigation Menu | --popup-height | dynamic (active item's content) | Height of the currently active submenu viewport |
| Navigation Menu | --positioner-width | dynamic (Base UI positioner) | Width of the positioner wrapping the popup |
| Navigation Menu | --positioner-height | dynamic (Base UI positioner) | Height of the positioner wrapping the popup |
Defined in globals.css. These extend Tailwind's modifier system — use them as prefixes in class names.
| Variant | Definition | Usage |
|---|---|---|
dark: | &:is(.dark *) | Dark mode — class-based |
xl-hover: | @media (min-width: 1280px) and (hover: hover) and (pointer: fine) | Desktop-only hover (no touch) |
Quais tokens semânticos cada componente consome. Clique em um componente para filtrar.
Filtrar por componente
--background--foreground--card--card-foreground--popover--popover-foreground--primary--primary-foreground--secondary--secondary-foreground--muted--muted-foreground--accent--accent-foreground--destructive--destructive-foreground--border--input--ring--chart-1--chart-2--chart-3--chart-4--chart-5--sidebar--sidebar-foreground--sidebar-primary--sidebar-primary-foreground--sidebar-accent--sidebar-accent-foreground--sidebar-border--sidebar-ringExibindo 32 tokens consumidos por 40 componentes.