Home
DESIGN.mdStar on GitHub
Copied!

PlanetScale

The world's fastest and most scalable cloud databases.

Colors
Brand Accent — Orange
orange-500
#f35815
Primary CTA — one purpose only
orange-400
#fd812d
Hover state
orange-600
#b83a05
Pressed/active
orange-300
#fc9c66
Hover tint
Surfaces — Dark Mode
gray-900
#111111
Primary canvas
gray-850
#1a1a1a
Cards, panels
gray-800
#2b2b2b
Strong surfaces
gray-700
#414141
Default borders
Text
text-primary
#e1e1e1
Body text, labels
text-secondary
#a1a1a1
Captions, metadata
text-disabled
#616161
Disabled text
text-orange
#f35815
Accent text
Semantic Status
blue-500
#1e9de7
Focus rings, info
green-500
#27b648
Success
red-400
#ff7082
Error (dark mode)
yellow-300
#f2b600
Warning
Typography — Monospace body, Sans headings
text-[32px] Serverless Database Platform
32px600Sans
text-2xl Connect, query, and scale your database
24px600−0.019em
text-lg Deploy schema changes with branching workflows.
18px400Mono
text-base Default body text for the dashboard and documentation. Monospace substrate communicates authenticity.
16px4001.5 lh
text-sm Secondary text, table cells, navigation items
14px400/500−0.006em
text-xs BRANCHES · DEPLOYMENTS · INSIGHTS
12px500Labels
Components
Buttons
Inputs
Badges
Default Live Error Warning Info Brand
Card
main
Production branch · 3 open deploy requests · Last deployed 2 hours ago
Live
Spacing — 8px base unit (spacing-1 = 8px)
Guardrails

DO

Use #f35815 (orange-500) for one thing: primary CTAs and active states. Don't dilute it.
Keep button labels short — maximum 3 words: "Get started", "Deploy", "Connect".
Use monospace for code, data, branch names, and keys — the font stack communicates precision.
Communicate status exclusively with the status palette: green = live, red = error, yellow = warning.
Use border-primary (#414141) borders to define structure — 1px border beats a shadow every time.
Default to dark mode in any embedded widget, screenshot, or code example.

DON'T

Don't use orange for more than one thing — mixing it into status or decorative elements destroys its signal value.
Don't use font-weight: 700 — semibold (600) is the maximum per brand guidelines.
Don't round corners beyond 4px in the product UI — 8px+ reads as consumer-app softness.
Don't use shadow-heavy elevation — express it through the #111111 → #1a1a1a background step.
Don't fake the monospace aesthetic — use the actual system monospace stack, not letter-spacing hacks.
Don't use purple outside Postgres-specific contexts — it's a semantic differentiator for PostgreSQL.