Vercel-Inspired
Hard-Edged Neutral
The contract this site runs on. White, hairline borders, square corners, mono eyebrows, one black accent, zero gradients.
Palette specimen
Background
#FFFFFF
Foreground
#0A0A0A
Secondary
#525252
Border
#E5E5E5
Muted
#F5F5F5
Specimen of the Hard-Edged Neutral system. Not the site palette.
Best for
Developer tools, docs, and content sites that want to read as precise and trustworthy. The safe default when in doubt.
The contract
The full DESIGN.md. Copy it, or download it into a project root so an agent can build against it.
DESIGN.md
# DESIGN.md - Hard-Edged Neutral
A precise, Vercel-inspired neutral system. Solid colors only. The hierarchy comes from type, weight, and space, never from decoration.
## Palette (tokens)
| Token | Value | Use |
| --- | --- | --- |
| `--background` | #FFFFFF | Page and card surfaces |
| `--foreground` | #0A0A0A | Primary text, primary buttons |
| `--secondary` | #525252 | Secondary text |
| `--muted-foreground` | #737373 | Captions, meta |
| `--border` | #E5E5E5 | Hairline borders (black at ~10%) |
| `--border-strong` | #D4D4D4 | Emphasis borders (black at ~15%) |
| `--muted` | #F5F5F5 | Subtle fills, hover states |
| `--accent` | #0A0A0A | The single accent is black by default |
At most one non-black accent, on at most one element per section.
## Type scale
- Family: Geist for headings and body, a mono family for eyebrows and code.
- Headings: tight tracking (`letter-spacing: -0.02em`), weight 600 to 900.
- Scale (rem): 0.75, 0.875, 1, 1.25, 1.5, 2, 3, 4.5.
- Eyebrows: mono, uppercase, 0.75rem, `letter-spacing: 0.1em`, color `--muted-foreground`.
## Spacing grid
8px base. Steps: 4, 8, 12, 16, 24, 32, 48, 64, 96. Section padding `py-12` to `py-16`. Container: centered, max-width 72rem, horizontal padding 20 to 32px.
## Corners and borders
- Corner radius: 0 everywhere. This is absolute. Set `--radius: 0` and force `border-radius: 0` globally.
- Borders: 1px hairline at `--border`. Emphasis at `--border-strong`. No heavy borders.
## Component patterns
- Buttons: primary is solid black text-white, square, hover to #262626. Secondary is white with a hairline border, hover fill `--muted`. Padding 8px 24px. No pills.
- Cards: white surface, hairline border, no offset layers, no shadow heavier than a faint 1px.
- Sections: mono uppercase eyebrow, then a tight heading, then body. Generous vertical space.
## Banned patterns
- Any gradient: `linear-gradient`, `bg-gradient-to-*`, gradient text, gradient borders or badges.
- Rounded corners of any radius.
- Pink, cream, or pastel surfaces. Pill buttons. Offset-shadow cards.
- Emojis in UI chrome or headings.
- Em dashes anywhere. Use a hyphen with spaces.
- More than one accent hue on a surface.