The visual approach
PlanetScale positions itself around performance—"the world's fastest database"—and the design system enforces that claim through timing rather than ornament. The motion spec caps interactions at 150–250ms with no decorative delays. Primary CTAs lift on hover with a 200ms ease-out transition and a single-pixel translateY(-1px) displacement. Dropdown menus fade and slide down 8–12px over 200ms. The brand velocity is fast, precise, technical.
The color palette is deliberately narrow. Primary orange (#FF6C37) and blue (#0066CC) anchor the system, with a yellow accent (#FFC107) that appears sparingly. Neutrals run from #000000 through mid-grays (#111827, #6B7280) to near-whites (#E5E7EB, #F9FAFB). There is no gradient hero, no ambient glow, no purple-to-cyan fade. The constraint signals confidence: we do not need a dozen accent colors to explain what we do.
Typography is Inter across all weights (400, 500, 600, 700) with a fixed scale: 12px through 48px in uneven increments. Line heights split cleanly—1.5 for body copy, 1.2 for headings. The component vocabulary is minimal: nav, hero, card, cta, pricing, form. Documentation pages are MDX with syntax highlighting, likely Shiki or Prism. The stack is Next.js 14+ with Tailwind CSS, hosted on Vercel. Radix UI or Headless UI handles accessible primitives for dropdowns and modals. Algolia DocSearch powers the keyboard-shortcut search (⌘K).
The orange CTA stands against a field of grays and whites. It does not pulse, glow, or shimmer. It sits still until you hover, then responds in 200 milliseconds. The design assumes you already know why you are here.
What works
The motion timing earns the performance claim. A 200ms hover state is fast enough to feel immediate but slow enough to register as intentional. Stripe's design system uses similar restraint—150–300ms for most transitions, no bounce or elastic easing. PlanetScale's cubic-bezier(0.4, 0, 0.2, 1) for logo grid hovers is Material Design's standard deceleration curve, a safe choice that never distracts. The consistency across hover states (text links at ~180ms, cards at 200ms, form focus rings at 150ms) means the interface feels like a single object, not a collection of borrowed components.
The two-color system solves a common problem: how to differentiate marketing from product UI without fracturing the brand. Orange (#FF6C37) owns CTAs and key navigation elements. Blue (#0066CC) handles hyperlinks and secondary actions. Yellow (#FFC107) appears as a badge or highlight accent but never competes for primary attention. The restraint lets the content hierarchy breathe. You never have to decode whether a purple button is more important than a teal one, because there are no purple or teal buttons.
The typography scale avoids the trap of mathematical perfection. Instead of a strict 1.25× modular scale (16px → 20px → 25px → 31.25px), PlanetScale uses 16px → 18px → 20px → 24px → 30px → 36px → 48px. The irregular jumps (18px, 30px) give designers more control over optical density without inventing custom sizes every week. The four-weight system (400, 500, 600, 700) is enough to establish hierarchy without the cognitive overhead of nine weights.
The component vocabulary—nav, hero, card, cta, pricing, form—is narrow enough that a new engineer can learn it in a morning. Linear uses a similar approach: a small set of primitives, combined rather than customized. The benefit is velocity. There is no design-system committee debating whether a new feature needs a "pro card" versus an "enterprise card with accent border." You use a card.
What a builder can borrow
Motion as a performance signal. If your product's value proposition is speed, your hover states should be 200ms, not 400ms. If you promise reliability, your animations should never drop frames. PlanetScale's motion spec is a contract: we said fast, here is fast. You can apply this to any claim. A collaboration tool that promises "real-time" should show typing indicators in under 100ms. A security product should use slow, deliberate transitions (400–600ms) to signal care and precision. Motion is not decoration—it is evidence.
Constrain color to force clarity. Two primary colors and one accent is enough to build an entire product. The discipline prevents the "color zoo" problem where every squad invents a new accent to differentiate their feature. Stripe uses blue and purple. Figma uses red, purple, and blue but restricts them by context (red for brands, purple for FigJam, blue for core). PlanetScale's orange and blue lock down the hierarchy before the first component is built.
Ship an incomplete scale. The gaps in PlanetScale's type scale (no 22px, no 32px) are not oversights—they are guardrails. If you need a size between 24px and 30px, the answer is "choose one." Designers waste hours debating 28px versus 30px. A fixed set of options eliminates the debate. Shopify's Polaris type scale has seven sizes. Material Design has ten. PlanetScale has nine. All three work because they commit to a number and stop.
Name your components after what they are, not what they do. PlanetScale uses card, not feature-highlight-card or testimonial-card-with-avatar. A card is a card. You pass it content, it renders a bordered box. The naming convention scales because it does not encode business logic. When the marketing team wants to A/B test testimonial layouts, they do not have to rename a component or fork the design system. They rearrange the content inside a card. GitHub's Primer design system follows the same rule: Box, Button, Text. The primitive name is the API.
The broader lesson is that speed—in motion, in decision-making, in code—is a design outcome, not a performance optimization you bolt on later. PlanetScale's system is fast because every choice was made to eliminate delay: fewer colors, fewer components, fewer milliseconds. The visual system and the product promise are the same thing.