---
version: alpha
name: PlanetScale
description: Engineering-first database platform — near-white canvas with charcoal monospaced headlines, a single fire-orange CTA, and Inter body text. Technically precise, with a subtle warmth that says "built by engineers, for engineers."

colors:
  # Canvas + surface
  background: "#fafafa"
  surface: "#ffffff"
  surface-alt: "#f5f5f5"         # was rgba(0,0,0,0.03) — flattened over white

  # Ink / text
  ink: "#111111"                  # manifest background_color — deepest text
  ink-body: "#414141"             # primary text, nav links, body copy (highest count)
  ink-secondary: "#737373"        # secondary body, captions
  ink-muted: "#c1c1c1"            # disabled, placeholder

  # Brand accent — Fire Orange
  primary: "#f35815"              # CTA orange ("Get in touch"), link hover states
  primary-dark: "#cf4b12"         # hover state for orange CTAs

  # Technical / reference colors
  postgres-blue: "#336791"        # --text-postgres — Postgres brand color
  text-blue: "#0b6ec5"            # --text-blue — links, inline technical refs
  text-red: "#d92038"             # --text-red — error, destructive actions
  text-purple: "#5e49af"          # --text-purple — Vitess brand color
  text-green: "#13862e"           # --text-green — success states

  # Accent fills (reference bar / banners)
  accent-purple: "#a18bf5"        # --bg-purple
  accent-purple-soft: "#b7a5fb"   # --bg-purple-secondary
  accent-purple-pale: "#d4c9fe"   # --bg-purple-tertiary

  # Interactive
  focus-ring: "#1e9de7"           # --tw-ring-color, was rgba(30,157,231,0.5) — flattened over white

  # Borders
  border: "#e5e7eb"               # light border on cards, dividers
  border-strong: "#d1d5db"        # stronger separators

  # On-color
  on-primary: "#ffffff"           # text on orange CTAs
  on-ink: "#ffffff"               # text on dark fills

  # Shadow tints
  shadow-soft: "#e8e8e8"          # was rgba(0,0,0,0.06) — flattened over white

typography:
  display-hero:
    fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.5px
  display:
    fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.3px
  heading-section:
    fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.2px
  heading-sub:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: -0.1px
  body-large:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-semibold:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.50
    letterSpacing: -0.10px
  nav-link:
    fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -0.10px
  button-ui:
    fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  code:
    fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.60
    letterSpacing: -0.10px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 80px

rounded:
  none: 0px
  sm: 4px
  md: 6px
  lg: 8px
  xl: 12px
  pill: 9999px

components:
  # Primary fire-orange CTA
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 8px 16px
    transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)"
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 8px 16px

  # Secondary ghost-style button
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-body}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 8px 16px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 8px 16px
    borderColor: "{colors.border-strong}"

  # Dark filled CTA ("Get started")
  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 8px 16px
  button-dark-hover:
    backgroundColor: "{colors.ink-body}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 8px 16px

  # Card
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    padding: 24px
    borderColor: "{colors.border}"
  card-hover:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    padding: 24px
    borderColor: "{colors.border-strong}"

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-body}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 10px 14px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-body}"
    borderColor: "{colors.focus-ring}"

  # Badge / tag
  badge:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.ink-body}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-orange:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  # Navigation
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-body}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  # Announcement banner (top bar)
  banner:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption}"
    padding: 8px 16px

  # Inline code reference
  code-inline:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.ink-body}"
    typography: "{typography.code}"
    rounded: "{rounded.sm}"
    padding: 2px 6px
---

# PlanetScale Design System

## Overview

PlanetScale's website achieves something rare in the database infrastructure space: an engineering-first platform that feels genuinely designed, not just documented. The canvas opens at a near-white `{colors.background}` — just off pure white, a warmth that reads as precision rather than sterility. The primary text, `{colors.ink-body}`, is a charcoal rather than a deep black, creating a reading experience that's serious without being heavy. Every typographic decision reinforces the engineering voice. Headlines are set in a system monospace font, connecting the marketing surface to the terminal where PlanetScale actually lives.

