Powered by TxLINE
Powered by TxLINE
The single source of truth. Every colour, size, radius and shadow is a token in globals.css; components reference roles, never raw values. Build new screens from these and the system stays coherent.
Components use these roles (positive/warning/danger/info/neutral), never hue names. Swap the accent and everything follows.
.text-display · 24 → 30px · 700 · heading.text-title · 20 → 24px · 700 · section.text-lead · 16px · lead paragraph.text-body · 14px · default body.text-caption · 12px · caption.text-eyebrow · 10px · uppercase kicker.text-micro · 10px · dense labelFonts: Inter (sans) · Geist Mono · Talero (display numerals).
Card padding tiers — p-4 for dense/data cards, p-5 for feature cards. Page gutter px-6, section gap gap-8.
Durations --duration-fast/base/slow (140/240/420ms), easing --ease-soft. Hover a card: