Design tokens
Design tokens are the single source of truth for visual decisions in Baseleg. All product UI must use these tokens rather than hardcoded values. Tokens are implemented via Tailwind’s configuration and the @baseleg/ui package.
Colour
Neutrals (slate)
The base neutral palette. Used for text, borders, backgrounds, and surfaces.
| Token | Hex | Usage |
|---|---|---|
slate-50 | #f8fafc | Page background, subtle fills |
slate-100 | #f1f5f9 | Hovered surface backgrounds |
slate-200 | #e2e8f0 | Borders, dividers |
slate-300 | #cbd5e1 | Disabled borders |
slate-400 | #94a3b8 | Placeholder text |
slate-500 | #64748b | Secondary / helper text |
slate-600 | #475569 | Body text (secondary) |
slate-700 | #334155 | Body text (primary) |
slate-900 | #0f172a | Headings, strong labels |
white | #ffffff | Card surfaces, inputs |
Primary (sky)
Used for interactive elements, focus rings, and selected states.
| Token | Usage |
|---|---|
sky-500 | Primary action colour |
sky-600 | Primary hover state |
sky-50 | Info badge background |
sky-700 | Info badge text |
Semantic colours
| Colour | Tokens | Usage |
|---|---|---|
| Success | green-50, green-700, green-200 | Success states, confirmed badges |
| Warning | amber-50, amber-700, amber-200 | Warning states, approaching-expiry alerts |
| Error / Destructive | rose-50, rose-800, rose-200, rose-900 | Error states, destructive actions, lapsed alerts |
| Info | sky-50, sky-700 | Informational badges |
Usage rules
- Do not hardcode hex values in component or page code.
- Use semantic colour tokens for their intended meaning — do not use
rosefor decoration. - Focus rings must use
sky-500/30(with opacity) for all interactive elements.
Spacing
Baseleg uses Tailwind’s default spacing scale. Key values:
| Scale | rem | px | Common usage |
|---|---|---|---|
1 | 0.25rem | 4px | Fine spacing, icon gaps |
2 | 0.5rem | 8px | Internal padding (tight) |
3 | 0.75rem | 12px | Input padding, button padding |
4 | 1rem | 16px | Standard component gap |
6 | 1.5rem | 24px | Section padding |
8 | 2rem | 32px | Page section gaps |
12 | 3rem | 48px | Major layout gaps |
Avoid fractional spacing values (e.g. p-2.5) unless explicitly needed for alignment with a specific element.
Typography
All text uses the system font stack via Tailwind’s default configuration unless overridden by a specific token.
| Scale | Class | Usage |
|---|---|---|
| Display | text-2xl font-bold | Page titles |
| Heading | text-lg font-semibold | Section headings |
| Subheading | text-base font-semibold | Card titles, group labels |
| Body | text-sm text-slate-700 | General body text |
| Secondary | text-sm text-slate-500 | Helper text, captions |
| Label | text-xs font-medium text-slate-600 | Form labels |
| Micro | text-xs text-slate-400 | Timestamps, metadata |
Border radius
| Token | Value | Usage |
|---|---|---|
rounded-md | 6px | Inputs, buttons |
rounded-lg | 8px | Cards, panels |
rounded-xl | 12px | Feature cards, modals |
rounded-full | 9999px | Badges, avatars, pill tags |
Shadows
| Token | Usage |
|---|---|
shadow-sm | Subtle card lift |
shadow | Default card shadow |
shadow-md | Dropdown menus, popovers |
shadow-lg | Modals, dialogs |
Avoid shadow-xl and above unless displaying a modal-like overlay that needs maximum separation from the page.
Focus rings
All interactive elements must show a visible focus ring for keyboard accessibility:
class="focus:outline-none focus:ring-2 focus:ring-sky-500/30"Do not remove focus rings without providing an equivalent accessible alternative.