The defining tension is between the near-colorless canvas and the single fire-orange (`{colors.primary}`) CTA. PlanetScale uses orange the way a circuit board uses a fuse — every other element is neutral and functional, so when the orange fires, it carries its full voltage. "Get in touch" and "Learn more" calls-to-action snap into focus against the achromatic backdrop. On hover, navigation links shift to this same orange, a subtle reminder that interaction is a signal, not just a state. The announcement banner at the top of the page inverts to the deepest ink (`{colors.ink}`), creating a narrow horizon line that anchors the full-width composition.

The typographic system is deliberate in its duality. Display text and navigation are set in system monospace, giving the brand an authentic terminal register — not synthetic, not a custom typeface, literally the same family your IDE uses. Body copy switches to Inter, ensuring readable prose in feature descriptions and documentation summaries. This split communicates: "our marketing is honest, we're not performing developer-ness, we are it." Technical references carry their own color vocabulary: Postgres blue (`{colors.postgres-blue}`), Vitess purple (`{colors.text-purple}`), and a reference blue (`{colors.text-blue}`) for links — a nod to the multi-engine platform beneath the surface.

**Key Characteristics:**
- Near-white canvas (`{colors.background}`) with charcoal text (`{colors.ink-body}`) — warmth without softness
- System monospace (`{typography.display-hero}`) for all display text and navigation — authentic terminal register
- Inter for body copy — prose legibility separate from technical identity
- Single fire-orange accent (`{colors.primary}`) for all CTAs — maximum contrast in an otherwise achromatic palette
- Orange hover state on navigation links — interaction as signal
- Full-width dark announcement banner (`{colors.ink}`) as a top anchoring device
- Technical color vocabulary: Postgres blue, Vitess purple, reference blue for engine-specific context
- Clean border-radius system: mostly square-ish (`{rounded.lg}` 8px) with pill badges
- Standard 8px spacing grid, generous section padding (`{spacing.3xl}`+)
- Flat elevation — no shadows, depth comes from borders and surface contrast
- No decorative gradients — every color change has semantic purpose
- Customer logo wall in full brand color — confidence in the platform's prestigious user base

## Colors

### Canvas & Surfaces
- **Near White** (`{colors.background}`): The primary canvas — slightly off-white, warmer than pure white. The site breathes here.
- **Pure White** (`{colors.surface}`): Card surfaces, inputs, raised elements.
- **Soft White** (`{colors.surface-alt}`): Subtle surface tint for alternating sections, code chips, hover fills.

### Ink / Text
- **Deep Ink** (`{colors.ink}`): Deepest text — page title-level headlines, the dark CTA fill. From the app manifest background.
- **Charcoal** (`{colors.ink-body}`): Primary body text, navigation links, all workhorse copy (highest frequency in extraction).
- **Mid Gray** (`{colors.ink-secondary}`): Secondary copy, metadata, supporting text.
- **Light Gray** (`{colors.ink-muted}`): Disabled states, placeholder text, subdued captions.

### Brand Accent
- **Fire Orange** (`{colors.primary}`): The one live wire — every primary CTA, link hover state. Concentrated for maximum contrast.
- **Deep Orange** (`{colors.primary-dark}`): Hover and active state for orange buttons.

### Technical Reference Colors
These colors are semantic — they identify specific technologies, not generic states:
- **Postgres Blue** (`{colors.postgres-blue}`): PostgreSQL engine references.
- **Reference Blue** (`{colors.text-blue}`): Inline technical links, documentation references.
- **Error Red** (`{colors.text-red}`): Destructive actions, error states.
- **Vitess Purple** (`{colors.text-purple}`): Vitess engine references.
- **Success Green** (`{colors.text-green}`): Confirmation, success, health states.

### Accent Fills (Banners & Promotional)
Purple gradient family (`{colors.accent-purple}`, `{colors.accent-purple-soft}`, `{colors.accent-purple-pale}`) for promotional banners and announcement bars — not a primary UI color.

### Interactive
- **Focus Ring** (`{colors.focus-ring}`): The Tailwind ring utility color — electric blue for keyboard focus indication.

