Design System
カラー、タイポグラフィ、レイアウト、モーション、アクセシビリティ、ボイスを扱う 18 枚のスライド。サイトが実際に準拠している DESIGN.md から描画されます。
プロジェクトのローカライズ版。stack、links、code、主要な技術詳細を保持しています。
Every interface decision on this site — the type scale, the spacing rhythm, the nav anatomy, the shimmer above a translated post — lives in one in-app deck. Writing the system as a presentation forced each choice to earn its slide.
The deck reads from DESIGN.md, the contract the site is built against. Updating the contract updates the deck, so the slides and the stylesheet cannot drift apart quietly.
What's in the deck
Eighteen slides:
- Foundations — "Purpose before decoration", and the reading space the site is for
- Color — neutral by default, semantic color where it carries meaning, editorial accents, and a dedicated accessibility slide: "Readable. Reachable. Recoverable."
- Typography — one familiar voice. Geist Sans carries every type role, Geist Mono the code, shown at actual size rather than as a specimen chart
- Layout — a 720px reading measure, padding included, inside a 1040px content area, with spacing used to describe relationships
- Components and motion — control states that explain themselves; motion that responds before it decorates
- Application — nav wayfinding, honest evidence and comparison, SEO and GEO, voice, one thought across six locales, and a maintenance slide
Why a deck and not a doc
The deck lives in the product: one keystroke away at /_dev/design-system?mode=presentation, screenshottable at 16:9, rendered in both light and dark. Because it renders DESIGN.md instead of restating it, there is one place to change a rule and one place to read it.
Stack
Next.js 16 · React 19 · Tailwind CSS 4 · container queries · @radix-ui/react-icons · Geist Sans and Geist Mono via next/font/google