---
site: PlanetScale - the world’s fastest and most scalable cloud hosting for Vitess and Postgres
url: "https://planetscale.com"
generated_at: "2026-06-25T08:31:33.191Z"
generator: "designlang@13.0.0"
intent: landing
material: flat
library: tailwindcss
tokens:
  colors:
    primary: "#f2b600"
    secondary: "#f35815"
    accent: "#0b6ec5"
    background: "#fafafa"
    foreground: "#414141"
  typography:
    base: 16
  spacing:
    base: 4
    scale: "[4, 80, 96]"
  radii:
    full: 9999
---

# Overview

A **landing** page (heuristic confidence 0.31), dressed in **flat** material.

Component library appears to be **tailwindcss** (0.811).

> "The world’s fastest and most scalable cloud databases"

The author writes in a **friendly** voice; headings tend to be **Sentence case** case and **tight**.

Reading order detected on the source: `nav → cta → nav → testimonial → testimonial → footer → nav`.

Source: <https://planetscale.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#f2b600` | 1 |
| secondary | `#f35815` | 2 |
| accent | `#0b6ec5` | 76 |
| background | `#fafafa` | — |
| foreground | `#414141` | — |

**Neutrals:** `#414141` · `#c1c1c1` · `#737373` · `#ffffff` · `#000000`

**Total unique colors detected:** 10.

# Typography


**Body size:** `16px` / line-height `24px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `16px` | `400` | `24px` |

# Layout

**Spacing base:** `4px` increments.
**Scale:** `4px` · `80px` · `96px`

**Layout primitives:** 4 grid containers · 63 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

_No discrete shadow tokens detected — flat material._

# Shapes

**Radius scale**
- `full` — `9999px`

# Components

**Detected patterns:** `buttons` · `links` · `navigation` · `footer` · `tabs` · `accordions`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | primary | — | 6 |

# Do's and Don'ts

**Do's**
- Use `get`, `platform`, `resources` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **tight** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't ship copy on the colors flagged in accessibility — 1 contrast pair(s) fail WCAG AA on the source itself.
- Don't 1 wcag contrast failures.
- Don't 35 !important rules — prefer specificity over overrides.
- Don't 80% of css is unused — consider purging.
- Don't 1046 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://planetscale.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._