Design System
Cute, shiny, and elegant
A precise frame with a soft surface. Accent color appears only when it has a job to do.
- Mono-ink palette + one accent (Quiet Rose / Warm Apricot)
- Spacing, rhythm, and typographic alignment organize the page
- Trilingual typography, tuned for zh / en / ja
- Reveal animation on entry, 420ms ease-out-quart
- Responsive, narrow single column (42rem max)
Typography
Hierarchy
Display
Hanken Grotesk · 30px · 500
Headline
Hanken Grotesk · 24px · 500
Title
Hanken Grotesk · 18px · 600
Body
Hanken Grotesk + MiSans · 16px / 28px · 400
Label
Hanken Grotesk · 14px · 500
Mono
Calling Code · 12px · 400
Bio lead
Source Han Serif SC · 16px / 28px · 600
Wordmark
Fugaz One · 24–30px · 400 · "Xat" only
Specimens
Hanken Grotesk — Display & UI
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
MiSans — CJK
打造生产级界面与 AI 原生产品
本番品質の UI と AI ネイティブなプロダクトをつくる
Fugaz One — Accent
Xat
Calling Code — Monospace
const greeting = "Hello"
Source Han Serif — Serif
Building production-quality interfaces
Colors
Both palettes show side by side on wide screens; tap to swap on narrow ones. Defaults to your current theme.
Surface
The page, panels, and floating layers.
.light
background
Page background
—surface
Surface
—card
Card fill
—popover
Floating layer
—
.dark
background
Page background
—surface
Surface
—card
Card fill
—popover
Floating layer
—
Content
Base colors for text and icons.
.light
foreground
Primary text
—muted-foreground
Secondary text
—primary
Primary action fill
—
.dark
foreground
Primary text
—muted-foreground
Secondary text
—primary
Primary action fill
—
Wash & edges
Soft interactive fills and quiet edges for bounded surfaces.
.light
muted
Soft fill
—accent
Soft interactive fill
—border
Border
—
.dark
muted
Soft fill
—accent
Soft interactive fill
—border
Border
—
Highlight
Brand color. Used sparingly, only where emphasis belongs.
.light
highlight-soft
Soft brand fill
—highlight-text
Brand highlight text
—highlight-icon
Brand icon color
—
.dark
highlight-soft
Soft brand fill
—highlight-text
Brand highlight text
—highlight-icon
Brand icon color
—
Status
Semantic feedback. Intent first, decoration second.
.light
destructive
Error, destructive action
—info
Information
—success
Success, confirmation
—warning
Warning
—
.dark
destructive
Error, destructive action
—info
Information
—success
Success, confirmation
—warning
Warning
—
Elevation
Light shadows tinted with highlight-soft. They signal interactivity.
Surfaces sit flat against the page. Hairlines mark their edges; soft glows signal interaction.
shadow-halo
Signature soft edge for interactive surfaces
0 1px 2px · highlight-soft / 30%
shadow-image-edge
Article media edge
1px ink edge · shadow-halo
Components
Two layers: one keeps the primitives untouched; the other composes them into components that belong to this site.
Prime
Buttons, badges, popovers, dialogs, all from bejamas/ui.
Particles
Small pieces that fit the site's character.
- View all
TextLink — Pill underline with rounded end caps
wanderer
Wanderer gradient — Animated gradient text, used only as decoration in the footer
- 927
Stat digits — Metallic odometer digits for live visit stats in the footer
Design principles
One Voice Principle
highlight-text and highlight-soft take up no more than 10% of a screen.
Spacing-first Layout Principle
Spacing, rhythm, and typographic alignment organize the page; hairlines only bound surfaces.
One Wordmark Principle
font-fugaz-one is used only for the "Xat" logo text.
One Gradient Principle
The background-clip: text gradient appears only in the footer wanderer line.
Code Stays Dark Principle
Code blocks stay Vesper-dark in both light and dark site modes.