PlanetScale Design System

Overview

PlanetScale's marketing page is a database product styled like a static-site README. Every text role on the page — H1, H2, body paragraph, nav link, button label, footer fine print, customer-logo caption — sits in the system monospace stack at a single 16px font-size with a 24px line-height. The hierarchy is built from weight alone: weight 400 (102 occurrences) carries body, weight 600 (16 occurrences) carries nav and section labels, weight 700 (6 occurrences) carries the H1. There is no display face, no serif, no sans, no italic, no escalation to 24px or 32px for emphasis. Single-size monospace is the entire typographic identity, and it is the rarest move in database-product marketing — most Vitess and Postgres hosting brands escalate to a heavy sans-serif at 48px+ to signal infrastructure muscle.

The chrome is graphite-on-cream. The canvas is {colors.canvas} ("#fafafa") — barely warmer than pure white, set by the --bg-primary CSS variable. The dominant ink is {colors.ink} ("#414141", graphite), bound to both --text-primary and --border-primary — it lives in 175 text occurrences and 240 border occurrences across the page, doing nearly every label, paragraph, hairline, and cell edge. Pure black {colors.ink-strong} ("#000000") is reserved for the H1 alone; deeper near-black {colors.ink-inverted} ("#111111") sits behind the --bg-inverted variable and surfaces in the footer band only. Where most developer brands ship a 5-step neutral gray ramp and use all of them, PlanetScale collapses neutrals to ink + decoration and lets weight differentiate.

The conversion voltage is {colors.primary} ("#f35815", a saturated orange), and it is the single filled-button color on the page. The "Get in touch" CTA is the only surface painted in orange; every other interactive element is a ghost button bordered in 1px graphite. The brand-identity voltage is {colors.brand-yellow} ("#f2b600", the --yellow-300 token), used exactly once — on a news pill near the hero — and never reused as a section band, chip background, or footer accent. Unlike the convention of pairing a primary CTA color with a secondary tinted hover band, PlanetScale ships the orange as a one-shot signal and trusts the rest of the page to stay monochrome. The radius vocabulary is two values: 0px on every rectangle in the system, 9999px on the one news pill. Sharp corners are the page's geometric default.

Key Characteristics:

• ui-monospace stack across every text role at a single 16px size — weight 400 / 600 / 700 do the entire hierarchy
• Graphite {colors.ink} ("#414141") does both text and border roles via the --text-primary and --border-primary vars
• Off-white {colors.canvas} ("#fafafa") is the only body background — no section-band alternation across the scroll
• Single orange {colors.primary} ("#f35815") on exactly one CTA per surface, with a 1px graphite border underneath the fill
• Single yellow {colors.brand-yellow} ("#f2b600") on exactly one news pill, with no secondary surface ever painted in it
• Two-value radius — {rounded.none} ("0px") on every container, {rounded.full} ("9999px") on the news pill only
• 24px base spacing unit (42 occurrences) anchors gap, padding, and section rhythm across the page

Colors

