Foundations
Every colour, radius and shadow in Folio is a variable the bridge overwrites live with the merchant’s theme. Build on these and dark mode and white-label tints are free; hardcode a hex and your app is the one thing on the page that does not follow.
Tokens
| Variable | Used for |
|---|---|
--card / --card-foreground | The island your app fills. Your page background. |
--background | The canvas behind the island. Rarely yours to use. |
--primary / --primary-foreground | The one call to action on a screen. Paysio blue, or the white-label brand colour. |
--secondary / --secondary-hover / --secondary-foreground | Filled chips: secondary buttons, tab tracks, preset pills. |
--inverse / --inverse-foreground | Default badges and tooltips: emphasis without being an action. |
--muted / --muted-foreground | Skeleton fill; secondary text, hints, table chrome. |
--accent / --accent-foreground | Hover on ghost buttons and menu rows. |
--border / --border-subtle | The hairline that does the work, and the highlight edge that does not. |
--input / --ring | Field borders and the focus ring. |
--dropdown / --popover | Menu and popup surfaces. |
--row-hover / --row-active | List row states. |
--tertiary | The pressed preset pill. |
--success, --warning, --info, --destructive (+ foregrounds) | Semantic badges and notes. Each pair clears 7:1 in both themes. |
--skeleton-sheen | The shimmer band; 0.3 white in light, 0.05 in dark. |
--folio-font | Inter, loaded by the stylesheet. Override to self-host. |
Type
| Size | Weight | Where |
|---|---|---|
| 11px | 500 | Badges, uppercase note titles. |
| 12px | 400–500 | Tooltips, menu labels and shortcuts, preset pills, hints. |
| 13px | 500–600 | The working density: list rows, menu items, header crumbs, tabs, section titles. |
| 14px | 400–500 | Body copy, inputs, labels, small buttons. |
| 16px | 600, -0.04em | Buttons and page titles. |
| 24px | 600, -0.04em | Popup titles. |
Shape and depth
| Radius | Where |
|---|---|
| 9999px | Buttons, badges, preset pills, chips, switches. |
| 12px | Inputs and selects; cards, tables, menus, list frames. |
| 8px | Rows inside a 12px surface (12 minus the 4px padding, so corners stay concentric); notes; textareas. |
| 6px | Checkboxes; active tab segments. |
| 24px | Popups (28/24 on the flared silhouette). |
The only three shadows
resting card 0 1px 0 rgba(26,26,26,.06), 0 8px 16px rgba(26,26,26,.08)
floating menu 0 10px 28px -8px rgba(0,0,0,.16), 0 2px 6px -2px rgba(0,0,0,.08)
modal popup 0 0 0 1px rgba(0,0,0,.04), 0 16px 48px -12px rgba(0,0,0,.26), 0 4px 12px -6px rgba(0,0,0,.12)Motion
- 150ms for state changes; press feedback by
scale(0.97). - Popups: 200ms on
cubic-bezier(0.32, 0.72, 0, 1); the shell recedes 3% per open layer, 300ms in, 220ms back. - Loading: a shimmer band sweeping a static bar every 1.5s. Never a pulse, never a spinner.
- Everything respects
prefers-reduced-motion.