Design system
Tokens, typography, surfaces and components of the U Framework interface.
The U Framework interface is built on a small token system defined in src/styles/tokens.css. Components consume semantic tokens, which are re-bound per surface tone, so the same component works on black and white surfaces without variants.
Surfaces
Two tones, applied per section with tone-dark or tone-light:
| Token | Dark | Light | Use |
|---|---|---|---|
--bg | #050506 | #f3f3f1 | Surface |
--fg | #f4f4f3 | #0a0a0b | Primary text |
--fg-muted | #a1a1a9 | #55555c | Secondary text |
--line | 8.5% white | 9% black | Hairlines |
--accent | #3ee08f | #0a7a46 | Signal: state, selection, intelligence |
Green is a signal, not a theme. It marks active states, selected items, live status and intelligence — never large surfaces.
Typography
One family — Geist — with Geist Mono for technical metadata. Display sizes are fluid with clamp():
--fs-hero: clamp(3.1rem, 0.9rem + 8.4vw, 10.75rem);
--fs-h2: clamp(2rem, 1.15rem + 3.1vw, 4.25rem);
--tracking-hero: -0.055em;Motion
| Token | Value | Use |
|---|---|---|
--ease-out | cubic-bezier(0.16, 1, 0.3, 1) | Entrances, reveals |
--ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) | State changes |
--dur-2 | 320ms | Hover, small UI |
--dur-4 | 1100ms | Reveals |
Reveals are declarative: add data-reveal (variants fade, blur, scale, clip, line) or use <SplitText> for headlines. A single observer handles the whole site, and everything is shown immediately under prefers-reduced-motion.
Components
ButtonLink—primary,secondary,ghost,signal; magnetic on fine pointers.SectionHeader,PageHero,Eyebrow— consistent section anatomy.RelatedLinks— internal linking driven by content relationships.AIOrb,OrbBoard— see AIOrb.