DESIGN SYSTEM
Design System
An overview of the design tokens and UI primitives that make up this site — colors, typography, spacing, and components, all in one place.
Colors
A grayscale-based palette that adapts between light and dark mode.
surface
--color-surface
surface-alt
--color-surface-alt
ink
--color-ink
muted
--color-muted
line
--color-line
accent
--color-accent
Typography
Fluid typography powered by clamp(), scaling smoothly with the viewport width.
Aa やーはり
display — --text-display
Aa やーはり
heading — --text-heading
Aa やーはり
subheading — --text-subheading
Aa やーはり — Body text (text-ink)
text-muted — secondary / supporting text
Spacing
Section spacing tokens measured in vh, keeping a consistent rhythm relative to viewport height.
--space-sm
--space-md
--space-lg
Buttons
Two systems: pill-shaped for primary actions, compact for secondary controls.
Cards
Opaque cards that lift on hover.
Sample card
Lifts up and gains a shadow on hover.
Form Fields
Minimal underline-only inputs that change color on focus.
This is a sample error message
Badges & Status
Small badges and indicators for status display.