00 · Living specSOURCE OF TRUTH

showcase.
every primitive · every state.

This page is the system. If a component looks wrong here, the system is wrong. See docs/DESIGN_GUIDE.md for the constitution. Three dials govern every composition; the rules below translate them into mechanics.

01§CALIBRATION

taste calibration · the three dials

Every layout, transition, and spacing decision derives from three numeric dials. They are set once for the whole site so output stays coherent — not chosen per-component. If a pattern reads wrong on the page, the dial is right and the pattern is wrong.

DESIGN_VARIANCE7 / 10

1 · symmetry / 10 · chaos

Off-center heroes and fractional grids by default. Centered hero text is banned above md.

MOTION_INTENSITY3 / 10

1 · static / 10 · cinematic

Hover and focus only. CSS transitions, no spring physics, no scroll choreography.

VISUAL_DENSITY6 / 10

1 · gallery / 10 · cockpit

Tight rows for data, generous headroom for headlines. Cards avoided when divide-y will do.

02§COLOR

color · japanese washi

Two-tone palette. Hue locked to 85° (warm yellow undertone). Chroma stays ≤ 0.005. White reads as washi paper, never pure. Black reads as soft warm ink. Status accents are reserved for semantics — never decoration.

LIGHT · DEFAULT

backgroundoklch(0.980 0.003 85)

foregroundoklch(0.160 0.004 85)

cardoklch(0.992 0.002 85)

mutedoklch(0.965 0.003 85)

muted-foregroundoklch(0.450 0.005 85)

borderoklch(0.900 0.005 85)

primaryoklch(0.160 0.004 85)

destructiveoklch(0.530 0.180 27)

DARK · WARM-TINTED VERCEL

backgroundoklch(0.100 0.003 85)

foregroundoklch(0.960 0.003 85)

cardoklch(0.135 0.004 85)

mutedoklch(0.180 0.004 85)

muted-foregroundoklch(0.650 0.005 85)

borderoklch(0.220 0.005 85)

primaryoklch(0.960 0.003 85)

destructiveoklch(0.620 0.200 25)

STATUS ACCENTS · NARROW USE

info--accent-blue

ok--accent-green

warn--accent-amber

ai--accent-violet

Allowed as 1.5 px dots, 1 px hairlines, or single glyphs. Never as headline gradient ends, body type color, or chart series.

03§TYPE

typography · geist mono + fluid clamp

Two families: Geist Sans (dashboard prose) and Geist Mono (default for everything inside the marketing route). Display tier uses clamp() so headlines stay readable on phones without breaking the 8 px grid.

display · clamp(48 → 88) / 1.0 / -0.04em

one key

h1 · clamp(32 → 56) / 1.05 / -0.03em

slide title here

h2 · clamp(24 → 36) / 1.1 / -0.025em

section heading

h3 · 24 / 1.2 / -0.015em

card title

body · 16 / 1.5

Built for speed — responses pass through in milliseconds.

body-sm · 14 / 1.5

Drop-in proxy for OpenAI and Anthropic. Per-project keys. Atomic budget deduction.

mono · 14 / 1.5 (numerics tabular)

12.4 ms · 184 tokens · $0.00021 · 100.00 %

meta · 11 / 0.18em / UPPERCASE

STATUS · OPERATIONAL · 03 / 06

eyebrow · 10 / 0.2em / UPPERCASE

§ MIGRATION · OPENAI → SYNAPSE GARDEN

04§SPACING

spacing · 8px grid

Everything aligns to 8 px. Allowed values: 4 8 12 16 24 32 48 64 96 128 192. --grid-size: 8px is exposed so dot/line backgrounds align with content automatically.

05§SHADOW

shadow · hairline offset

Two shadow vocabularies. Hard-offset (default) for everyday elevation. Halftone density-gradient (sparing) for hero cards and primary CTAs. Both are blur-free; elevation = longer offset, never softer blur.

shadow.schematic

schematic

1px hairline · default

shadow.schematic-strong

schematic-strong

2px foreground · hover

shadow.dither

dither

halftone · density gradient

shadow.dither-strong

dither-strong

halftone · showcase only

06§MOTION

motion · restrained · ease-schematic

MOTION_INTENSITY is 3. Hover and focus only. Three named easings cover everything. Animate transform and opacity exclusively — never width, height, top, or left.

--ease-schematic

cubic-bezier(0.32, 0.72, 0, 1)

default · all hover/focus state

--ease-out-schematic

cubic-bezier(0.16, 1, 0.3, 1)

enter · panel reveal, modal in

--ease-in-schematic

cubic-bezier(0.7, 0, 0.84, 0)

exit · modal close, dismiss

HOVER · CARD LIFT · -1PX TRANSLATE + STRONG SHADOW

Hover me

Border darkens, shadow doubles, body lifts 1 px.

And me

Same transition curve, same offset.

And me

150 ms · cubic-bezier(0.32, 0.72, 0, 1).

07§HEADLINES

headlines · eyebrow + asymmetric

Every section heading gets an eyebrow tag above it. The eyebrow lets the heading drop off-center without losing hierarchy. Centered hero text on a giant image is banned.

§ 03 · MIGRATION

drop-in replacement for openai.

Swap the base URL, ship the diff, keep the SDK. Per-key budgets stop the bill before it starts.

07A · asymmetric · eyebrow first

DON'T

Welcome to Synapse Garden!

Elevate your team with seamless, next-gen AI infrastructure.

centered hero · ai-tell copy · banned

08§BUTTON

