Local workbench — Brand Kit surface

Brand Kit — visualize · create · extract

Brand sheets for the six canonical kits, a form-based kit creator, and a heuristic URL extractor. Everything the creator and extractor produce is a draft proposal held in memory for this session — nothing is written to kits/, kits.css, tokens.css or library.json. Installation into the canonical kit set is a separate gated step (contracts lane / Axel): this page proposes, never installs.

JavaScript is disabled. The six canonical kits' brand sheets are rendered statically below — the visualizer is complete without scripts. The kit picker, the creator, the extractor, draft comparison and export are JavaScript features and are inert in this state. No control on this page performs an action without JavaScript.

Visualizer

Canonical kit (6 available — selection does not claim component verification)

Token source: vault design-systems/axel/kits/ @ cbb3dc7, mirrored via D1 (kits/SOURCE-PIN.json) — read-only here; no palette edits. The brand sheet renders every --kit-* token with its raw value; type specimens use system fallback faces only (kit brand faces are never fetched or rendered). Show all six sheets stacked (the no-JS static default)

Create a draft kit

Pick three seed colors; every other role is derived by rule (the derived keys are recorded in the export's provenance.derived-keys) and stays editable per token. Submitting renders a live draft sheet in the canvas and adds it to the session drafts — a proposal, never an install.

Kit name Mode

surface-base

accent-primary

accent-secondary

Extract from a website

Heuristic, draft-only. Extraction reads the site's meta theme-color, CSS custom properties, stylesheet color frequency, font-family declarations and border-radius values, then maps them onto the --kit-* roles by luminance/saturation rules. It proposes a DRAFT kit with provenance.source = <url> and rights unverified — heuristic extraction; trademark/logo rights not cleared. Logos and trademarks are NOT extracted; brand rights remain with the site owner. Same export/install gate as the creator.

URL (fetched server-side via the loopback extract proxy — the page never contacts the network directly)

Extraction requires the proxy origin — the day-to-day Studio preview server is the extract-proxy: npm run preview (or node site/studio/lib/extract-proxy.mjs) then open http://127.0.0.1:4173/site/studio/brand-kit.html. The page fetches relative /api/brand-kit-extract (connect-src 'self' only — it never contacts the target site itself). A plain static server 404s that endpoint. Paste fallback always works, from any origin including file://.

Paste fallback — no proxy needed

Pasted HTML (optional — meta theme-color, inline <style>) Pasted CSS (stylesheet text)

Session drafts

Drafts live in memory for this session only; two or more render side-by-side in the canvas for comparison. Export downloads a draft envelope (status: draft, rights, the schema-conforming kit payload and the generated [data-kit] CSS) as a local browser download — never a repo write, deploy or send.

No drafts yet — create one above or extract from a website.

Architecture of Destiny — Regal Clarity (shader default)

aod-regal-clarity · mode dark · v1

Canonical kit — byte-pinned vault mirror (kits/SOURCE-PIN.json @ cbb3dc7); read-only, no palette edits.

Color roles

Surfaces

--kit-surface-baseSurface base — page background #140a1f
--kit-surface-sunkenSurface sunken — deepest well #0e091a
--kit-surface-raisedSurface raised — cards #1c1030
--kit-surface-raised-2Surface raised 2 — nested cards #2e1c59
--kit-surface-overlaySurface overlay — popovers #241542

Text

--kit-text-primaryText primary #f4f1ff
--kit-text-secondaryText secondary #b8a3ff
--kit-text-mutedText muted #7d6bb3
--kit-text-inverseText inverse — on accent #0b0c10

Accent

--kit-accent-primaryAccent primary — brand #7b61ff
--kit-accent-primary-hoverAccent primary hover #b8a3ff
--kit-accent-primary-mutedAccent primary muted — wash rgba(123, 97, 255, 0.08)
--kit-accent-textAccent text — on accent #0b0c10
--kit-link-colorLink color #b8a3ff
--kit-accent-secondaryAccent secondary — sparing #d4af37

Borders

--kit-border-subtleBorder subtle rgba(184, 163, 255, 0.18)
--kit-border-defaultBorder default #2e1c59
--kit-border-strongBorder strong rgba(123, 97, 255, 0.65)

Status

--kit-status-successStatus success #4ade80
--kit-status-success-mutedStatus success muted rgba(74, 222, 128, 0.08)
--kit-status-warningStatus warning #d4af37
--kit-status-warning-mutedStatus warning muted rgba(212, 175, 55, 0.08)
--kit-status-errorStatus error #f43f5e
--kit-status-error-mutedStatus error muted rgba(244, 63, 94, 0.08)
--kit-status-infoStatus info #7dd3fc
--kit-status-info-mutedStatus info muted rgba(125, 211, 252, 0.08)

Effects

--kit-glow-primaryGlow primary — box-shadow value 0 0 16px rgba(123, 97, 255, 0.26)

Typography (system fallback faces — kit brand faces are never fetched or rendered)

font-display — headings

The quick brown fox — 0123456789

'Inter', system-ui, sans-serif

font-sans — body

The quick brown fox — 0123456789

'Inter', system-ui, sans-serif

font-mono — code/metrics

The quick brown fox — 0123456789

ui-monospace, monospace

Type scale not declared by this kit — the tokens.css literals apply (--text-hero 32px … --text-xxs 10px).

Radius · spacing · elevation

Radius scale not declared by this kit — the tokens.css literals apply.

Spacing scale not declared by this kit — the tokens.css 4px-base literals apply.

Elevation set not declared by this kit.

Live preview — sample UI in this kit

Mini hero

Ship governed pages faster

Every token on this card comes from the kit wrapper — switch the kit and it re-skins live.

Primary action Secondary Sample link

Card

Surface raised, default border, secondary text, radius + shadow from the kit.

successwarningerrorinfo

Form snippet

Email you@example.com Plan Studio — local fixture Continue

PhoneAgents — Dark Emerald (Dialect B)

phoneagents-emerald · mode dark · v1

Canonical kit — byte-pinned vault mirror (kits/SOURCE-PIN.json @ cbb3dc7); read-only, no palette edits.

Color roles

Surfaces

--kit-surface-baseSurface base — page background #07100d
--kit-surface-sunkenSurface sunken — deepest well #06100c
--kit-surface-raisedSurface raised — cards #0d1a15
--kit-surface-raised-2Surface raised 2 — nested cards #172d25
--kit-surface-overlaySurface overlay — popovers #12231d

Text

--kit-text-primaryText primary #f3f6ef
--kit-text-secondaryText secondary #9fb2a8
--kit-text-mutedText muted #6f8b7e
--kit-text-inverseText inverse — on accent #03130d

Accent

--kit-accent-primaryAccent primary — brand #3ecf8e
--kit-accent-primary-hoverAccent primary hover #5ee3a8
--kit-accent-primary-mutedAccent primary muted — wash rgba(62, 207, 142, 0.08)
--kit-accent-textAccent text — on accent #03130d
--kit-link-colorLink color #3ecf8e
--kit-accent-secondaryAccent secondary — sparing #7dd3fc

Borders

--kit-border-subtleBorder subtle rgba(159, 178, 168, 0.18)
--kit-border-defaultBorder default #254237
--kit-border-strongBorder strong rgba(62, 207, 142, 0.65)

Status

--kit-status-successStatus success #4ade80
--kit-status-success-mutedStatus success muted rgba(74, 222, 128, 0.08)
--kit-status-warningStatus warning #f59e0b
--kit-status-warning-mutedStatus warning muted rgba(245, 158, 11, 0.08)
--kit-status-errorStatus error #f43f5e
--kit-status-error-mutedStatus error muted rgba(244, 63, 94, 0.08)
--kit-status-infoStatus info #7dd3fc
--kit-status-info-mutedStatus info muted rgba(125, 211, 252, 0.08)

Effects

--kit-glow-primaryGlow primary — box-shadow value 0 0 16px rgba(62, 207, 142, 0.26)

Typography (system fallback faces — kit brand faces are never fetched or rendered)

font-display — headings

The quick brown fox — 0123456789

'JetBrains Mono', 'IBM Plex Mono', 'Geist Mono', 'SF Mono', ui-monospace, monospace

font-sans — body

The quick brown fox — 0123456789

'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif

font-mono — code/metrics

The quick brown fox — 0123456789

'JetBrains Mono', 'Geist Mono', 'SF Mono', ui-monospace, monospace

Type scale not declared by this kit — the tokens.css literals apply (--text-hero 32px … --text-xxs 10px).

Radius · spacing · elevation

Radius scale not declared by this kit — the tokens.css literals apply.

Spacing scale not declared by this kit — the tokens.css 4px-base literals apply.

Elevation set not declared by this kit.

Live preview — sample UI in this kit

Mini hero

Ship governed pages faster

Every token on this card comes from the kit wrapper — switch the kit and it re-skins live.

Primary action Secondary Sample link

Card

Surface raised, default border, secondary text, radius + shadow from the kit.

successwarningerrorinfo

Form snippet

Email you@example.com Plan Studio — local fixture Continue

Presentation Dark — Axel (AI With Axel)

presentation-dark-axel · mode dark · v1

Canonical kit — byte-pinned vault mirror (kits/SOURCE-PIN.json @ cbb3dc7); read-only, no palette edits.

Color roles

Surfaces

--kit-surface-baseSurface base — page background #070810
--kit-surface-sunkenSurface sunken — deepest well #04050a
--kit-surface-raisedSurface raised — cards #0f1119
--kit-surface-raised-2Surface raised 2 — nested cards #161a26
--kit-surface-overlaySurface overlay — popovers #13162a

Text

--kit-text-primaryText primary #f4f4f5
--kit-text-secondaryText secondary #a1a1aa
--kit-text-mutedText muted #71717a
--kit-text-inverseText inverse — on accent #0a0a0a

Accent

--kit-accent-primaryAccent primary — brand #ff6b35
--kit-accent-primary-hoverAccent primary hover #ff8c5a
--kit-accent-primary-mutedAccent primary muted — wash rgba(255, 107, 53, 0.08)
--kit-accent-textAccent text — on accent #0a0a0a
--kit-link-colorLink color #ff8c5a
--kit-accent-secondaryAccent secondary — sparing #ffd166

Borders

--kit-border-subtleBorder subtle rgba(164, 168, 190, 0.18)
--kit-border-defaultBorder default #242838
--kit-border-strongBorder strong rgba(255, 107, 53, 0.65)

Status

--kit-status-successStatus success #4ade80
--kit-status-success-mutedStatus success muted rgba(74, 222, 128, 0.08)
--kit-status-warningStatus warning #f59e0b
--kit-status-warning-mutedStatus warning muted rgba(245, 158, 11, 0.08)
--kit-status-errorStatus error #f43f5e
--kit-status-error-mutedStatus error muted rgba(244, 63, 94, 0.08)
--kit-status-infoStatus info #7dd3fc
--kit-status-info-mutedStatus info muted rgba(125, 211, 252, 0.08)

Effects

--kit-glow-primaryGlow primary — box-shadow value 0 0 16px rgba(255, 107, 53, 0.26)

Typography (system fallback faces — kit brand faces are never fetched or rendered)

font-display — headings

The quick brown fox — 0123456789

'Inter', system-ui, sans-serif

font-sans — body

The quick brown fox — 0123456789

'Inter', system-ui, sans-serif

font-mono — code/metrics

The quick brown fox — 0123456789

'JetBrains Mono', ui-monospace, monospace

Type scale not declared by this kit — the tokens.css literals apply (--text-hero 32px … --text-xxs 10px).

Radius · spacing · elevation

Radius scale not declared by this kit — the tokens.css literals apply.

Spacing scale not declared by this kit — the tokens.css 4px-base literals apply.

Elevation set not declared by this kit.

Live preview — sample UI in this kit

Mini hero

Ship governed pages faster

Every token on this card comes from the kit wrapper — switch the kit and it re-skins live.

Primary action Secondary Sample link

Card

Surface raised, default border, secondary text, radius + shadow from the kit.

successwarningerrorinfo

Form snippet

Email you@example.com Plan Studio — local fixture Continue

Restaurant Buddy — Glass Dark

restaurant-buddy-glass-dark · mode dark · v1 · contract 1.1.0

Canonical kit — byte-pinned vault mirror (kits/SOURCE-PIN.json @ cbb3dc7); read-only, no palette edits.

Color roles

Surfaces

--kit-surface-baseSurface base — page background #102222
--kit-surface-sunkenSurface sunken — deepest well #0D1E1E
--kit-surface-raisedSurface raised — cards #152E2E
--kit-surface-raised-2Surface raised 2 — nested cards #1A3535
--kit-surface-overlaySurface overlay — popovers #1D3B3B

Text

--kit-text-primaryText primary #F1F5F9
--kit-text-secondaryText secondary #94A3B8
--kit-text-mutedText muted #8492A6
--kit-text-inverseText inverse — on accent #102222

Accent

--kit-accent-primaryAccent primary — brand #13ECEC
--kit-accent-primary-hoverAccent primary hover #5CF1F1
--kit-accent-primary-mutedAccent primary muted — wash rgba(19,236,236,0.10)
--kit-accent-textAccent text — on accent #102222
--kit-link-colorLink color #13ECEC
--kit-accent-secondaryAccent secondary — sparing #F59E0B

Borders

--kit-border-subtleBorder subtle rgba(255,255,255,0.06)
--kit-border-defaultBorder default rgba(255,255,255,0.10)
--kit-border-strongBorder strong rgba(255,255,255,0.18)

Status

--kit-status-successStatus success #4ADE80
--kit-status-success-mutedStatus success muted rgba(34,197,94,0.12)
--kit-status-warningStatus warning #F59E0B
--kit-status-warning-mutedStatus warning muted rgba(245,158,11,0.12)
--kit-status-errorStatus error #F87171
--kit-status-error-mutedStatus error muted rgba(239,68,68,0.12)
--kit-status-infoStatus info #38BDF8
--kit-status-info-mutedStatus info muted rgba(56,189,248,0.12)

Effects

--kit-glow-primaryGlow primary — box-shadow value 0 0 15px rgba(19,236,236,0.30)

Typography (system fallback faces — kit brand faces are never fetched or rendered)

font-display — headings

The quick brown fox — 0123456789

'Montserrat', ui-sans-serif, system-ui, sans-serif

font-sans — body

The quick brown fox — 0123456789

'Montserrat', ui-sans-serif, system-ui, sans-serif

font-mono — code/metrics

The quick brown fox — 0123456789

'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace

--kit-text-heroAg36px
--kit-text-h1Ag32px
--kit-text-h2Ag24px
--kit-text-h3Ag18px
--kit-text-bodyAg14px
--kit-text-smAg13px
--kit-text-xsAg12px
--kit-text-xxsAg11px

Radius · spacing · elevation

--kit-radius-sm0.3rem
--kit-radius-md0.4rem
--kit-radius-lg0.5rem
--kit-radius-xl0.7rem
--kit-radius-sheet0.9rem
--kit-radius-full9999px

--kit-sp-14px
--kit-sp-28px
--kit-sp-312px
--kit-sp-416px
--kit-sp-520px
--kit-sp-624px
--kit-sp-832px
--kit-sp-1040px
--kit-sp-1248px
--kit-sp-1664px

--kit-shadow-subtle
--kit-shadow-medium
--kit-shadow-prominent

Live preview — sample UI in this kit

Mini hero

Ship governed pages faster

Every token on this card comes from the kit wrapper — switch the kit and it re-skins live.

Primary action Secondary Sample link

Card

Surface raised, default border, secondary text, radius + shadow from the kit.

successwarningerrorinfo

Form snippet

Email you@example.com Plan Studio — local fixture Continue

Restaurant Buddy — Glass Premium (light)

restaurant-buddy-glass-premium · mode light · v2 · contract 1.1.0

Canonical kit — byte-pinned vault mirror (kits/SOURCE-PIN.json @ cbb3dc7); read-only, no palette edits.

Color roles

Surfaces

--kit-surface-baseSurface base — page background #FAFAF9
--kit-surface-sunkenSurface sunken — deepest well #F1F5F9
--kit-surface-raisedSurface raised — cards #FFFFFF
--kit-surface-raised-2Surface raised 2 — nested cards #F8FAFC
--kit-surface-overlaySurface overlay — popovers #FFFFFF

Text

--kit-text-primaryText primary #0F172A
--kit-text-secondaryText secondary #475569
--kit-text-mutedText muted #64748B
--kit-text-inverseText inverse — on accent #FFFFFF

Accent

--kit-accent-primaryAccent primary — brand #0F766E
--kit-accent-primary-hoverAccent primary hover #115E59
--kit-accent-primary-mutedAccent primary muted — wash rgba(13,148,136,0.10)
--kit-accent-textAccent text — on accent #FFFFFF
--kit-link-colorLink color #0F766E
--kit-accent-secondaryAccent secondary — sparing #F59E0B

Borders

--kit-border-subtleBorder subtle #E2E8F0
--kit-border-defaultBorder default #CBD5E1
--kit-border-strongBorder strong #94A3B8

Status

--kit-status-successStatus success #15803D
--kit-status-success-mutedStatus success muted rgba(22,163,74,0.08)
--kit-status-warningStatus warning #B45309
--kit-status-warning-mutedStatus warning muted rgba(245,158,11,0.12)
--kit-status-errorStatus error #B91C1C
--kit-status-error-mutedStatus error muted rgba(220,38,38,0.08)
--kit-status-infoStatus info #1D4ED8
--kit-status-info-mutedStatus info muted rgba(37,99,235,0.08)

Effects

--kit-glow-primaryGlow primary — box-shadow value 0 0 16px rgba(13,148,136,0.18)

Typography (system fallback faces — kit brand faces are never fetched or rendered)

font-display — headings

The quick brown fox — 0123456789

'Montserrat', ui-sans-serif, system-ui, sans-serif

font-sans — body

The quick brown fox — 0123456789

'Montserrat', ui-sans-serif, system-ui, sans-serif

font-mono — code/metrics

The quick brown fox — 0123456789

'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace

--kit-text-heroAg36px
--kit-text-h1Ag32px
--kit-text-h2Ag24px
--kit-text-h3Ag18px
--kit-text-bodyAg14px
--kit-text-smAg13px
--kit-text-xsAg12px
--kit-text-xxsAg11px

Radius · spacing · elevation

--kit-radius-sm0.3rem
--kit-radius-md0.4rem
--kit-radius-lg0.5rem
--kit-radius-xl0.7rem
--kit-radius-sheet0.9rem
--kit-radius-full9999px

--kit-sp-14px
--kit-sp-28px
--kit-sp-312px
--kit-sp-416px
--kit-sp-520px
--kit-sp-624px
--kit-sp-832px
--kit-sp-1040px
--kit-sp-1248px
--kit-sp-1664px

--kit-shadow-subtle
--kit-shadow-medium
--kit-shadow-prominent

Live preview — sample UI in this kit

Mini hero

Ship governed pages faster

Every token on this card comes from the kit wrapper — switch the kit and it re-skins live.

Primary action Secondary Sample link

Card

Surface raised, default border, secondary text, radius + shadow from the kit.

successwarningerrorinfo

Form snippet

Email you@example.com Plan Studio — local fixture Continue

Vibe Sites — Dark Template Marketplace

vibe-sites-dark-template-marketplace · mode dark · v1

Canonical kit — byte-pinned vault mirror (kits/SOURCE-PIN.json @ cbb3dc7); read-only, no palette edits.

Color roles

Surfaces

--kit-surface-baseSurface base — page background oklch(0.119 0.002 286)
--kit-surface-sunkenSurface sunken — deepest well oklch(0.09 0.002 286)
--kit-surface-raisedSurface raised — cards oklch(0.167 0.002 286)
--kit-surface-raised-2Surface raised 2 — nested cards oklch(0.27 0.006 286)
--kit-surface-overlaySurface overlay — popovers oklch(0.228 0.006 286)

Text

--kit-text-primaryText primary oklch(0.985 0 0)
--kit-text-secondaryText secondary oklch(0.707 0.015 286)
--kit-text-mutedText muted oklch(0.55 0.012 286)
--kit-text-inverseText inverse — on accent oklch(0.119 0.002 286)

Accent

--kit-accent-primaryAccent primary — brand oklch(0.488 0.243 264.376)
--kit-accent-primary-hoverAccent primary hover oklch(0.556 0.233 264)
--kit-accent-primary-mutedAccent primary muted — wash rgba(124, 58, 237, 0.10)
--kit-accent-textAccent text — on accent oklch(0.985 0 0)
--kit-link-colorLink color oklch(0.556 0.233 264)
--kit-accent-secondaryAccent secondary — sparing oklch(0.769 0.188 70.08)

Borders

--kit-border-subtleBorder subtle rgba(161, 161, 170, 0.18)
--kit-border-defaultBorder default oklch(0.228 0.006 286)
--kit-border-strongBorder strong oklch(0.41 0.213 283)

Status

--kit-status-successStatus success oklch(0.723 0.219 149.579)
--kit-status-success-mutedStatus success muted rgba(34, 197, 94, 0.08)
--kit-status-warningStatus warning oklch(0.769 0.188 70.08)
--kit-status-warning-mutedStatus warning muted rgba(245, 158, 11, 0.08)
--kit-status-errorStatus error oklch(0.637 0.237 25.331)
--kit-status-error-mutedStatus error muted rgba(239, 68, 68, 0.08)
--kit-status-infoStatus info #7dd3fc
--kit-status-info-mutedStatus info muted rgba(125, 211, 252, 0.08)

Effects

--kit-glow-primaryGlow primary — box-shadow value 0 0 16px rgba(124, 58, 237, 0.26)

Typography (system fallback faces — kit brand faces are never fetched or rendered)

font-display — headings

The quick brown fox — 0123456789

'Geist', 'General Sans', 'Inter', system-ui, sans-serif

font-sans — body

The quick brown fox — 0123456789

'Inter', system-ui, sans-serif

font-mono — code/metrics

The quick brown fox — 0123456789

'Geist Mono', ui-monospace, monospace

Type scale not declared by this kit — the tokens.css literals apply (--text-hero 32px … --text-xxs 10px).

Radius · spacing · elevation

Radius scale not declared by this kit — the tokens.css literals apply.

Spacing scale not declared by this kit — the tokens.css 4px-base literals apply.

Elevation set not declared by this kit.

Live preview — sample UI in this kit

Mini hero

Ship governed pages faster

Every token on this card comes from the kit wrapper — switch the kit and it re-skins live.

Primary action Secondary Sample link

Card

Surface raised, default border, secondary text, radius + shadow from the kit.

successwarningerrorinfo

Form snippet

Email you@example.com Plan Studio — local fixture Continue