Go to home

Design System

Cute with Shiny Elegance

Engineering precision wearing a soft glow. The accent is the voice; its rarity is the point.

  • Mono-ink + one accent (Quiet Rose / Warm Apricot)
  • Hairlines over fills
  • Trilingual typography (en / zh / ja)
  • Reveal on entry, 420ms ease-out-quart
  • Single-column narrow (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

Page canvas, raised panels, and overlays. In dark mode the layers are stepped; in light mode they collapse to white and are separated by border instead of fill.

  • background

    Page canvas

    —

  • surface

    Inline surface (cards, panels)

    —

  • card

    Card fill (alias of surface)

    —

  • popover

    Floating layer (popover, menu)

    —

  • background

    Page canvas

    —

  • surface

    Inline surface (cards, panels)

    —

  • card

    Card fill (alias of surface)

    —

  • popover

    Floating layer (popover, menu)

    —

Content

Foreground tones for text and iconography.

  • foreground

    Primary ink

    —

  • muted-foreground

    Secondary ink

    —

  • primary

    Primary action fill (mono-ink)

    —

  • foreground

    Primary ink

    —

  • muted-foreground

    Secondary ink

    —

  • primary

    Primary action fill (mono-ink)

    —

Wash & Edges

Soft fills for hover/selected states and structural lines.

  • muted

    Static wash

    —

  • accent

    Interactive wash (hover, pressed)

    —

  • border

    Hairline separators

    —

  • muted

    Static wash

    —

  • accent

    Interactive wash (hover, pressed)

    —

  • border

    Hairline separators

    —

Highlight

Brand voice. Used sparingly to mark identity, emphasis, and link affordance.

  • highlight-soft

    Soft brand wash

    —

  • highlight-text

    Brand text accent

    —

  • highlight-icon

    Brand icon tint

    —

  • highlight-soft

    Soft brand wash

    —

  • highlight-text

    Brand text accent

    —

  • highlight-icon

    Brand icon tint

    —

Status

Semantic feedback. Use intent over decoration.

  • destructive

    Error, destructive action

    —

  • info

    Informational

    —

  • success

    Confirmation, positive

    —

  • warning

    Caution

    —

  • destructive

    Error, destructive action

    —

  • info

    Informational

    —

  • success

    Confirmation, positive

    —

  • warning

    Caution

    —

Elevation

One whisper shadow tinted with highlight-soft. No glass, no drop shadows, no elevation theatre.

Surfaces are flat at rest. Depth is carried by hairlines, not lift.

shadow-halo

0 1px 2px · highlight-soft / 30%

Components

Two layers: primitives imported wholesale, and the small composed pieces we build on top.

Prime

Buttons, badges, popovers, dialogs. Copied wholesale from bejamas/ui and left alone.

bejamas/uiAstro-native components. Copy and own the code.

Particles

The thin layer above prime. Project-specific affordances that carry the site's voice.

  • View all

    TextLink — Pill underline with rounded end caps, not text-decoration

  • wanderer

    Wanderer gradient — Animated gradient text, footer-only emphasis

Named rules

  • The One Voice Rule

    highlight-text and highlight-soft together occupy ≤10% of any screen.

  • The Hairlines-Not-Walls Rule

    In light mode, surface, card, and popover collapse to background. Separate with border, not fill.

  • The One Wordmark Rule

    font-fugaz-one is forbidden anywhere except on the literal text "Xat".

  • The One Gradient Rule

    background-clip: text gradient appears only in the footer wanderer line.

  • The Code Stays Dark Rule

    Code blocks stay Vesper-dark in both light and dark site modes.