Design System inspired by PlanetScale

Serverless MySQL. Dark navy, orange accents, terminal-style code blocks.

Usage

npx getdesign@latest add planetscale

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs

Bookmarked

Not an official PlanetScale design system. A curated starting point for building PlanetScale-like UIs with your AI coding agent.

Serverless MySQL. Dark navy, orange accents, terminal-style code blocks.

Preview

planetscale.design.md

Brand System Catalog

DESIGN SYSTEM INSPIRATION OF PLANETSCALE

Serverless MySQL. Dark navy, orange accents, terminal-style code blocks.

Explore the system View tokens

Color Palette

Serverless MySQL. Dark navy, orange accents, terminal-style code blocks.

Primary

PS Orange

#f35815

Brand color

Dark Navy

#0d1117

Brand color

Surface

#161b22

Brand color

Border

#30363d

Brand color

White

#c9d1d9

Brand color

Gray

#8b949e

Brand color

Code BG

#0d1117

Brand color

Accent Yellow

#f0883e

Brand color

Typography

A type system inspired by PlanetScale.

Inter

Inter, Inter

JetBrains Mono

JetBrains Mono, Inter

DISPLAY / 64px / 700 / 1.1

EVERYONE

H1 / 48px / 700 / 1.2

A disciplined editorial voice

H2 / 32px / 600 / 1.3

Section heading

BODY / 16px / 400 / 1.6

Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.

SMALL / 14px / 400 / 1.5

Small

CODE / 14px / 400 / 1.6

Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by PlanetScale.

Not detected on this URL

Components

Other component primitives mapped from the PlanetScale spec.

Not detected on this URL

Design System Inspired by PlanetScale

1. Visual Theme & Atmosphere

Serverless MySQL. Dark navy, orange accents, terminal-style code blocks.

Key Characteristics:

Orange (#F35815) accent on GitHub-dark surfaces

Terminal-style code blocks throughout

Database schema visualization components

Developer documentation aesthetic

GitHub-inspired dark color palette

2. Color Palette & Roles

Primary

PS Orange (#F35815): Brand color
Dark Navy (#0D1117): Brand color
Surface (#161B22): Brand color
Border (#30363D): Brand color
White (#C9D1D9): Brand color
Gray (#8B949E): Brand color
Code BG (#0D1117): Brand color
Accent Yellow (#F0883E): Brand color

3. Typography Rules

Font Family

Display & UI: Inter, JetBrains Mono

Hierarchy

Role	Size	Weight	Line Height
Display	64px	700	1.1
H1	48px	700	1.2
H2	32px	600	1.3
Body	16px	400	1.6
Small	14px	400	1.5
Code	14px	400	1.6

4. Component Stylings

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

5. Layout Principles

Base unit: 4-8px
Max container: 1100-1200px
Consistent section spacing: 80-120px vertical

6. Depth & Elevation

Depth is communicated through background color shifts and subtle shadows or borders.

7. Do's and Don'ts

Do

Follow the established color palette strictly
Maintain typographic hierarchy
Use brand-consistent border-radius

Don't

Introduce off-brand colors
Use inconsistent spacing
Override the established visual language

8. Responsive Behavior

Breakpoint	Width
Mobile	<640px
Tablet	640-1024px
Desktop	>1024px

9. Agent Prompt Guide

Quick Color Reference

PS Orange: #F35815
Dark Navy: #0D1117
Surface: #161B22
Border: #30363D
White: #C9D1D9
Gray: #8B949E

Typography

Font: Inter, JetBrains Mono