Design

Warm editorial minimalism from kaichen.dev. Hover the cards first — lift, shadow, accent border — then switch palettes and read the type scale.

Magazine cards

Hover any box below — lift, shadow, accent border. Same .mag-card used on the home page, sandbox, and every subpage.

Primary card

Home widgets, about sections, and sandbox panels use .mag-card. Hover this box — it lifts, the shadow grows, and the bottom edge warms to bronze.

Inset card

Nested lists use .mag-card-inset — same lift and accent border, lighter shadow.

Nested example

Course projects

On a real page, inset cards sit inside a parent card — like Projects on the home page.

Color presets

Tap a palette — the preview below updates instantly. Set brand.theme in site.config.ts on your fork.

Preview

Body copy — links use accent color.

Primary action

#ff6f3c

Typography

Nunito for readable UI copy at magazine scale — light display, comfortable body.

Type scale

Display light

Section heading semibold

Body at 15–17px with generous line height — hero intros, card copy, and about pages.

site.config.ts · content/demo/

Motion & hover

Entrance fades, jumping greetings, and link rows that respond when you point at them.

JumpText

Hover link row

Full reference

For developers — expand when you need names, paths, and config fields.

Principles

Warm editorial minimalism
Soft zinc neutrals, one accent hue, generous whitespace. Reads like a magazine spread, not a dashboard.
Content-first hierarchy
Nunito for UI copy at readable sizes. Geist for chrome. Section labels anchor the eye without shouting.
Considered motion
Entrance fades, JumpText greetings, hover tooltips. Motion is opt-in per component.
Adaptive identity row
Hero grid syncs avatar size, intro spacing, and social links on desktop.
Config over code
site.config.ts and content/ drive nav, blocks, brand, and integrations. Fork without layout surgery.
Integrations fail open
GitHub, weather, and Spotify degrade to placeholders when credentials are missing.

Typography

Color & tokens

--background / --foreground
Page surface and default text
--accent
Links, nav underline, hover hints, chip hover
--font-ui-en
Nunito stack for English UI copy
--color-border-primary … tertiary
Three-step border hierarchy for .mag-card
--mag-card-radius
6px corner radius on cards
--contribution-l1 … l4
GitHub activity heatmap ramp
brand.theme in site.config.ts
Override any token; presets: sunset, ocean, terminal

Layout

Identity row
36% portrait column + intro column. ResizeObserver aligns avatar and copy height.
.mag-card
Primary content surface — Listening, Projects, about sections
.mag-card-inset
Nested list surface inside a parent card
.mag-chip
Pill links and buttons with optional arrow suffix
.nav-link
Fixed header links with accent underline active state
Page TOC
Floating right-rail navigator on subpages
max-w-[1180px]
Shared content width across all routes

Motion & interaction