CURATED · OPEN · FREE

PlanetScale

A high-performance, monospace-centric database infrastructure platform for developers.

devtoolsdatabase

↓ Download design system (7 MB)Open in OpenDesign

Visit: https://planetscale.com

📦 Browse pack contents →

Identity DNA

SpeedReliabilityInfrastructurePerformanceDeveloper-first

A developer tool that feels like a reliable command-line utility for databases.

Color

#F35815Accent

#414141Ink

#FAFAFABG

#737373Muted

rgba(65, 65, 65, 1)Line

High-contrast utility palette with orange accents and monospace typography.

Typography

geometric-sans · monospace

display24px · 600

Monospace font used for all body text and navigation. · Bold weight used for emphasis within text. · Links are colored blue.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Consistent 24px gaps for modular spacing.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid #414141 used for structural elements and grid.

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Single-column content layout with a fixed-width container.

Motion & Interaction

150msmicro

150mssmall

150msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Standard state transitions (hover, focus, active).

Color transitions on interactive elements. · Standard button and link behavior.

Components

button Pill-shaped with solid background colors.
card Grid-based cards for logo display.
chip None
input None
hero Bold headline with a supporting paragraph and logo grid.

Voice & Don'ts

Tone Confident, technical, and direct.
Headlines Bold and declarative.
CTAs Simple and action-oriented (e.g., 'Get in touch').

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.
Avoid: Jargon-heavy explanations without context.
Avoid: Overly casual or playful language.
Avoid: Visual clutter or unnecessary decorative elements.

Inside the pack — real screenshots

PlanetScale — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko