Tier 0Foundations · type floors, hit targets and focus visibility from the token graph. Binds all four tiers; native tiers apply their platform floors on top.--fs-base · --shadow-focus · --component-bg-active · --border-hover

A11y minimums

Size and visibility floors: type scale minimums, hit-target sizes per input class, focus indicators per surface. Web floors here; iOS holds 44pt, Material 48dp, TV 24px type.
01 Type size floors tokens · --fs-*
Token Sample Specs Notes
--fs-caption Eyebrow · 0.75rem (12px) 0.75rem · 500 · uppercase · letter-spacing 0.08em Web floor. Captions, eyebrows and fine print. Nothing on web sits below it. Uppercase eyebrows take medium weight.
--fs-ui Labels and links · 0.875rem (14px) 0.875rem · 400 Labels, buttons, links, errors, metadata. AA at --text-secondary.
--fs-body Body copy · 1rem (16px) regular 1rem · 400 Default body size. Equals the root.
--fs-field Typed text · 1rem (16px) 1rem · 400 Inputs stay at 16px so iOS Safari doesn't zoom on focus.
--fs-md Subheading · 1.125rem (18px) medium 1.125rem · 500 Subheadings and dense UI emphasis.
--fs-lg Heading · 1.5rem (24px) medium 1.5rem · 500 Section headings. Large text under WCAG starts at 24px regular or 18.7px bold, so this is large text.
TV minimum 10-foot reading · 24px+ 24px · 500 floor 10-foot UX: nothing below 24px on a TV surface (see TV foundations).
02 Hit-target sizes WCAG 2.5.8 AA · 2.5.5 AAA · iOS HIG · Material
Pointer (desktop / web)
xs
24×24 · WCAG 2.5.8 AA minimum, subject to its exceptions
sm
28×28 · exceeds the AA minimum with 4px breathing room
md
32×32 · default for dense UI
lg
36×36 · default for primary actions
Touch (mobile / iOS / Android)
36
Below 44pt: fine if margin-padded
44
44×44 · iOS HIG minimum
48
48×48 · Material accessibility floor
Rule: use the platform floor: 44×44pt on Apple surfaces and 48×48dp on Material surfaces. Smaller visible controls need invisible padding to reach that floor. Use ::before with negative inset, or list-item rows whose padding brings the full target above the minimum.
03 Focus visibility WCAG 2.4.7 · 2.4.11
Input · focus
border → --field-border-focus
+ 1px --field-border-focus ring (≥3:1 on the fill, no yellow strobe)
Button · focus
var(--shadow-focus)
2px --bg gap + 2px --solid-hover ring (≥3:1)
Link · focus
Open file detail
2px outline + 2px offset
Same yellow as links themselves
D-pad focus · every TV app
Focused row
--component-bg-active + --border-hover · no halo, scale or shadow
tvOS and Android TV: same fill, system lift off
04 Rules & common mistakes
Use --yellow-solid as text only on dark
On dark surfaces it's 12.1:1 AAA. On light backgrounds it's 1.5:1, invisible. For yellow text on light, use --yellow-text-secondary (5.07:1 AA).
Never put yellow text on white
If you need a yellow accent in light mode, use the yellow-solid as background, not as foreground. Black on yellow = AAA either way.
Default = 36px buttons, sm = 28px
Anything below 28px should be icon-button only with a tooltip, never a labelled action. Below 24px is for inline toolbar affordances at most.
No low-contrast green/red/info labels
At 12–14px these labels are normal text and need 4.5:1 under WCAG 2.2. Use the default or primary variant, or choose a label/fill pair that clears that ratio.
Pair color with shape or text
Transfer health uses color + label + dot (green/yellow/red). Status is never communicated by color alone, covered for color-blindness.
No color-only error states
Invalid form fields get a red border and a text error message below. Failed transfers get a red dot, a red label, and an icon, three signals.
Body weight: regular 400
Body text is GT America Regular at 14px. Medium 500 is for subheadings, button labels, emphasis. Bold 700 reserved for headlines and numerics where weight earns scan-ability.
No black 900 in body
Black weight is for the wordmark and hero display sizes (96px+). At body size it reads as visual shouting and breaks rhythm. Three weights in product: 400 / 500 / 700.