### Borders & Depth
- **Light Border** (`{colors.border}`): Card edges, section dividers.
- **Strong Border** (`{colors.border-strong}`): Input outlines, active separators.
- **Shadow Soft** (`{colors.shadow-soft}`): Barely-visible ambient lift (rgba flattened) — used sparingly.

## Typography

### Font Family
- **Display / Navigation**: `ui-monospace`, falling back through `SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace`. No custom font loaded — this is the native system monospace on every OS.
- **Body / Prose**: `Inter`, falling back through `ui-sans-serif, system-ui, -apple-system, sans-serif`.
- **No custom typeface**: The choice to use system fonts is itself the statement. PlanetScale doesn't need a custom wordmark typeface; they use the same font your terminal uses.

### Hierarchy

The full type scale lives in the `typography:` token block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 48px monospace — billboard hero headline ("The world's fastest and most scalable cloud databases") |
| `display` | 36px monospace — major section headers |
| `heading-section` | 28px monospace — feature section titles |
| `heading-sub` | 20px Inter — sub-section titles, card headings |
| `body-large` | 18px Inter — lead paragraphs, hero subtext |
| `body` | 16px Inter — standard reading copy, feature descriptions |
| `body-semibold` | 16px Inter 600 — emphasized inline text, labels |
| `nav-link` | 16px monospace — navigation items |
| `button-ui` | 16px monospace 600 — button text across all variants |
| `caption` | 14px Inter — metadata, tags, supporting details |
| `code` | 14px monospace — inline code references, snippet labels |

### Principles
- **Monospace for identity**: Headlines and buttons are in the same font as the product itself. Marketing and product share a typeface family.
- **Inter for readability**: Body prose switches to a humanist sans. Engineers can read, too.
- **Light negative tracking at display**: Modest negative tracking (-0.5px at 48px) keeps headlines compact without over-compression.
- **Size signals context, not weight**: The system doesn't rely on heavyweight (700+) for display; 600 provides enough hierarchy on a light canvas.
- **Functional weight scale**: 400 for reading, 500 for navigation, 600 for headings and button labels.

## Layout

### Spacing System
The full spacing scale lives in the `spacing:` token block above. Base unit: 8px.

Generous vertical rhythm between sections (`{spacing.3xl}` to `{spacing.4xl}`) lets each feature group breathe independently. Component internals are compact at `{spacing.md}` (16px), preserving the technical density of an engineering platform.

### Grid & Container
- Max content width: ~1280px, centered
- Hero: centered single-column with large monospace headline above a two-column CTA pair
- Feature sections: alternating full-width bands with contained content columns
- Customer logo wall: multi-row CSS grid with brand-colored logos at full saturation

### Whitespace Philosophy
- **Precision, not luxury**: Whitespace here signals confidence in the technical content, not aspirational lifestyle branding.
- **Section bands**: Full-width colored bands (`{colors.surface-alt}`) create rhythmic separation without borders.
- **Logo wall breathing room**: Equal padding and grid gaps in the customer wall communicate parity across customers.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Most content — sections, text blocks |
| Surface (Level 1) | `{colors.border}` 1px hairline | Cards, inputs, list items — structural separation |
| Raised (Level 2) | `{colors.border-strong}` + `{colors.shadow-soft}` | Hover states, focused containers |
| Focus | `2px solid {colors.focus-ring}` | Keyboard focus on all interactive elements |

**Shadow Philosophy**: PlanetScale is essentially shadowless. The platform is flat and structural — depth comes from border contrast and surface color steps, not cast shadows. This is appropriate to a database infrastructure product: you don't want ambient depth in a CLI, you want clear signal vs. noise. The one visual flourish is the dark top banner, which acts as a weight anchor without a shadow at all.

## Shapes

The full radius scale lives in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved — rarely used explicitly |
| `sm` | 4px | Inline code chips, small visual accents |
| `md` | 6px | Buttons — the primary interactive radius |
| `lg` | 8px | Cards, inputs, modal containers |
| `xl` | 12px | Feature cards, larger surfaces |
| `pill` | 9999px | Badges, announcement pills, small tags |

