One system. Every surface built from it.
The living source of truth for Surfil DS v3 - tokens by name, the working primitives, and the six always-on standards every page ships against.
Tokens, by name
Components reference the token, never the value - so the swatch always shows the real colour.
--canvaspage background--cardcard surface--elevatedinput / hover / elevation--line-2hairline / border--inkprimary text--txt-2secondary text--txt-3muted / captions--accentbrand - CTAs, status, up--warngold - warnings--errorred - down / destructive--infoblue - informationalA calm scale, one bold display
Geist Sans + Geist Mono. Body at 400/500; display at 700 - the decided craft that makes headlines punch.
Heading · 600
Body · 400 - clear, confident, specific. The measure stays near 65 characters so long-form reads well.
mono · data & code · 500Eyebrow · uppercase trackedOne rhythm, tight corners
Spacing
--sp-1--sp-2--sp-3--sp-4--sp-5--sp-6--sp-8--sp-sectionRadius
--r-xs--r-sm--r--r-lg--r-xlThe working parts
Every page is composed from these - never bespoke CSS.
Buttons
Pills
Six standards, always on
Folded into CI as gates and a Definition of Done - not aspirations.
1 · UI/UX bar
No overflow/clip; balanced hero; equal-weight cards; WCAG AA; verified at 375/768/1440 with evidence.
2 · Brand Linter
Tokens or the build fails - no raw colour in components; the DS type scale (400/500/700), not a flat cap.
3 · PUM
Marketing pages unique in Layout · Section-order · Mockup; ops surfaces consistent by design. PHX-QA-PUM gate.
4 · Routing
Parent = layout + outlet; content in the leaf. Enforced by the App Router; codified so it stays true.
5 · Operating mode
Transparent · focused · token-efficient - concise updates, closure reports with evidence.
6 · Production audit
No mocks/TODO/placeholder in production; end-to-end trace; green quality gates; readiness measured, not asserted.