UI Token First
Overview
Apply UI framework tokens (typography, color, surfaces) for all UI styling in this repo. Avoid new CSS in frontend/src/app.css or local hardcoded styles unless no token exists.
Workflow
- Identify the UI elements being changed (headers, voice lines, cards, surfaces, etc.).
- Pull tokens from
frontend/src/lib/ui and apply them with toStyleString.
- Remove or avoid ad-hoc font/color rules that bypass the tokens.
- Confirm voice text rules in
docs/ee-ui-execution-standard.md.
Token Sources
- Typography:
frontend/src/lib/ui/foundations/typography.ts (textStyles, fontFamilies)
- Colors:
frontend/src/lib/ui/foundations/color.ts (colorCss)
- Surfaces:
frontend/src/lib/ui/components/card.ts (pageSurface, recordListShell, secondarySurface)
- CSS utilities:
frontend/src/lib/ui/style.ts (toStyleString, toCssVars)
Patterns to Use
- Voice lines: use
.voice-line or .voice-text + textStyles.voice and colorCss.text.ink.muted via toStyleString. Never add new font-family CSS for voice text.
- Headers: use
textStyles.headingPrimary|Secondary|Tertiary + colorCss.text.ink.*.
- Subtext/helper: use
textStyles.helper + muted ink.
- Surfaces: wrap sections with
recordListShell/pageSurface tokens and wire CSS vars rather than hardcoded backgrounds/borders.
Quick Checks
- Search for
font-family, color: #, or new app.css rules; replace with UI tokens.
- If you add a new text element, it should map to a
textStyles.* token.
