Design system rules for the GT UI component library (packages/ui). Use when writing or reviewing UI components, styling, colors, buttons, typography, dark mode, or shadcn/ui configuration.
Strict design rules for the shared UI component library (packages/ui), new dashboard (apps/dashboard), and landing page (apps/landing). These are non-negotiable — follow them for every UI change.
| Area | Rule |
|---|---|
| Border radius | rounded-md for everything (see exceptions (./border-radius.md#exceptions)) |
| Colors | Black/white base + 5 approved colors only. Use semantic tokens, never raw values. |
| Typography | Geist / Geist Mono. Min text-sm. No thin weights. Always antialiased. |
| Buttons | Always use Button component. rainbow only for single most important CTA per page. |
| Sibling spacing | Layout parents own sibling spacing with gap-* or space-*; avoid repeated child margins. |
| Surface nesting | Do not nest Cards; use spacing and headings to create hierarchy within a surface. |
| Dark mode | Semantic tokens, not dark: overrides. No useTheme() for conditional markup. |
| shadcn/ui | radix-vega preset. Override via CSS variables, not editing base output. |
For JSX UI copy, prefer one <T> around the largest static JSX structure that makes sense instead of wrapping only text nodes. <T> can wrap elements and components, which gives translations more useful markup context.
<T>
<Button>Save changes</Button>
</T>Do not nest <T> components. Do not put raw variables, ternaries, or mapped expressions directly inside <T>; use GT variable, number, date, plural, or branch components for dynamic content. <T> does not translate user-facing props passed to child components, so translate those props with gt().
./border-radius.md)./colors.md)./typography.md)./buttons.md)./sibling-spacing.md)./nested-surfaces.md)./dark-mode.md)./shadcn-preset.md)