PlanetScale
The database for developers who care about scale
13 colors
16 components
Inter, IBM Plex Mono
Mar 29, 2026
Website Preview
Colors
Primary
#F35815
Orange accent
#000000
Background
#FFFFFF
Primary text
#C4C4C4
Secondary text
#1A1A1A
Cards
Neutral
#000000
Background
#1A1A1A
Card surfaces
#333333
Borders
#888888
Muted text
#C4C4C4
Secondary text
Semantic
#22C55E
Schema deploy success, healthy branch
#EF4444
Deploy failure, schema conflict
#F35815
Pending deploy request (reuses brand)
Typography
Inter
Role
SizeWeightHeight
Display
48px7001.1
Heading
28px6001.2
Body
16px4001.6
Small
14px4001.5
IBM Plex Mono
Role
SizeWeightHeight
Code
14px4001.6
DESIGN.md — PlanetScale
Overview
PlanetScale's design system communicates database reliability through bold black-and-white foundations with a distinctive orange accent. The visual language is authoritative and technical, with a focus on CLI-style interfaces and data-rich dashboards.
Colors
Primary Palette
| Token | Hex | Usage |
|---|---|---|
color-brand | #F35815 | Orange accent |
color-bg | #000000 | Background |
color-text | #FFFFFF | Primary text |
color-muted | #C4C4C4 | Secondary text |
color-surface | #1A1A1A | Cards |
Neutral Palette
| Token | Hex | Usage |
|---|---|---|
color-black | #000000 | Background |
color-gray-900 | #1A1A1A | Card surfaces |
color-gray-700 | #333333 | Borders |
color-gray-400 | #888888 | Muted text |
color-gray-200 | #C4C4C4 | Secondary text |
Semantic Colors
| Token | Hex | Usage |
|---|---|---|
color-success | #22C55E | Schema deploy success, healthy branch |
color-error | #EF4444 | Deploy failure, schema conflict |
color-warning | #F35815 | Pending deploy request (reuses brand) |
Typography
| Role | Family | Size | Weight | Line Height |
|---|---|---|---|---|
| Display | Inter | 48px | 700 | 1.1 |
| Heading | Inter | 28px | 600 | 1.2 |
| Body | Inter | 16px | 400 | 1.6 |
| Small | Inter | 14px | 400 | 1.5 |
| Code | IBM Plex Mono | 14px | 400 | 1.6 |
Spacing
| Token | Value | Usage |
|---|---|---|
space-1 | 4px | Cell padding |
space-2 | 8px | Row spacing |
space-4 | 16px | Panel padding |
space-6 | 24px | Section gaps |
space-8 | 32px | Page sections |
Border Radius
| Token | Value | Usage |
|---|---|---|
radius-sm | 4px | Badges |
radius-md | 6px | Buttons, inputs |
radius-lg | 8px | Cards |
Elevation
| Level | Value | Usage |
|---|---|---|
shadow-sm | 0 1px 3px rgba(0,0,0,0.5) | Cards |
shadow-md | 0 4px 16px rgba(0,0,0,0.6) | Dropdowns |
shadow-lg | 0 8px 32px rgba(0,0,0,0.7) | Modals |
Components
Branch Selector
- Git-like branch model for databases
- Dropdown with branch list
- Create branch button in orange
Schema Viewer
- Table list sidebar
- Column definitions with types
- Relationship diagram view
Deploy Request
- Diff view for schema changes
- Approve / reject actions
- CI-style status checks
Do's and Don'ts
Do
- Use orange for destructive-adjacent actions (deploy, merge)
- Show schema diffs clearly with red/green highlights
- Use monospace for all data-related content
Don't
- Don't use orange for success states
- Don't hide the branch context
- Don't use light mode in database views