PlanetScale skews toward the sharp end: buttons at 6px, cards at 8–12px. The system avoids large radii on buttons (no pill buttons in primary UI) — a technical brand with terminal DNA leans rectangular.

## Components

The full component spec lives in the `components:` token block above. Reference component tokens directly.

### Buttons
- **`button-primary`** — Fire orange (`{colors.primary}`), white text, monospace 600, 6px radius. The single CTA color across the entire site.
- **`button-primary-hover`** — Deepens to `{colors.primary-dark}` on hover, same shape.
- **`button-secondary`** — White surface, charcoal text, `{colors.border-strong}` border. Ghost-style against the near-white canvas.
- **`button-dark`** — Deep ink (`{colors.ink}`) fill, white text. The "Get started" / primary action in the nav bar.

### Cards
- **`card`** — White surface, `{rounded.xl}` radius, `{colors.border}` hairline. Most feature content lives here.
- **`card-hover`** — Border strengthens to `{colors.border-strong}` on hover. No scale or shadow — clean and flat.

### Inputs
- **`input`** — White surface, `{colors.border-strong}` outline, 8px radius. Focus state adds `{colors.focus-ring}` border.

### Badges & Tags
- **`badge`** — Soft white fill, charcoal text, pill radius. Generic category labels.
- **`badge-orange`** — Orange fill, white text, pill shape. Announcement and feature highlight badges.

### Navigation
- **`nav-bar`** — Near-white sticky header. Monospace links in charcoal; dark "Get started" pill right-aligned. Navigation links shift to `{colors.primary}` on hover — the orange bleeds up from CTAs.

### Banner
- **`banner`** — Full-width deep ink (`{colors.ink}`) bar at the very top. White body text, orange highlight text within. The horizon line of the page.

### Code
- **`code-inline`** — Soft white chip, charcoal monospace. Inline database-name and CLI references.

## Do's and Don'ts