button · 7 variants × 5 sizes

VARIANTS

SIZES

STATES

09§INPUT

input · text controls

TEXT INPUT

PROJECT NAME

API KEY · DISABLED

REQUIRED FIELD

TEXTAREA · SELECT

DESCRIPTION

DEFAULT MODEL

10§CONTROLS

controls · checkbox · radio · switch · progress

CHECKBOX · SQUARE

log token counts

log full prompt + completion (v2 opt-in)

enable byok (coming · disabled)

RADIO · ROUND (SEMANTIC EXCEPTION)

bill in usd · default

bill in eur · supported via dodo

bill in gbp · coming

SWITCH · PHYSICAL TOGGLE EXCEPTION

auto-rotate keys every 90 days

send overage warnings at 75 %

pause project (org-admin only)

PROGRESS · HAIRLINE BAR

CHAT-PROD$84.20 / $200.00 · 42 %

SEARCH-DEV$176.40 / $200.00 · 88 %

LEGACY-INTERNAL$200.00 / $200.00 · 100 %

11§CARD

card · default · schematic · flat

Default

Hairline border · radius 0 · no shadow.

Foundational card. Stays unobtrusive — composes with anything.

Schematic

Resting offset shadow · hover lifts 1 px · border darkens.

Use when the card is clickable or the surface needs presence.

C · Marketing

schematic card primitive

With corner brackets, top-right meta label, and a bottom caption — the recurring marketing card pattern.

synapse garden · v0.1

STAT GRID · GAPLESS · HAIRLINE DIVIDERS

12.4ms

P50 OVERHEAD

184models

VIA GATEWAY

99.42%

KEY CACHE HIT

$0.00021

AVG / REQUEST

12§BADGE

badge · meta tags

DefaultSecondaryOutlineMetaGhostDestructiveLink

STATUS:OPERATIONAL12 EVENTSSUPABASE · US-EAST-1LIVE · 1.2K RPS

13§ALERT

alert · the four states

info · key cache warm

99.42 % hits over the last 7 days. Hot path stays inside its 12 ms budget.

ok · subscription healthy

Dodo subscription sub_4Hf2… renewed. Next invoice runs on the 1st.

warn · approaching budget

search-dev is at 88 % of its monthly cap. Bump the limit or split the project before requests start failing.

error · upstream timeout

Vercel AI Gateway returned 504 on 2 % of requests in the last 5 minutes. Retries already succeeded.

14§TABS

tabs · code surface

QUICKSTART · TYPESCRIPT

# ai-sdk · openai-compatible
$ import { generateText } from 'ai'
$ 
$ const { text } = await generateText({
$   model: 'openai/gpt-5.4',
$   baseURL: 'https://synapse.garden/api/v1',
$   prompt: 'why is the sky blue?',
$ })
→ 200 OK · 184 ms · 12 tokens · $0.00021

15§TABLE

table · spec sheet · tabular numerics

For dense numeric data, prefer a flat <table> over a card grid. Every digit aligns. Hairline rules between rows.

Spec — proxy hot-path metrics · last 24 h
Metric	Value	Window	Status
P50 latency overhead	12.4 ms	vs. vercel direct	ok
P95 latency overhead	39.1 ms	target < 50 ms	ok
Key cache hit rate	99.42 %	rolling 7d · upstash	ok
Daily request count	4,182,600	rolling 24h	ok
Monthly margin (10%)	$ 8,417.22	month-to-date	ok

16§PRIMITIVES

marketing primitives

DOT GRID

BG-DOT-GRID

GRID LINES + CROSSHAIRS

SCHEMATIC FRAME

TICK MARKS

ASCII CONNECTOR · ARCHITECTURE FLOW

CLIENT PROXY GATEWAY PROVIDER

MARQUEE

openai/gpt-5.4anthropic/claude-opus-4-7openai/gpt-5.4-minianthropic/claude-sonnet-4-6google/gemini-2.5-prodeepseek/v3mistral/large-3meta/llama-4-405b

META LABEL · EYEBROW

NO BRACKETSBRACKETED03 / 06FOREGROUND§ EYEBROW · WIDER TRACKING

TOOLTIP · HAIRLINE

17§PATTERNS

patterns · the vocabulary in one frame

How the primitives compose. Eyebrow + asymmetric headline + schematic frame + ascii flow + tabular stat. Every page section should feel familiar from this composition.

17A · composition

STATUS · OPERATIONAL

§ THE VOCABULARY

one key · every llm.

100%

OWNED · NO LIBRARIES

18§ANTISLOP

anti-slop · forbidden patterns

The patterns that make AI-generated UI identifiable on sight. Banned without exception.

Inter / Roboto / Helvetica

Default-LLM type. We use Geist Sans + Mono only.

Pure #FFF / #000

Palette is washi · warm-soft-black. Always tokens.

Glow shadows · gradient text

Elevation = longer hard offset, never softer blur.

Rounded corners on rectangles

--radius: 0. Round only for physical affordances.

3-equal-card horizontal grids

Replaced by 2fr / 1fr or spec-sheet rows.

Centered hero text on giant image

Use eyebrow + asymmetric heading instead.

John Doe · Acme · 99.99 %

Believable, organic data only.

“Elevate · Seamless · Unleash”

Concrete verbs. Sentence case. Technical voice.

Custom cursors · parallax tilt

MOTION_INTENSITY is 3. Not in this system.

showcase.every primitive · every state.

Welcome to Synapse Garden!

schematic card primitive

one key · every llm.

showcase.
every primitive · every state.