Design system
Tokens + reusable components. This is a “developer-first” styleguide you can translate to Figma.
Color tokens
Core background + brand gradients. See :root in styles.css.
--bg0--bg1--bg2
--brand1--brand2--brand3
Typography
Inter for a premium SaaS feel. Headings use tight letter-spacing.
Heading
Body text and microcopy for UX clarity.
Radius + shadow
Soft radii with layered shadows for depth. Default card radius: --r-md.
Buttons
Use primary for one action per section.
Inputs
Code blocks (outputs)
This is an output container. Use it for AI drafts, audits, and exported packets.
Tabs
Tabs are pills — keep them short.