---
name: PlanetScale
description: "This site is a great example of a developer-focused tool that uses typography and layout to convey technical authority."
version: alpha

colors:
  background: "#FAFAFA"
  primary: "#414141"
  tertiary: "#F35815"
  neutral: "#737373"
  line: "rgba(65, 65, 65, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 24px
    lineHeight: 1.5
    fontWeight: 600
    letterSpacing: "-0.096px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

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

---

## Overview

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

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

## Colors

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

- **Background (`#FAFAFA`)** — uses `bg` token
- **Primary text (`#414141`)** — uses `ink` token
- **Accent (`#F35815`)** — uses `accent` token
- **Muted (`#737373`)** — uses `muted` token
- **Borders (`rgba(65, 65, 65, 1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** monospace
- **Mono:** monospace

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

## Layout

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

*Rhythm:* Consistent 24px gaps for modular spacing.

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```