SYS / 001 EN / 中

00 / STYLE GUIDE — VISUAL SOURCE OF TRUTH

Dark
Type
Grid.

This page is the reference for every future change. If a component is not here, it does not exist yet.

01 / COLOR

Roles, not hex.

Components reference tokens only — a hex literal inside a component is a bug. Dark is the default identity; light is opt-in.

DARK default — no attribute needed
SURFACES elevation ladder
--bg canvas
--surface-sunken inset well
--surface card
--surface-raised overlay
TEXT 4.5:1 on every surface above
Aa --text-primary headings, body
Aa --text-secondary supporting copy
Aa --text-muted metadata, dates
Aa --text-disabled disabled only
BORDERS 1px alpha hairlines
--border-subtle separator
--border container edge
--border-hover hovered edge
--border-strong outline button
ACCENT brand presence
--accent identity, links
--accent-hover hovered label
--accent-subtle tinted fill
STATUS never brand-coloured
Aa --success available, ok
Aa --warning caution
Aa --danger error, destructive
Aa --info informational
LIGHT <html data-theme="light">
SURFACES elevation ladder
--bg canvas
--surface-sunken inset well
--surface card
--surface-raised overlay
TEXT 4.5:1 on every surface above
Aa --text-primary headings, body
Aa --text-secondary supporting copy
Aa --text-muted metadata, dates
Aa --text-disabled disabled only
BORDERS 1px alpha hairlines
--border-subtle separator
--border container edge
--border-hover hovered edge
--border-strong outline button
ACCENT brand presence
--accent identity, links
--accent-hover hovered label
--accent-subtle tinted fill
STATUS never brand-coloured
Aa --success available, ok
Aa --warning caution
Aa --danger error, destructive
Aa --info informational

Ratio — Surfaces 82% · Text 15% · Accent 3%. Elevation is surface + border in dark, surface + shadow in light. Text clears 4.5:1 on every surface in the ladder; --text-disabled is the one exemption.

02 / TYPOGRAPHY

Geist · Geist Mono

Headings 500 · Body 400 · Mono for metadata, numbers, labels.

Display XL — 96 / 0.92 / -0.055em / 500

BUILDING DIGITAL THINGS.

Display — 72 / 0.95 / -0.045em / 500

A better way to move goods.

H1 — 56 / 1 / -0.035em

Project title goes here

H2 — 40 / 1.05 / -0.025em

Section heading

Body Large — 20 / 1.5

Websites, tools and experiments. A quiet technical editorial voice.

Body — 16 / 1.6

Body copy at 16px. Generous whitespace, no decoration without purpose.

Mono — 12 / 1.4 / 0.02em

01 / PROJECT — 2026.09.10 — ASTRO · SVELTE · TYPESCRIPT

01 / PROJECT

A BETTER WAY
TO MOVE GOODS.

Web design · Development · E-commerce

03 / BUTTONS

Pill primary. Outline secondary.

Discuss a project → Read blog Disabled

Declared once in global.css — never re-declare .btn in a component. Primary: fill --inverse-bg → hover --accent. Secondary: transparent / --border-strong → hover --accent-hover. Height 48px · Radius 999px

04 / GRID

12-col desktop · 4-col mobile

Max 1440px · Gutter 32px (20px mobile) · Gap 16px (12px mobile).

05 / CARDS

--surface · --border · hover --border-hover

No gradient, no glass. Image bed is --surface-sunken. Elevation is the shadow token — free in dark, real in light.

01 / CLIENT WORK

A better way to move goods

E-commerce & brand site for a modern logistics group.

ASTRO · SVELTE · TYPESCRIPT

02 / CLIENT WORK

Second project name

Short description of the project.

ASTRO · TYPESCRIPT

03 / EXPERIMENT

Third project name

Short description of the project.

ASTRO · MDX

06 / BLOG ROWS

Editorial list, not cards.

Border-top hairline · Mono date + category · 17px title. Hover: --surface-hover wash, title → --accent-hover.

09.10.26 WEB DEVELOPMENT Why I moved my personal website from WordPress to Astro 8 min → 08.28.26 DESIGN SYSTEM Second article title 6 min → 08.14.26 TOOLING Third article title 4 min →

07 / TOOLS

Mono · index · status dot

Technical but not a dashboard. One purpose per card.

01 ● READY

Image Compressor

Reduce image size without destroying quality.

Open tool →
02 ● READY

JSON Formatter

Format, validate and inspect JSON.

Open tool →
03 ● READY

Third tool

Short description of the tool.

Open tool →

08 / EXPERIMENTAL

≤ 5–10% of the page.

Grid dots · coordinates · system labels · tiny ● indicator in --accent. Opacity low, never dominant.

SYSTEM / 001BUILD / 2026STATUS / ACTIVE● ONLINE

V2 — Dark first, light opt-in via <html data-theme="light"> · Spacing 4px base (4 8 12 16 24 32 48 64 80 96 128 160 192) · Motion 200–700ms ease-out · Radius sharp (cards 0–4px, buttons 999px)