Design System
The design system lives in apps/web/src/app/globals.css. It uses Tailwind CSS v4's @theme block to define CSS custom properties as design tokens.
Color Tokens
PCMR.gr Brand (Dark Theme — default)
| Token | Hex | Usage |
|---|---|---|
--color-primary | #400080 | Interactive elements, active states, CTA buttons |
--color-primary-light | #9a7bd6 | Gradient ends, hover glows |
--color-secondary | #C026D3 | CTAs, alerts, critical actions — use sparingly |
--color-background | #07060d | Page base |
--color-surface | #0f0e1a | Base layer |
--color-surface-low | #161427 | Section containers |
--color-surface-mid | #1b1830 | Cards, list items |
--color-surface-high | #221d3a | Hover states, active cards |
--color-surface-highest | #2c2550 | Modals, popovers, dropdowns |
--color-on-primary | #ffffff | Text on primary backgrounds |
--color-on-surface | #eceaf5 | Primary body text |
--color-on-surface-muted | #9b96b3 | Secondary text, labels, metadata |
Light Theme (.light class)
| Token | Value |
|---|---|
--color-background | #f8f7fc |
--color-surface | #ffffff |
--color-surface-high | #dcd8ef |
--color-on-surface | #1a1528 |
Elevation Stack
Surface tokens define a layering system (deepest → highest):
background → surface → surface-low → surface-mid → surface-high → surface-highest
Use surface token shifts to separate content areas. No borders. This is a hard rule of the design system.
Critical Design Rules
- No borders — separate content via surface token shifts only
outline-ghost(white 15%) only for accessibility fallback borders- Never
rounded-fulloutside avatar images — contradicts the precision aesthetic - Shadows: minimum blur 32px, max opacity 6%, shadow color
#07060d(never pure black) - Glassmorphism: max once per view (
surface-lowat 75% opacity,backdrop-blur-14) - Shadows should be felt, not seen
Typography
| Role | Font | CSS Token |
|---|---|---|
| Display / Headlines | Play | --font-display |
| Titles / Subheadings | Roboto Slab | --font-title |
| Body / UI | Roboto | --font-body |
| Specs / Metadata / Code | Roboto Mono | --font-mono |
label-* utility tokens are always uppercase. Used for: spec chips, status badges, metadata labels.
Badge Tokens
Status badges use OKLCH-based color tokens for perceptually uniform hue shifts:
| Color | Usage examples |
|---|---|
badge-purple | Primary, default |
badge-cyan | Info states |
badge-amber | Warning states |
badge-green | Success, paid, completed |
badge-blue | Info |
badge-violet | Alternative accent |
badge-red | Error, cancelled, failed |
badge-pink | Secondary accent |
Motion
| Context | Duration / Easing |
|---|---|
| Hover transitions | 150–200ms ease |
| Page transitions | 300ms ease-in-out |
No bounce, no spring physics on UI chrome. No continuous looping animations outside hero sections. All motion respects prefers-reduced-motion.
Utility Classes
Custom utilities defined in globals.css:
| Class | Purpose |
|---|---|
.pub-glass | Glassmorphism card (use max once per view) |
.pub-card-hover | Card hover lift + glow effect |
.pub-nav-link | Navigation link underline animation |
.pub-btn-primary | Primary button with glow pulse |
.pub-btn-secondary | Secondary button variant |
.pub-footer-top | Footer top separator |
.pub-faq-body | FAQ accordion body text |
.pub-reveal | Scroll-triggered fade-in animation |
shadcn/ui Integration
shadcn/ui components are installed in the monorepo following the manual path (not npx shadcn init — that doesn't work cleanly in pnpm workspaces).
shadcn tokens are mapped to the design system:
--color-foreground: var(--color-on-surface);
--color-muted: var(--color-surface-mid);
--color-muted-foreground: var(--color-on-surface-muted);
--color-input: var(--color-surface-high);
--color-ring: #400080; /* primary */
--color-destructive: #ef4444; /* red */
Components live in apps/web/src/components/ui/. When adding new shadcn components, copy from the shadcn registry and theme using CSS variable overrides.
Tailwind v4 Notes
Tailwind v4 uses a CSS-first configuration via @theme in globals.css — there is no tailwind.config.js. Custom tokens defined in @theme are automatically available as Tailwind utility classes:
@theme {
--color-surface-mid: #1b1830;
}
/* → available as bg-surface-mid, text-surface-mid, border-surface-mid, etc. */
Creative Direction
"The Precision Lab" — premium telemetry dashboard aesthetic.
- Atmospheric layering via surface shifts, never borders
- Intentional asymmetry, editorial layouts
- Technical soul — lab, not lifestyle
- Not a gamer site — avoid aggressive angles, neon effects, RGB imagery