l-design-system

Design system reference for the mdx-formatter doc site (zudo-doc based). Use PROACTIVELY when: (1) Writing or modifying any CSS/styling in doc/, (2) Creating or editing React components in doc/src/com...

File Structure

l-design-system/
├── SKILL.md
└── references/
    └── tokens.md

references/tokens.md

Doc Site Design System

Tight token strategy: Tailwind v4 with NO default theme. Only project tokens via @theme in doc/src/styles/global.css. Never use raw pixel/rem values or default Tailwind classes like h-3, w-4, text-sm — they don’t exist.

For full token values, read references/tokens.md.

Colors (semantic — auto light/dark)

Token	Use
`bg` / `fg`	Page background / main text
`surface`	Panels, cards, elevated backgrounds
`muted`	Borders, secondary text, disabled. Use `muted/30` for subtle borders
`accent` / `accent-hover`	Links, CTAs, focus rings, hover
`code-bg` / `code-fg`	Code blocks and inline code
`success` / `danger` / `warning` / `info`	Status colors

Spacing

Horizontal (hsp): 2xs(2px) xs(6px) sm(8px) md(12px) lg(16px) xl(24px) 2xl(32px)

Vertical (vsp): 2xs(7px) xs(14px) sm(20px) md(24px) lg(28px) xl(40px) 2xl(56px)

Usage: px-hsp-md, py-vsp-sm, gap-hsp-xs, gap-vsp-md, gap-x-hsp-md, gap-y-vsp-xs

Typography

Token	Size	Use
`text-caption`	14px	Labels, small UI, buttons, inputs
`text-small`	16px	Nav, table headers, code blocks
`text-body`	19.2px	Paragraphs, main content
`text-subheading`	22.4px	Card titles, h3
`text-heading`	48px	Page headings
`text-display`	60px	Hero text

Fonts: font-sans (Noto Sans JP), font-futura (headings/nav), font-mono (code)

Line heights: leading-tight(1.25) leading-snug(1.375) leading-normal(1.5) leading-relaxed(1.625)

Weights: font-normal(400) font-medium(500) font-semibold(600) font-bold(700)

Radius & Breakpoints

Radius: rounded(4px) rounded-lg(8px) rounded-full(pill)

Breakpoints: sm:(640px) lg:(1024px, sidebar) xl:(1280px)

Common Patterns

// Button (primary)
rounded-lg bg-accent px-hsp-xl py-hsp-xs text-caption font-semibold text-bg

// Panel/card
rounded-lg border border-muted/30 bg-surface p-hsp-md

// Input field
rounded border border-muted/30 bg-code-bg px-hsp-xs py-0.5 text-caption text-fg

// Label
text-caption font-semibold text-muted

// Code textarea
bg-code-bg p-hsp-md font-mono text-caption leading-relaxed text-code-fg

// Section gap
gap-vsp-sm (between sections), gap-vsp-2xs (within section)

SVG Icons

Always use explicit width/height attributes — Tailwind size classes (h-N/w-N) don’t exist. Add shrink-0 in flex.

<svg width="12" height="12" className="shrink-0" viewBox="0 0 12 12" fill="currentColor">

Key Source File

All tokens are defined in doc/src/styles/global.css. When in doubt, read it.