Design system
Reference
The Greenlight UI is built on shadcn/ui plus Tailwind CSS v4, with a token set we ship as a reference baseline. Apps that want a coherent look across the organization can adopt the same tokens; apps that need a different brand identity are free to use their own design language.
This page covers the baseline. Customer-specific design-system rules (which Tailwind config to use, where to source icons, which fonts to load) live in org-scope Knowledge — that’s where the org’s own house style gets captured.
Stack
| Layer | Choice |
|---|---|
| Framework primitive | React 18 |
| Bundler | Vite |
| Styling | Tailwind CSS v4 |
| Component library | shadcn/ui (New York style) |
| Theme | Light + dark, system default |
| Fonts | Inter, JetBrains Mono |
shadcn ships components as source you copy into your project, not as a runtime dependency. Apps own their copy and can fork freely.
Color tokens
The Greenlight UI maps every surface color to a semantic CSS variable. These are the most-used ones.
| Token | Light | Dark | Purpose |
|---|---|---|---|
--background | #ffffff | #0a0b0f | Page background |
--card | #ffffff | #0f1117 | Card surface |
--foreground | #1d2030 | #e9ebf2 | Body text |
--muted-foreground | #5f6478 | #9498ad | Secondary text |
--primary | #2f60ee | #3b6ef5 | Accent (links, primary buttons) |
--border | #e3e5eb | #1a1d27 | Hairlines |
--destructive | #df2020 | #ef4444 | Destructive actions |
Status colors (green, amber, red) follow the same pattern with theme-aware values that meet AA contrast on their respective backgrounds.
Typography
- Body: Inter, 13.5–14px, line-height 1.55. Loaded as a Latin subset via
@fontsource/inter. - Mono: JetBrains Mono, used for IDs, environment-variable names, code, and the eyebrow labels above page titles.
- Headings: Inter with tight tracking. H1 is
font-extrabold; H2 isfont-bold.
Components
The Greenlight UI uses these shadcn components in its own dashboard. Apps that adopt the baseline get the same set out of the box.
| UI need | Component |
|---|---|
| Buttons | Button (variants: default, secondary, ghost, destructive) |
| Cards and panels | Card, CardHeader, CardContent, CardTitle |
| Forms | Input, Label, Select, Textarea, Checkbox, Switch |
| Status indicators | Badge plus a custom StatusBadge for active/degraded/failed |
| Tables | Table and friends |
| Tabs | Tabs, TabsList, TabsTrigger, TabsContent |
| Modals | Dialog (becomes a bottom Drawer on mobile) |
| Menus | DropdownMenu |
| Notifications | Sonner toast |
| Tooltips | Tooltip |
| Loading | Skeleton |
Mobile patterns
The Greenlight UI is mobile-first. Tables collapse to card lists below md, dialogs become bottom sheets, dense tab strips become horizontally scrollable. Apps that adopt the baseline inherit these behaviors.
WCAG 2.5.5 touch-target minimums are enforced everywhere: h-11 on touch, h-9 on pointer devices.
Theming
The runtime toggles light or dark on the <html> element. Every shadcn component reads the same CSS variables; no per-component conditional code is required. A small inline script in index.html resolves the theme before React mounts to prevent flash-of-wrong-theme.
The Greenlight UI honors prefers-color-scheme by default and persists the user’s explicit choice to localStorage.