Styleguide
The design this app is built on, shared by the product and this dashboard. Every token and component says who reaches for it. Derived from globals.css at build time. To change a value, change the CSS.
No feature doc carries area: design, so these pages are the only home the product's design has.
Spacing
The named scale. Tailwind: gap-md, p-xl, m-sm…
--space-tinygap-tiny · p-tinydashboard2px--space-xxsgap-xxs · p-xxsdashboard4px--space-xsgap-xs · p-xsdashboard6px--space-smgap-sm · p-smdashboard8px--space-mdgap-md · p-mdboth12px--space-lggap-lg · p-lgboth16px--space-xlgap-xl · p-xlboth20px--space-xxlgap-2xl · p-2xldashboard24px--space-xxxlgap-3xl · p-3xlboth32px--space-jumbo-1gap-4xl · p-4xlunused40px--space-jumbo-2gap-5xl · p-5xldashboard64px--space-jumbo-3gap-6xl · p-6xlunused80pxRadius scale
--radius-noneunused0px--radius-tinydashboard2px--radius-xxsboth4px--radius-xsboth6px--radius-smdashboard8px--radius-mdboth12px--radius-lgunused16px--radius-xlunused24px--radius-circlerounded-fulldashboard9999pxRadius aliases
What components actually reach for.
--radius-panelboth→ --radius-md (12px)panels, cards, modal sheets--radius-formunused→ --radius-xl (24px)floating form modals--radius-pilldashboard→ --radius-circle (9999px)pill buttons / badgesShadows
Elevation. Dark mode deepens every step so elevation still reads on dark surfaces — both values shown.
--shadow-xslightdark
0 1px 2px rgba(0, 0, 0, 0.05)--shadow-smlightdark
0 1px 3px 0 rgb(0 0 0 / 6%)--shadow-mdlightdark
0 4px 16px rgba(0, 0, 0, 0.08)--shadow-lglightdark
0 8px 24px rgba(0, 0, 0, 0.1)--shadow-xllightdark
0 16px 48px rgba(0, 0, 0, 0.12)--shadow-modallightdark
0 2px 12px rgba(0, 0, 0, 0.06)Breakpoints & containers
Tailwind variants (md:) and max-w-* stops.
--breakpoint-smsm:*dashboard480px--breakpoint-mdmd:*dashboard768px--breakpoint-lglg:*dashboard900px--breakpoint-xlxl:*unused1024px--breakpoint-2xl2xl:*unused1280px--container-narrowmax-w-narrowunused400px--container-prosemax-w-proseproduct640px--container-pagemax-w-pageproduct800pxSource: app/globals.css, parsed at build time.