Wake the fleet.
Ship the brand.
The complete source of truth for everything visual and verbal about Wake on WAN — logo, color, type, components, voice, motion, and the rules that keep them coherent at every surface.
The brand, in four words.
Every design decision traces back here. When in doubt, pick the option that reinforces these pillars — and drop anything that dilutes them.
01 · CORE
Engineered, not decorative. Every line has a reason. Round numbers, clean grids, zero ornament.
02 · CORE
Serious without being stiff. We respect the reader's time and don't shout. Dense type, generous whitespace.
03 · CORE
Say what it does, show how it works. No mystery, no marketing fog. If we can't explain it, we redesign it.
04 · CORE
Warm ink on warm paper. Amber signal. Monospace hum. Built to feel like good engineering — not a pitch deck.
One pin. One cable. One job.
A map pin holding an RJ45 Ethernet plug. The cable tapers through the pin's apex in a single chisel — a purpose-built mark for remote power-on.
The mark on a 64-unit grid.
Every curve is deliberate. Here's how it's drawn — so you can scale it, reproduce it, or explain it to a vendor without surprises.
Geometry rules
- Pin silhouette — sits on a
64×64grid. Apex at(32, 61), shoulders at(6, 29)and(58, 29). - Inner circle — radius
17, centered at(32, 26). Contains the plug. - RJ45 plug —
18×16rect,rx 1.2, 5 contacts on a2.8upitch. - Cable — shaft from contacts to
y=36, then straight 4u wide down to the pin apex (y=61), where it meets the silhouette in a single chisel terminator. - Minimum stroke — no stroke <
0.4uat 64-grid; below that, round up.
Give the mark room to breathe.
Clear space equals the height of the RJ45 plug (X = 16u on the base grid, ≈ 25% of the mark's height). Never crowd,
never shrink below 16px.
Do. Don't.
The mark is engineered. Treat it like a tool, not a canvas.
Ink, paper, and one signal.
A tight palette on purpose. Two grounds (light & dark), one brand accent, and a minimal status set. If you reach for a color not on this page, stop and ask why.
Core palette
Neutral & ground
Status
Amber ramp — tints & shades
Two typefaces. No exceptions.
Space Grotesk for everything human-readable. JetBrains Mono for everything machine-readable. Clear roles, no confusion.
Space Grotesk
JetBrains Mono
Type scale
4-point base. 8-point rhythm.
Everything sits on a 4px base grid. Default gaps are multiples of 8. Section padding is 12× or 16×. Predictable, computer-clean.
CONTAINER
Max-width 1280px. 12-column grid inside, 32px gutter. Outer padding 32px (desktop), 20px (mobile).
RADIUS
Default 0px. Sharp corners, always. Only exception: mark geometry (rx 1.2u on RJ45 plug).
BORDER
1px for dividers and cards. 1.5–2px for buttons and outlines. Black ink only — no shadows.
The vocabulary of the product.
Small kit, used everywhere. Buttons, badges, fields, cards, code blocks. If you need something outside this list, design it inside these rules.
Thin line. Square ends.
Custom 24×24 icon system. 1.5px stroke, butt caps, miter joins, no fills. Draws like a schematic, not a sticker.
Fast. Intentional. Never decorative.
Motion communicates state change — never shows off. Three easings cover 99% of transitions. Keep durations under 400ms unless there's a reason.
SHARP
State transitions
For instant, decisive UI — button presses, toggles, tab swaps.
SMOOTH
Content motion
For panels, drawers, and things that enter or leave the viewport.
SPRING
Success moments
Only for "the machine is now awake" moments. Use rarely, like exclamation marks.
Direct. Dry. Rarely cute.
We write like an engineer leaving a good commit message: useful, specific, self-aware. Never corporate, never breathless.
DO WRITE LIKE THIS
DON'T WRITE LIKE THIS
CONCRETE
"642ms" not "lightning fast". Show the number.
ACTIVE
"Wake it." not "It can be woken up."
HONEST
Say "agent" not "AI". Say "database" not "cloud-native."
RESTRAINED
One exclamation mark per week, tops. Emoji only in community.
The system in CSS variables.
Copy-paste ready. Drop into :root and every component
renders on-brand by default.
/* Wake on WAN · Design tokens · v1.0 */ :root { /* ─ Color · surfaces ─ */ --paper: #FAF7F2; --paper-warm: #F2EBDD; --ink: #1C1916; --ink-deep: #0E0C0B; /* ─ Color · brand ─ */ --amber: #F59E0B; --amber-deep: #B45309; --amber-soft: #FCD34D; /* ─ Color · text ─ */ --muted: #6b6054; --muted-soft: #8a7d6b; /* ─ Color · status ─ */ --ok: #10B981; --warn: #F59E0B; --err: #EF4444; /* ─ Lines ─ */ --line: rgba(28,25,22,0.1); --line-dark: rgba(250,247,242,0.1); /* ─ Type ─ */ --font-sans: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ─ Spacing (4px base) ─ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ─ Motion ─ */ --ease-sharp: cubic-bezier(.2, 0, 0, 1); --ease-smooth: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.5, -.2, .3, 1.4); --dur-sharp: 180ms; --dur-smooth: 280ms; --dur-spring: 400ms; /* ─ Shape ─ */ --radius: 0; /* sharp by default */ --border: 1px solid var(--line); }