Foundations
tokensDesign tokens rendered live from PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED. Every value on this page is computed at build time from the same source of truth that ships to consumers.
§01
Color Palette
§02
Contrast — Light Theme
AA WCAG 2.2 targetEach pair is calculated from the shipped token values. Body text must reach 4.5:1; large text and non-text UI must reach 3:1.
| Foreground | Background | Ratio | Required | Result |
|---|---|---|---|---|
| --text | --bg | 13.73:1 | 4.5:1 | PASS |
| --text | --surface | 14.61:1 | 4.5:1 | PASS |
| --muted | --bg | 5.86:1 | 4.5:1 | PASS |
| --muted | --surface | 6.24:1 | 4.5:1 | PASS |
| --accent | --bg | 5.10:1 | 3:1 | PASS |
| --accent | --surface | 5.43:1 | 3:1 | PASS |
| --accent-2 | --bg | 3.42:1 | 3:1 | PASS |
| --accent-2 | --surface | 3.64:1 | 3:1 | PASS |
§03
Contrast — Dark Theme
AA WCAG 2.2 targetThis is live evidence, not a placeholder: ratios are recomputed from the dark semantic token map during every Portal build.
| Foreground | Background | Ratio | Required | Result |
|---|---|---|---|---|
| --text | --bg | 14.82:1 | 4.5:1 | PASS |
| --text | --surface | 13.38:1 | 4.5:1 | PASS |
| --muted | --bg | 7.72:1 | 4.5:1 | PASS |
| --muted | --surface | 6.97:1 | 4.5:1 | PASS |
| --accent | --bg | 4.86:1 | 3:1 | PASS |
| --accent | --surface | 4.39:1 | 3:1 | PASS |
| --accent-2 | --bg | 4.83:1 | 3:1 | PASS |
| --accent-2 | --surface | 4.36:1 | 3:1 | PASS |
§04
Typography
Font Families
--font-display (Fraunces)
The quick brown fox
--font-body (IBM Plex Sans)
The quick brown fox jumps over the lazy dog. Typography is the craft of arranging type to make written language legible, readable, and appealing.
--font-mono (IBM Plex Mono)
const theme = localStorage.getItem('frauthy.theme');
Fluid Type Scale
Each step is a clamp() value multiplied by--reading-scale so the reader toolbar can adjust sizes globally.
--fs-body
Sample text at --fs-body
var(--fui-reading-body)
--fs-lead
Sample text at --fs-lead
var(--fui-reading-lead)
--fs-prose-h3
Sample text at --fs-prose-h3
var(--fui-reading-h3)
--fs-card
Sample text at --fs-card
var(--fui-reading-detail)
--fs-tier
Sample text at --fs-tier
var(--fui-reading-small)
--fs-step
Sample text at --fs-step
var(--fui-reading-mono)
--fs-detail
Sample text at --fs-detail
var(--fui-reading-detail)
§05
Space & Layout
--gutter
clamp(20px, 4vw, 64px)--wrap-max
1320px--measure
70ch--reading-scale
1§06
Radii
sm
5px
md
8px
lg
11px
xl
14px
pill
9999px
§07
Shadows
sm
0 6px 20px -8px
md
0 14px 32px -18px
lg
0 16px 40px -14px rgba(0, 0, 0, 0.55)
§08
Motion
fast
0.14s
normal
0.2s
slow
0.45s
reveal
0.7s
Reduced motion: All transitions honor
prefers-reduced-motion: reduce. When active, transitions are disabled system-wide.