LUDIX v4
Design system
The single source of truth for colors, typography, components, and interaction patterns across the LUDIX Hub interface.
Color tokens
bg
--bg
Page background
well
--well
Inputs, recessed wells
surface
--surface
Cards, panels
surface-2
--surface-2
Hover / raised surfaces
border
--border
Hairlines, dividers
border-strong
--border-strong
Hover / focus borders
ink
--ink
Primary text
ink-2
--ink-2
Secondary text
ink-3
--ink-3
Tertiary / meta text
brass
--accent
Accent: links, active states, focus
brass-strong
--accent-strong
Accent hover
Typography
Display
Find the games you share.
font-display · 4xl/6xl · bold · tight tracking
Headings
H1 — Page title
H2 — Section heading
H3 — Card title
Body
Body text is set at 16px minimum with generous line height. It should be readable on both paper-white and charcoal backgrounds without straining the eye.
Secondary text uses a slightly smaller size and the ink-2 token for lower emphasis.
12px uppercase eyebrow — labels and metadata only
Numbers
1,248h 37m
font-display · tnum
Buttons
Primary
Secondary
Ghost
Icon
Disabled
Loading
With icon
Form elements
Text input
Dropdown trigger
Segmented control
Toggle
Cards & panels
Glass panel
The default container: surface background with a single hairline border. No shadows, no radius, no blur.
Floating card
Adds a hover state that lightens the border. The card itself does not lift or cast a shadow.
Skeleton
Icon tile
40–56px surface/well + hairline
Accent usage
The brass accent is used sparingly: active navigation, focus rings, links on hover, and small indicators. It is never used as a large background fill behind body text.
Focus this page and tab to any button to see the brass focus ring.
Motion
Interactions are snappy: 100ms for color/border/opacity changes, 200–300ms for panel motion. Only transform and opacity animate. Respect prefers-reduced-motion by avoiding decorative motion.
Spacing & layout
- Container: max-w-editorial (1200px), px-5 md:px-8
- Navbar: fixed, h-16; pages offset with pt-16
- Section rhythm: py-10 md:py-14 separated by border-t border-hairline
- Grid gaps: gap-4 md:gap-6
- Radius: 0 everywhere
Accessibility
- All token pairs meet WCAG AA contrast on their intended backgrounds.
- Focus-visible is a 2px brass outline with 2px offset, applied globally.
- Interactive elements have ≥ 44×44px touch targets on mobile.
- Body copy is 16px minimum; no text below 12px.
- Icon-only buttons carry explicit aria-labels.
- Decorative motion respects prefers-reduced-motion.