Uplift design language

Clean, minimalist, developer-forward UI: the design prompt behind uplift.page.

Run it as a prompt

Paste this into any AI agent, or fetch it: curl -s https://uplift.page/api/v1/prompts/uplift-design-language/raw

prompt.md

# Uplift design language

Build interfaces that feel like a precision developer tool: quiet, fast, and
confident. Enterprise-clean without enterprise-bloat.

## Foundations

- **Canvas**: near-black `#0A0A0B` background; raised surfaces `#131316`; borders `#26262B` at 1px. Light mode: pure white canvas, `#E4E4E7` borders.
- **Text**: off-white `#FAFAF9` primary, `#A1A1AA` secondary. Never pure white on pure black.
- **Accent**: one only - sun amber `#F59E0B` (hover `#FBBF24`). Used for primary actions, active states, and the logo. Everything else is neutral.
- **Type**: Inter for UI (15px base, 1.6 line-height); JetBrains Mono for code, slugs, keys, and numbers. Headings: tight tracking (-0.02em), weight 600, no thin fonts.
- **Spacing**: 4px grid; sections breathe (96–128px vertical on marketing, 24–32px in app). Max content width 1100px marketing, 1400px app.
- **Radii**: 8px controls, 12px cards, 999px pills. **Shadows**: almost none - borders define edges; one soft shadow level for overlays only.

## Components

- Buttons: solid amber primary (black text), ghost neutral secondary, 36–40px tall, no gradients.
- Cards: 1px border, no shadow, title + mono metric; hover raises border contrast, not elevation.
- Code blocks everywhere a developer would expect them - copy button, mono, no syntax rainbow (2–3 token colors max).
- Tables: row borders only, mono numerals, right-aligned numbers.
- Empty states: one sentence + one action, never illustrations doing the talking.

## Motion

- 150–250ms, ease-out, opacity + translateY(4–8px) only. Stagger lists by 30ms.
- Never animate width/height/top/left; charts and panels live in fixed-height containers so loading never shifts layout.
- Respect `prefers-reduced-motion`: disable entrances, keep state changes instant.

## Voice

- Sentence case everywhere, including headings and buttons.
- Say the number: "12,400 requests" not "lots of traffic". Mono for every number.
- Developer-forward: lead with the curl command, not the philosophy.

## Don't

- No stock photos, no glassmorphism, no gradient text, no more than one accent color.
- No marketing superlatives ("blazingly fast") - show a latency number instead.
- No dark patterns: pricing visible, no fake scarcity.

The full prompt

Build interfaces that feel like a precision developer tool: quiet, fast, and confident. Enterprise-clean without enterprise-bloat.

Foundations

Canvas: near-black #0A0A0B background; raised surfaces #131316; borders #26262B at 1px. Light mode: pure white canvas, #E4E4E7 borders.
Text: off-white #FAFAF9 primary, #A1A1AA secondary. Never pure white on pure black.
Accent: one only - sun amber #F59E0B (hover #FBBF24). Used for primary actions, active states, and the logo. Everything else is neutral.
Type: Inter for UI (15px base, 1.6 line-height); JetBrains Mono for code, slugs, keys, and numbers. Headings: tight tracking (-0.02em), weight 600, no thin fonts.
Spacing: 4px grid; sections breathe (96–128px vertical on marketing, 24–32px in app). Max content width 1100px marketing, 1400px app.
Radii: 8px controls, 12px cards, 999px pills. Shadows: almost none - borders define edges; one soft shadow level for overlays only.

Components

Buttons: solid amber primary (black text), ghost neutral secondary, 36–40px tall, no gradients.
Cards: 1px border, no shadow, title + mono metric; hover raises border contrast, not elevation.
Code blocks everywhere a developer would expect them - copy button, mono, no syntax rainbow (2–3 token colors max).
Tables: row borders only, mono numerals, right-aligned numbers.
Empty states: one sentence + one action, never illustrations doing the talking.

Motion

150–250ms, ease-out, opacity + translateY(4–8px) only. Stagger lists by 30ms.
Never animate width/height/top/left; charts and panels live in fixed-height containers so loading never shifts layout.
Respect prefers-reduced-motion: disable entrances, keep state changes instant.

Voice

Sentence case everywhere, including headings and buttons.
Say the number: "12,400 requests" not "lots of traffic". Mono for every number.
Developer-forward: lead with the curl command, not the philosophy.

Don't

No stock photos, no glassmorphism, no gradient text, no more than one accent color.
No marketing superlatives ("blazingly fast") - show a latency number instead.
No dark patterns: pricing visible, no fake scarcity.

Served from the uplift.page library and refreshed within 5 minutes of every update.