Experiment 1 · Design Rules Handbook

Each rule is not just text — it lives in this page.

Project & Structure

This page is written with this stack:

Next.js 16React 19TypeScriptTailwind v4next-intl 4.x

src/appsrc/componentssrc/i18nmessages/public/references/ separate

Source:docs/decisions/0001-design-foundation.md

Visual Style

The page background, grain and scrollbar are the rule; palette / fonts / strokes below:

Palette

Sky

Sky Tint

Coral

Ochre

Tan

Cocoa

Fonts

Aa 你好Noto Sans SC

Aa 你好Patrick Hand + ZCOOL KuaiLe

Aa 你好JetBrains Mono

Border · Shadow · Radius

Background · Grain · Scrollbar

Source:src/app/globals.cssdocs/decisions/0001-design-foundation.md

Layout & Responsive

Drag the window from narrow to wide — gutters and headings scale continuously, no breakpoint jumps.

--gutter: min(6rem, 2.5vw)--text-hero--text-titleclamp()rem first

Source:src/app/globals.css

Style Organization

globals.css holds only design tokens; component styles live in same-name CSS Modules:

globals.cssbutton.tsxbutton.module.csshero.tsxhero.module.css

/* globals.css — design tokens only */
@theme {
  --color-paper: …;
  --color-ink: …;
  --font-display: "Patrick Hand", "ZCOOL KuaiLe";
}
:root { --gutter: min(6rem, 2.5vw); }

Source:docs/decisions/0001-design-foundation.mdsrc/components/ui/button.tsx

Site Positioning

A personal lab site, not a blog; no degrees, career or titles:

Personal lab siteeevion labNo identity info

Source:docs/decisions/0001-design-foundation.md

i18n · Three languages is a rule

Toggle the language in the nav bar or the page toolbar — this page is the demo.

zh-CN defaulten / zh-TW prefixednext-intlproxy.ts

Source:src/i18n/routing.tsmessages/en.json

Visual Port

Decorations, buttons, cards and icons are the ported rules:

SketchWaveTriangleCloudSquiggleBoltPaper noise

Check out my lab

Source:src/components/ui/sketch-decoration.tsx

Warming up the lab…

Experiment 1 · Design Rules Handbook

Each rule is not just text — it lives in this page.

Project & Structure

This page is written with this stack:

Next.js 16React 19TypeScriptTailwind v4next-intl 4.x

src/appsrc/componentssrc/i18nmessages/public/references/ separate

Source:docs/decisions/0001-design-foundation.md

Visual Style

The page background, grain and scrollbar are the rule; palette / fonts / strokes below:

Palette

Sky

Sky Tint

Coral

Ochre

Tan

Cocoa

Fonts

Aa 你好Noto Sans SC

Aa 你好Patrick Hand + ZCOOL KuaiLe

Aa 你好JetBrains Mono

Border · Shadow · Radius

Background · Grain · Scrollbar

Source:src/app/globals.cssdocs/decisions/0001-design-foundation.md

Layout & Responsive

Drag the window from narrow to wide — gutters and headings scale continuously, no breakpoint jumps.

--gutter: min(6rem, 2.5vw)--text-hero--text-titleclamp()rem first

Source:src/app/globals.css

Style Organization

globals.css holds only design tokens; component styles live in same-name CSS Modules:

globals.cssbutton.tsxbutton.module.csshero.tsxhero.module.css

/* globals.css — design tokens only */
@theme {
  --color-paper: …;
  --color-ink: …;
  --font-display: "Patrick Hand", "ZCOOL KuaiLe";
}
:root { --gutter: min(6rem, 2.5vw); }

Source:docs/decisions/0001-design-foundation.mdsrc/components/ui/button.tsx

Site Positioning

A personal lab site, not a blog; no degrees, career or titles:

Personal lab siteeevion labNo identity info

Source:docs/decisions/0001-design-foundation.md

i18n · Three languages is a rule

Toggle the language in the nav bar or the page toolbar — this page is the demo.

zh-CN defaulten / zh-TW prefixednext-intlproxy.ts

Source:src/i18n/routing.tsmessages/en.json

Visual Port

Decorations, buttons, cards and icons are the ported rules:

SketchWaveTriangleCloudSquiggleBoltPaper noise

Check out my lab

Source:src/components/ui/sketch-decoration.tsx