white/02
Brand & Design System
VibeKit
A persistent AI agent for every app. Build, deploy, and run real web apps from your phone. This is the visual language behind the product: a dark, glassy developer console, one confident purple, and restraint everywhere else.
01
Color
Dark only. The canvas is near-black and surfaces step up through white-alpha fills rather than new greys. Raw Tailwind greys are banned. There is exactly one accent: VibeKit purple.
Purple ramp — the one accent
Surfaces & ink
black
#09090b
surface
#0e0e13
raised
#17172a
card
#17171f
foreground
#f0f0f3
faint
#c9c9d1
muted
#8b8b95
dim
#6b6b75
White-alpha fills — elevation without a new hue
white/04
white/06
white/08
white/11
white/18
Semantic status — a fixed five
Running · green
Pending · yellow
Error · red
Info · blue
Deploying · orange
02
Typography
Inter carries all UI and body. Permanent Marker is the single expressive touch, reserved for the wordmark and app h1. JetBrains Mono handles keys, URLs, balances, and code. Display type is tight and heavy; body sits at 14px.
Brand wordmark — Permanent Marker
VibeKit
Permanent Marker
wordmark + app h1 only
wordmark + app h1 only
from your pocket
Inter scale
hero · 64 / 800
-0.03em
-0.03em
Ship it from your phone
display · 40 / 800
$19.99 / month
h1 · 32 / 800
Every app gets an agent
h2 · 23 / 600
Bring your own key
title · 18 / 600
Deploys in ~6 seconds
body · 14 / 400
-0.01em
-0.01em
You write the prompt, VibeKit builds, hosts, and heals the app.
eyebrow · 11 / 700
0.08em · upper
0.08em · upper
Health checks every 60s
JetBrains Mono — keys, URLs, data
API key vk_7IZvyEA1Lm0myWPGzZkaOsYh
https://chat-eblei7.vibekit.bot
balance $4.20 · sessions 10/mo
03
Spacing & radii
A 4px rhythm throughout. Rounding is generous: 14px is the default card radius, pills for anything toggled or tagged.
Scale · 4px base
1 · 4px
2 · 8px
3 · 12px
4 · 16px
6 · 24px
8 · 32px
12 · 48px
16 · 64px
20 · 80px
Radii
sm10px
md · button12px
default · card14px
lg16px
xl · login24px
full · pill9999px
04
Elevation & glass
Backgrounds are never flat. A radial depth gradient, soft purple ambient blobs at 5 to 8 percent, and a 3 percent noise overlay sit behind translucent glass cards. Motion is fast and eased, never bouncy in the UI. Hover this card.
Glass card
Translucent fill, hairline border, soft shadow. Hover raises the border and lifts; press scales to 0.98.
Resting
rgba(28,28,40,0.82) with blur(12px) saturate(160%). shadow-card at rest.
Primary glow
Reserved for the one thing that matters on screen. Purple shadow, accent border.
05
Components
The shadcn-derived kit, in the brand. Sentence case labels, purple focus rings, quiet live states.
Button · variants
Sizes
Badge
Running
Building
Error
Info
Pro
API key
Form controls
Auto-heal
Tabs · Progress · Status
Running
Deploying
Stopped
PixelIcon · deterministic per-app identicon
06
Voice & tone
Confident, terse, developer-native, lightly playful. Short declarative sentences that talk to you. Numbers and specifics carry the pitch. Never corporate, never fluffy.
Sentence case, always
Headings, buttons, nav. Only the wordmark and uppercase micro-labels (PRO, API KEY) break it.
Action-first verbs
Deploy, Ship, Build, Host, Heal, Connect, Iterate. A control says exactly what happens.
Concrete beats adjectival
"10 sessions/month", "deploys in ~6s", "health checks every 60 seconds". Specifics do the selling.
No emoji
The closest thing to a mascot is the </> mark and the pixel-art app icons.
Do“Bring your own key.” · “Use API key instead.” · “New here? Use Google, Apple, or GitHub above.”
Don'tCorporate filler, exclamation-heavy hype,
raw Tailwind greys, emoji, a second accent color.