PlanetScale
The database for developers who care about scale
5 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
Typography
Inter
Role
SizeWeightHeight
Display
48px700—
Heading
28px600—
Body
16px400—
IBM Plex Mono
Role
SizeWeightHeight
Code
14px400—
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 |
Typography
| Role | Family | Size | Weight |
|---|---|---|---|
| Display | Inter | 48px | 700 |
| Heading | Inter | 28px | 600 |
| Body | Inter | 16px | 400 |
| Code | IBM Plex Mono | 14px | 400 |
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