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

Ink first. Signal sparingly.

INK — #080808
SURFACE — #111111
SURFACE-2 — #181818
BORDER — #252525
BORDER-SUBTLE — #1B1B1B
SIGNAL — #4F7CFF
TEXT-PRIMARY — #F2F2F0
TEXT-SECONDARY — #A0A09B

Ratio — Black 82% · White/Grey 15% · Accent 3%

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

Primary: #F2F2F0 → hover #4F7CFF · Secondary: transparent / #383838 → hover #4F7CFF · 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 #111 · Border #252525 · Hover #444

No shadow, no gradient, no glass. Image 16/10, scale 1.02 on hover, 250–400ms ease-out.

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: title → accent.

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 #4F7CFF. Opacity low, never dominant.

SYSTEM / 001BUILD / 2026STATUS / ACTIVE● ONLINE

V1 — Dark only · No light mode yet · 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)