▸▸ DESIGN SYSTEM · V2.0 · THE INHABITED TERMINAL
Calm surfaces.
One presence.
The complete visual language of ServerAvatar v8, running live on Next.js + shadcn/ui + Tailwind v4. Green is not a color here — it's the avatar. It appears only where the machine acted, acts, or will act for you.
▸▸ 01 · LAWS
Green = presence
The accent appears only where the avatar acts. Maximum one green region per viewport. Presence is scarce or it's noise.
Subtract first
When a layout feels weak: remove, space, or resize. Never add color, icons, or effects. The anti-pattern list is law.
Rows, not card soup
Pages are hairline-divided rows, like a well-set ledger. Cards only where containment means something.
Size contrast is the aesthetic
Huge display type against small dense mono. The middle sizes are where generic design lives.
▸▸ 02 · COLOR — CARBON LADDER + ONE PRESENCE
| token | swatch | value | role |
|---|---|---|---|
| background | #0A0D12 | page · oklch .135 h165 | |
| card | #10141B | surface-1 · elevation = lightness | |
| popover / border | #1C222E | surface-3 · hairlines | |
| foreground | #EDF1F4 | never pure white | |
| muted-foreground | #A3AEBE | carries most reading | |
| primary · ring | #2BE4A0 | the avatar. only where it acts | |
| warn | #E8A33D | only with a state to report | |
| destructive | #E8556A | confirms before it fills |
--primary = presence · --accent = neutral hover wash, never green · --ring = presence · charts near-mono
carbon carries c≈0.008 of the phosphor hue — the world is faintly lit by the avatar
▸▸ 03 · TYPE — THREE FACES, THREE JOBS
Inter 400 — body text. Secondary grey does most of the reading work. Sentence case everywhere: headlines, buttons, navigation. No exclamation marks in product UI.
JetBrains Mono — the avatar's voice, every number, every label · slashed 0 · tabular 0123456789
micro system label — uptime · mumbai-2
▸▸ 04 · SIGNATURE DEVICES
the report — real output as content
Disk on prod-mumbai-2 hit 91%. Cleaned 4.2 GB — now at 62%. Nothing needed from you.
terminal frame — real commands, real timings
✓ live in 41s — https://client-store.in
dotted leaders — the ledger
receipt strip — slashed-zero proof
▸▸ 05 · COMPONENTS — STOCK SHADCN, THEMED BY TOKENS ALONE
buttons — one presence action per view
badges + status
inputs — focus is presence
dialog — the avatar confirms before destructive
tabs + table — mono data, hairlines only, no zebra
| server | stack | sites | disk | status |
|---|---|---|---|---|
| prod-mumbai-2 | nginx · php 8.3 | 14 | 62% | ● healthy |
| client-fleet-1 | ols · wp | 38 | 41% | ● healthy |
| staging-fra | node 22 | 3 | 17% | ● healthy |
▸▸ 06 · VOICE
Outcome first. Past tense. No hype.
✓ Lock down your server in one click.
✓ Deploy site · Connect server · Start free
✓ Live in 41s. Nothing needed from you.
gradients · glass · glow text · purple AI · sparkles · bounce · Title Case · card soup · zebra tables · stock photos · 3D mascots
70/120/200/300ms · enter decelerates, exit accelerates · settle, never bounce
remove the logo — still ours? ship. not sure? subtract.