# PlanetScale · Design system migration spec

> Source: https://planetscale.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of a developer-focused tool that uses typography and layout to convey technical authority.

## 1. Identity DNA

PlanetScale’s identity is built on the principle of the command-line utility: a tool stripped to its essential function, where performance is not an abstraction but a measurable property. The design system translates the reliability and speed of database infrastructure into a visual language of high-contrast clarity and monospace precision, serving a developer-first ethos.

**One-liner:** A high-performance, monospace-centric database infrastructure platform for developers.
**Keywords:** Speed · Reliability · Infrastructure · Performance · Developer-first
**Analogy:** A developer tool that feels like a reliable command-line utility for databases.

## 2. Color

The palette is a study in high-contrast utility, anchored by a monochrome core of deep ink and light gray. Functional accents in blue and orange are reserved for interactive and call-to-action elements, creating a clear hierarchy of information against a neutral background.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FAFAFA` | main background |
| `--ink` | `#414141` | body text |
| `--muted` | `#737373` | placeholder |
| `--accent` | `#F35815` | single accent |
| `--line` | `rgba(65, 65, 65, 1)` | divider |

**Color principle:** High-contrast utility palette with orange accents and monospace typography.

Every color choice serves a directive purpose, avoiding low-contrast palettes and decorative gradients in favor of immediate legibility.

## 3. Typography

Typography is the system’s primary voice, with monospace fonts for all body text and navigation to evoke a command-line interface. Bold weights provide structural emphasis, while blue designates interactive links, creating a consistent typographic grammar.

- **Display:** geometric-sans
- **Body:** monospace
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 24px | 1.5 | 600 | -0.096px | Main headings |

**Type rules:**
- Monospace font used for all body text and navigation.
- Bold weight used for emphasis within text.
- Links are colored blue.

## 4. Spacing

A consistent 24px modular rhythm provides the architectural spacing for all components, creating predictable gaps and alignment.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 24px gaps for modular spacing.

## 5. Surfaces

Surfaces are defined by structure rather than depth, relying on a consistent 1px solid border in #414141 to delineate grid lines and component edges. The system avoids shadows entirely, favoring flat, grid-based organization.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Borders:** 1px solid #414141 used for structural elements and grid.

## 6. Layout

The foundational layout is a single-column content structure housed within a fixed-width container. This skeleton ensures a focused reading experience and a clean grid for organizing componentry like the logo display cards.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Single-column content layout with a fixed-width container.

## 7. Motion & Interaction

Motion is strictly functional, limited to smooth state transitions for color, background, and border properties on interactive elements. The philosophy is one of immediate feedback and clarity, not decorative animation.

- **Durations:** micro 150ms · small 150ms · medium 150ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Standard state transitions (hover, focus, active).

- **Hover:** Color transitions on interactive elements.
- **Click:** Standard button and link behavior.
- **Transition:** Smooth transitions for color, background, and border properties.
- **Keyboard:** Standard browser focus behavior.

## 8. Voice & Don'ts

The editorial voice is confident, technical, and direct, using bold, declarative headlines and simple, action-oriented calls to action. It communicates with the clarity of a well-documented API.

- **Tone:** Confident, technical, and direct.
- **Headline style:** Bold and declarative.
- **CTA style:** Simple and action-oriented (e.g., 'Get in touch').
- **Avoid:** Jargon-heavy explanations without context. / Overly casual or playful language. / Visual clutter or unnecessary decorative elements.

### Don'ts
- ❌ don't use serif fonts — screenshot shows monospace and sans-serif.
- ❌ don't use soft, rounded corners — screenshot shows pill buttons and sharp grid lines.
- ❌ don't use subtle shadows — screenshot shows flat, border-based surfaces.
- ❌ don't use a muted, low-contrast palette — screenshot shows high-contrast black and white with bold accents.
- ❌ don't use cursive or decorative scripts — screenshot shows strictly functional typography.
- ❌ don't use complex, multi-color gradients — screenshot shows solid background colors.

The system deliberately rejects visual clutter, decorative scripts, and overly casual language to maintain its focus on technical authority.

## System Prompt (paste into AI tool)

```
This is a developer tool SaaS site for PlanetScale, a database infrastructure platform. The design is dominated by monospace typography (ui-monospace), giving it a technical, command-line aesthetic. Key hex colors include #414141 for primary ink, #FAFAFA for background, #0B6EC5 for links, and #F35815 for call-to-action accents. The layout is clean and grid-based, with a clear hierarchy established through font weight and size. Critical don'ts: avoid using serif fonts, avoid soft rounded corners, and avoid low-contrast color palettes. The site prioritizes clarity and readability for a technical audience.
```
