---
title: "PlanetScale design system"
variant: extended
source: https://planetscale.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/planetscale-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# PlanetScale · Design System

> A precise, text-first interface for database infrastructure.

**Theme:** light · **Industry:** devtools · **Source:** https://planetscale.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

PlanetScale presents database infrastructure through a restrained, text-led page with a prominent customer logo grid and detailed product documentation. Monospace typography, fine dark rules, and a few vivid accents make the long-form content feel technical and navigable.

## North star

Make a long, technical page feel navigable through consistent monospace typography, clear left alignment, and precise hairline structure.

## Overview

The page uses a near-white canvas (#fafafa) throughout, letting compact black and charcoal monospace text carry the identity. Blue links provide the most consistent interactive color; orange marks primary action and occasional emphasis, while yellow is reserved for the full-width announcement strip. The typography is uniformly system monospace, including navigation, paragraphs, buttons, and code-like content, giving the page a deliberately utilitarian, developer-facing voice. A centered content column organizes the long page: introductory copy leads into a tightly ruled customer-logo matrix, then product and performance material and extensive documentation-like sections. Alignment is predominantly left, with headings and body copy following the same text-led rhythm. Spacing is comfortable but the page remains information-dense. Media is largely diagrams, interface captures, and customer marks rather than atmospheric photography. Thin charcoal borders divide cells and outline panels; the overall treatment is flat, with no measured shadows or decorative layering.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cloud Canvas | `#fafafa` | `--color-cloud-canvas` | surface | Near-white page canvas behind the navigation, content, logo grid, and footer. |
| Graphite Rule | `#414141` | `--color-graphite-rule` | neutral | Muted copy, navigation text, card outlines, grid dividers, and dotted section separators. |
| Database Blue | `#0b6ec5` | `--color-database-blue` | brand | Inline links throughout product explanations, feature lists, and resource references. |
| Signal Orange | `#f35815` | `--color-signal-orange` | accent | Filled primary contact button, outlined sandbox action, and occasional heading accent. |
| Terminal Black | `#000000` | `--color-terminal-black` | neutral | Strong headings and selected link or body text against the light canvas. |
| Soft Slate | `#737373` | `--color-soft-slate` | neutral | Low-frequency secondary text, including portions of supporting copy and footer content. |
| Launch Yellow | `#fbca00` | `--color-launch-yellow` | accent | Bright full-width announcement band at the very top of the page. |

### Semantic aliases

`--color-canvas` → `#fafafa` (Cloud Canvas) · `--color-text` → `#000000` (Terminal Black) · `--color-text-muted` → `#414141` (Graphite Rule) · `--color-border` → `#414141` (Graphite Rule) · `--color-accent` → `#0b6ec5` (Database Blue) · `--color-accent-2` → `#f35815` (Signal Orange) · `--color-accent-3` → `#fbca00` (Launch Yellow) · `--color-on-accent` → `#ffffff`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fafafa` | 20.12:1 | AAA |
| `#414141` | `#fafafa` | 9.78:1 | AAA |
| `#0b6ec5` | `#fafafa` | 4.97:1 | AA |

### Gradients

- `repeating-linear-gradient(0deg, rgb(65, 65, 65), rgb(65, 65, 65) 12px, rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 0) 16px), repeating-linear-gradient(90deg, rgb(65, 65, 65), rgb(65, 65, 65) 12px, rgba(0, 0, 0, 0) 12px, rgba(0,`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ui-monospace | `--font-mono` | system | 400, 500, 700, 600 | Shared type system for body copy, headings, navigation, buttons, links, and code-like product content. | Roboto Mono |

- **ui-monospace:** Consistent monospace character; mostly regular-weight text with stronger headings and semibold buttons. Natural case, no measured letter spacing.

### Type scale — Major Third (ratio ≈ 1.25, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 16px | 400 | 1.5 | 0 | — | ui-monospace | Introductory copy, feature explanations, testimonials, and documentation-like content. |
| button | 16px | 600 | 1.5 | 0 | — | ui-monospace | Primary contact and secondary sandbox actions. |
| nav | 16px | 400 | 1.5 | 0 | — | ui-monospace | Main navigation links and account or action links. |
| link | 16px | 400 | 1.5 | 0 | — | ui-monospace | Inline blue references and case-study links. |
| code | 16px | 400 | 1.5 | 0 | — | ui-monospace | Technical terminology and code-like product explanations. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 16, 24, 40, 48 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1088px.

A centered content area uses a measured maximum width of 1088px, with left-aligned text and a comfortable but information-rich rhythm. The page opens with a slim announcement band and compact navigation, then moves directly into a long editorial content column. A five-column customer logo matrix creates the strongest grid moment, with equal cells separated by thin rules. Below it, product tabs, diagrams, performance material, and feature sections follow a consistent vertical sequence. The footer returns to a multi-column link layout. Measured spacing uses an 8px base unit and a 48px section gap.

## Shape & elevation

- Radius: nav `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat, with no measured shadows. Thin charcoal borders define the logo cells, content panels, tabs, and footer link columns. Dotted or dashed rules separate some long-form sections. Use alignment and linework rather than elevation or layered cards to establish hierarchy.

## Imagery

Imagery supports the technical story rather than setting an atmospheric mood. The customer section is a dense grid of third-party logos, each shown within a ruled cell. Lower content uses product interface captures and a schematic database topology diagram, alongside small interface or performance visuals. Keep these assets crisp and legible on the light canvas; avoid large, decorative photography or heavy image treatments.

## Components

### Announcement strip

Full-width yellow band above the navigation, with a centered monospace update and a compact dark call-to-action link.

### Primary navigation

Compact, left-aligned brand and page links with account actions on the right; the sandbox action is orange-outlined and contact is orange-filled.

### Customer logo matrix

Five-column grid of customer marks on the near-white canvas, using thin charcoal borders to separate each cell.

### Product tabs and panel

A bordered product explanation panel begins with a horizontal tab row and continues into copy, a technical diagram, and testimonial text.

### Text feature sections

Long-form performance, uptime, cost, security, and feature content uses left-aligned monospace copy, blue inline links, lists, and dotted dividers.

### Footer link columns

Multi-column navigation groups and compact legal links are organized with thin rules and small monospace text.

### Measured component styles

- **Primary button** (“Get in touch”): background #f35815 · text #ffffff · radius 0px · padding 0px 8px · 600 16px ui-monospace
- **Secondary button** (“View sandbox”): transparent background · text #414141 · border 2px solid #f35815 · radius 0px · padding 0px 8px · 600 16px ui-monospace
- **Link** (“fastest databases”): transparent background · text #0b6ec5 · radius 0px · padding 0px · 400 16px ui-monospace
- **Card**: transparent background · text #414141 · border 1px solid #414141 · radius 0px · padding 0px · 400 16px ui-monospace
- **Navigation item** (“Sign in View sandbox Get in touch Platfo”): transparent background · text #414141 · radius 0px · padding 0px · 400 16px ui-monospace

## Do

- Use ui-monospace consistently across the interface.
- Keep the canvas near-white and the content left-aligned.
- Use blue for inline links and orange for primary actions.
- Separate dense content with thin, deliberate rules.
- Keep customer logos inside a consistent ruled grid.
- Use yellow only for a clear announcement band.

## Don't

- Do not introduce gradients or prominent shadows.
- Do not replace the monospace voice with a mixed display-font system.
- Do not use large decorative photography as the main visual.
- Do not add rounded, elevated card styling.
- Do not use accent colors as broad content backgrounds.
- Do not compress long technical content into an unstructured block.

## Agent prompt

Build a new PlanetScale-style page as a restrained, developer-focused editorial interface. Use a #fafafa Cloud Canvas, #414141 Graphite Rule for copy and fine dividers, #0b6ec5 Database Blue for inline links, and #f35815 Signal Orange for the primary action; reserve #fbca00 Launch Yellow for an announcement strip. Set all interface text in a system monospace family, with clear weight contrast rather than decorative type. Keep content within the measured 1088px maximum width, left-align long-form material, and use a measured 8px spacing base with clear section breaks. Structure dense information into short paragraphs, lists, ruled grids, and bordered technical panels. Prefer crisp customer marks, interface captures, or schematic diagrams to photography. Keep surfaces flat, use thin borders instead of shadows, and make navigation and calls to action easy to scan.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Long-form, left-aligned content in a centered column, including a five-column customer logo grid and technical product panels. | Inline documentation links, Customer proof, Product tabs, Feature lists | Monospace copy, Ruled logo matrix, Technical diagrams, Thin section dividers |
| 2 | footer | Multi-column link groups above compact legal and social links, bounded by thin rules. | Grouped navigation, Legal links, Social destinations | Column headings, Fine borders, Compact monospace text |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/planetscale-com