### Do
- Keep the canvas at `{colors.background}` (#fafafa) — the near-white warmth is intentional, pure white reads as blank
- Use `{colors.primary}` (fire orange) for exactly one CTA per viewport — its power comes from scarcity
- Set all display and navigation text in system monospace (`{typography.display-hero}`) — the font is the engineering identity
- Switch to Inter (`{typography.body}`) for all prose over 3 lines — readability requires a humanist sans
- Reference Postgres, Vitess, and technical engines by their semantic color (`{colors.postgres-blue}`, `{colors.text-purple}`) — technology has identity
- Use the dark `{colors.ink}` banner for announcements — its full-width inversion creates hierarchy without a shadow system
- Keep cards flat with hairline borders (`{colors.border}`) — flat surfaces match the engineering mental model
- Reserve gradients for accent-purple banners (`{colors.accent-purple}`) — they're promotional, not structural

### Don't
- Don't make buttons pill-shaped — the system uses 6–8px radius; full pills belong on badges only
- Don't introduce warm or decorative colors beyond the orange/technical-reference vocabulary
- Don't use a custom typeface — the system monospace IS the brand typographic identity
- Don't apply shadows to cards or sections; the flat border system is the design
- Don't spread orange beyond CTAs and hover states — its voltage comes from being the only warm color on a cold canvas
- Don't use `{colors.postgres-blue}` or `{colors.text-purple}` for general UI — they are reserved for technology identity only
- Don't bold display text above 600 — the system never uses 700+ in marketing contexts
- Don't use center-alignment for body paragraphs; left-aligned text reads as engineering documentation

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <640px | Single column; headline scales down; nav collapses; customer grid stacks to 2 columns |
| Mobile | 640–767px | Standard mobile; CTA buttons stack; hero text reduces to ~28px |
| Tablet | 768–1023px | Two-column feature sections begin; nav starts expanding |
| Desktop | 1024–1279px | Full multi-column layout; hero at full 48px |
| Large Desktop | ≥1280px | Max ~1280px container centered; generous section padding |

### Touch Targets
- Buttons use `8px 16px` padding — comfortable tap height at ~36–38px total
- Navigation links carry generous vertical padding for thumb taps
- Input fields use `10px 14px` padding — readable and touchable

### Collapsing Strategy
- **Navigation**: full horizontal → hamburger on mobile; the dark "Get started" button persists
- **Hero**: 48px monospace headline → scales proportionally down; subtext stacks; CTAs go full-width
- **Customer logo wall**: 5–6 column grid → 3–4 column → 2 column; brand colors preserved at all sizes
- **Feature sections**: side-by-side content panels → single column stacked
- **Spacing**: section padding compresses from `{spacing.3xl}` toward `{spacing.xl}` on mobile

### Image Behavior
- Database performance illustrations and diagrams maintain aspect ratio, scale fluid within grid cells
- Customer logos in the brand wall preserve color at all screen sizes — no grayscale fallback

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Near White `{colors.background}`
- Primary text: Charcoal `{colors.ink-body}`
- Brand CTA: Fire Orange `{colors.primary}`
- Body text: Charcoal `{colors.ink-body}`
- Border: Light `{colors.border}` / Strong `{colors.border-strong}`
- Links / Hover: Fire Orange `{colors.primary}`
- Focus ring: Blue `{colors.focus-ring}`

### Example Component Prompts

- "Create a hero section on `{colors.background}`. Headline at 48px `{typography.display-hero}` (system monospace, weight 600), color `{colors.ink}`, letter-spacing -0.5px. Subtext at 18px Inter `{typography.body-large}`, `{colors.ink-body}`. Two CTA buttons: a dark-filled button (`{colors.ink}` background, white text, `{rounded.md}`, `8px 16px` padding) and an orange button (`{colors.primary}` background, white text, `{rounded.md}`)."
- "Design a feature card on `{colors.surface}`: `{rounded.xl}` radius, 1px `{colors.border}` border, 24px padding. Card heading in 20px Inter `{typography.heading-sub}` weight 600, `{colors.ink}`. Body in 16px Inter `{typography.body}`, `{colors.ink-body}`. On hover: border strengthens to `{colors.border-strong}`, no shadow."
- "Build a CTA button: `{colors.primary}` fill, `{colors.on-primary}` text, system monospace `{typography.button-ui}` weight 600, `{rounded.md}` radius, `8px 16px` padding. Hover deepens to `{colors.primary-dark}`."
- "Create navigation bar: `{colors.background}` sticky header, `{colors.border}` bottom border. Left: PlanetScale logo. Center: monospace nav links (`{typography.nav-link}`, `{colors.ink-body}`) that shift to `{colors.primary}` on hover. Right: dark 'Get started' button (`{colors.ink}` fill, white monospace text, `{rounded.md}`)."
- "Design an inline code reference chip: `{colors.surface-alt}` background, `{colors.ink-body}` text, `{typography.code}` (14px monospace weight 500), `{rounded.sm}` radius, `2px 6px` padding. Use for database names, CLI commands, and technology identifiers inline in prose."
- "Create a full-width announcement banner: `{colors.ink}` background, white `{typography.caption}` text, orange `{colors.primary}` for the highlighted call-to-action link. Full viewport width, `8px 16px` padding. This is the topmost element on the page."

### Iteration Guide

1. Start with `{colors.background}` (#fafafa) — not pure white, not charcoal. The canvas warmth is calibrated.
2. Orange (`{colors.primary}`) gets one CTA per viewport. If you've placed it twice, one of them is wrong.
3. All display headlines and navigation use `{typography.display-hero}` family (system monospace) — verify the font-family stack is `ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas`.
4. Prose paragraphs switch to Inter (`{typography.body}`) — never set long-form reading copy in monospace.
5. Cards are flat with `{colors.border}` hairlines — no drop shadows, no background gradients.
6. Technical references (Postgres, Vitess, links) carry their semantic colors (`{colors.postgres-blue}`, `{colors.text-purple}`, `{colors.text-blue}`) — these are identity, not decoration.
7. Button radius is `{rounded.md}` (6px) — never pill for primary actions, never square.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by PlanetScale. Brand names and trademarks belong to their respective owners.