• Graphite ink (#414141) — frequency 463. Used as text (175), border (240), gradient (48). The brand's load-bearing voltage, bound to both --text-primary and --border-primary — it does paragraphs, labels, nav links, hairlines, table edges, and footer rules. Where most developer brands separate text and border into two distinct grays, PlanetScale collapses them into one graphite token.
• Off-white canvas (#fafafa) — frequency 7. Used as text (4), bg (3). The --bg-primary token — the only body background on the page. Not pure white, not gray — a barely-warmed neutral that registers as paper rather than sterile chrome.
• Quiet blue link (#0b6ec5) — frequency 36. Used as text (36). The --blue-600 / --text-blue token, reserved for inline anchor text. Not used as a button fill, not used as a section band — link voltage only.
• Decoration gray (#c1c1c1) — frequency 21. Used as text (15), border (6). The --gray-300 / --text-decoration token — secondary captions and strong dividers between sections. Sits one step above {colors.hairline} for moments that need slightly more weight.
• Secondary ink (#737373) — frequency 9. Used as text (9). The --gray-550 / --text-secondary token — metadata, timestamps, and footer fine-print rows. Reserved for prose where graphite would feel too heavy.
• H1 black (#000000) — frequency 7. Used as text (7). Bound to the --black / --text-contrast variable. The H1 "The world's fastest and most scalable cloud databases" is the only element painted in pure black; everything else in the prose ladder lives one notch lighter at graphite.
• Orange CTA (#f35815) — frequency 2. Used as bg (1), border (1). The --orange-500 / --text-orange token — the single filled-button color on the page. Reserved for the "Get in touch" conversion target; appears nowhere else in the chrome.
• Yellow news pill (#f2b600) — frequency 1. Used as bg (1). The --yellow-300 token, scoped to one news chip near the hero. The only pill on the page is the only place this hex lives.
• Inverted near-black (#111111) — frequency 3. Used as text (1), bg (2). The --bg-inverted / --gray-900 token — the dark footer band surface. Not pure black; the brand reserves true #000000 for the H1 and uses this slightly lifted near-black for the only dark surface on the page.

The wider semantic ramp (red #d92038, green #13862e, blue #1e9de7, purple #5e49af, postgres-brand #336791) ships in CSS variables but does not render on the marketing surfaces captured. Treat it as a reserve for in-product status states.

Typography

The page uses one font stack: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace. Every text role on the marketing surface is set at 16px with a 24px line-height — there is no display face, no secondary serif, no sans-serif fallback, no escalation to a larger headline size. The hierarchy comes from weight alone:

• Weight 400 (102 occurrences) — {typography.body-md}. Body paragraphs, blockquotes, captions. The dominant tier.
• Weight 600 (16 occurrences) — {typography.nav-link} / {typography.body-emphasis}. Nav links, H2 section labels, buttons, strong inline runs.
• Weight 700 (6 occurrences) — {typography.display-h1}. The H1 only, plus a handful of <strong> runs.
• Weight 500 with -0.096px tracking (1 occurrence each on span and a) — one-off label-tight roles used sparingly.

The button label specifically runs at 16px / weight 600 / 16px line-height (the only place line-height tightens to 1.0 rather than 1.5) — pack the label into a 32px-tall button without vertical drift.

If the system monospace stack isn't available, substitute JetBrains Mono, IBM Plex Mono, or Geist Mono. Preserve the 16px / 24px ratio across every role. Don't substitute a sans-serif — the single-typeface monospace decision is the entire identity.

Layout

The captured screenshot is 1440×4500 — every section sits centered in a roughly 1100px-wide content column on the {colors.canvas} background, with {spacing.lg} (40px) horizontal page padding. Section rhythm is built around {spacing.base} (24px), which appears 42 times in the extracted spacing array as the universal gap value; {spacing.xl} (48px) shows up 3 times as the larger between-section break. Customer-logo cells sit in a 6-column responsive grid with 1px {colors.hairline} ("#e1e1e1") dividers between them. The architecture diagram is a column of bordered rectangles connected by thin vertical lines. Benchmark tables sit as bordered rows with consistent 24px horizontal padding. There is no decorative divider — only thin hairlines and column gaps separate content blocks.

Elevation & Depth

PlanetScale ships zero shadow tokens. The extraction's shadow count is 0 across every color in the palette, and the --tw-shadow variable resolves to a fully transparent value. Depth is communicated entirely via 1px borders: cards are hairline-bordered rectangles flat on the canvas, the architecture diagram is a stack of bordered tiles, the benchmark tables use 1px graphite-tinted row separators. Hairline-as-elevation is the entire vocabulary — no card drops, no glow accents, no soft-shadow ladder. Where most database brands ship a 3-tier shadow ramp for hover / focus / elevation states, PlanetScale ships 1px borders and lets the typography stay flat.

Shapes

The page declares exactly one border-radius value across all 486 scanned elements: 9999px, used on the news pill near the hero. Everything else — buttons, cards, tables, charts, code blocks, footer columns — renders at 0px. The two-value radius vocabulary is the brand's geometric signature: sharp containers + one pill exception. Treat {rounded.md} ("12px") as a fallback for derived UI that genuinely needs a soft-card surface, but don't introduce it on the canonical structures captured here.

Components

• {components.button-primary} — the orange "Get in touch" CTA. 32px tall, 0–8px horizontal padding, 16px button label at weight 600, 1px graphite border underneath the {colors.primary} fill. Reserved for the single conversion target on each surface.
• {components.button-primary-hover} — deepens to {colors.primary-deep} ("#b83a05"). Same 1px graphite border, same geometry.
• {components.button-secondary} — ghost button. Transparent fill, 1px graphite border, graphite ink label at weight 600. Used for "Documentation" and other neutral nav-adjacent links.
• {components.primary-nav} — top bar. 56px tall, 40px horizontal padding, sits flat on the {colors.canvas} background with no bottom border drawn.
• {components.nav-link-inline} — inline nav anchor. Transparent fill, no padding, 16px / weight 600 graphite label.
• {components.news-pill} — the only pill on the page. {colors.brand-yellow} fill, pure-black ink, 16px label, 9999px radius, 24px tall.
• {components.hero-h1} — the single headline element. Pure-black ink ({colors.ink-strong}), 16px / weight 700 — same size as everything else on the page, signaled only by weight. Sits with 16px of left padding from the column edge.
• {components.body-paragraph} — the workhorse prose row. Graphite ink, 16px / weight 400, no padding, no border.
• {components.link-inline} — anchor color {colors.link} ("#0b6ec5"). Used as inline anchor text; never as a button fill.
• {components.customer-logo-cell} — bordered cell on the customer wall. 1px {colors.hairline} divider, 24px padding, monochrome customer mark.
• {components.architecture-tile} — diagram block on the Vitess + Postgres architecture chart. 1px {colors.hairline-strong} border, 16px padding, sharp 0px corners.
• {components.benchmark-row} — table row on the benchmark comparison surfaces. 1px hairline border, 8px / 24px padding.
• {components.chart-container} — wrapper for the latency line chart. Hairline border, 16px padding, flat-on-canvas.
• {components.faq-row} — bordered FAQ row near the footer. 16px vertical padding, no border, sits flat on the canvas with the next row separated by typography rhythm rather than a rule.
• {components.footer-section} — footer band. Graphite ink on {colors.canvas}, 48px vertical padding, no decorative band.
• {components.postgres-mark} — the one place the --text-postgres color ("#336791") renders, on the Postgres wordmark in the architecture diagram.
• {components.code-snippet} — code block with {colors.canvas-secondary} ("#ddf2ff") background and weight-500 monospace ink. The only surface on the page tinted with the blue family.

Do's and Don'ts

• Do keep every text role on the same 16px monospace stack — escalating any headline to 24px or 32px breaks the single-size discipline that is the brand's whole identity.
• Do use {colors.ink} ("#414141") for both text and 1px borders — the brand binds them to one token (--text-primary and --border-primary) and you should too.
• Do reserve {colors.primary} ("#f35815") for exactly one filled button per page surface. Pair it with a {colors.border-primary} 1px outline underneath the fill — the page renders both.
• Do keep {colors.brand-yellow} ("#f2b600") on a single 9999px pill near the hero. The yellow is brand-identity voltage, not a usable palette token.
• Don't introduce a 4px or 8px corner radius on cards — the page's geometric vocabulary is exactly two values (0px and 9999px), and a soft-card 8px corner breaks the README rhythm. If you genuinely need a softer surface, {rounded.md} ("12px") exists as a fallback but doesn't render on any captured component.
• Don't paint a second surface in {colors.primary} ("#f35815"). The orange is a one-shot conversion signal — a second orange button on the same page halves its voltage. Use {components.button-secondary} (ghost-bordered, transparent fill) for any non-primary action.
• Don't add shadow ladders. The extraction shows 0 shadow uses across all 72 color tokens; the --tw-shadow token resolves fully transparent. Depth is communicated by 1px hairlines, not blurred drops.
• Don't substitute {colors.ink} ("#414141") with a generic mid-neutral gray — the specific graphite tone is bound to the brand's CSS variables and harmonizes with the orange CTA. A cooler gray reads as enterprise dashboard; a warmer gray reads as terminal noise.
• Don't use the {colors.brand-yellow} ("#f2b600") as a section band or footer accent. The yellow is scoped to one pill — repeating it on a band miniaturizes the brand's "news today" signal into chrome.
• Don't substitute the monospace stack with a sans-serif for body. The system's restraint is "16px monospace everywhere", and replacing body with Inter or Geist turns it into a generic dev-tools landing immediately.

Known Gaps

• Mobile screenshots not captured — responsive behavior is inferred from desktop evidence; mobile breakpoint padding, hamburger drawer, and benchmark-table reflow are not documented in this spec.
• Hover and focus states are not captured per system policy. {components.button-primary-hover} is derived from the --orange-600 token rather than from a live state extraction.
• In-product PlanetScale dashboard is not documented — the wider semantic ramp (red, green, purple, blue) ships in CSS variables but doesn't render on the marketing surfaces, so dashboard chrome (status pills, alert banners, badge variants) is out of scope.
• Form-input components — the captured page has no text input on the home surface; {colors.canvas-secondary} ("#ddf2ff") is documented as the code-snippet tint but no text-input component is included.
• Vitess and Postgres comparison page — the benchmark surfaces likely share the same chrome but introduce dataset-specific row styles not extracted here.