steel.dev — Design System
1. Visual Theme & Atmosphere
Steel.dev radiates developer-tool energy. It’s built on a true near-black canvas (rgb(15,15,15)) with a near-white heading color — but it breaks from convention with a stunning, almost reckless deployment of vivid accent colors. Against the darkness, product status indicators appear in saturated greens, oranges, pinks, purples, reds, and cyans — like terminal output brought to life. Built in Framer, the site communicates technical power while staying visually rich and modern. The Geist typeface system (Vercel’s own) grounds it in the contemporary developer aesthetic.
2. Color Palette & Roles
| Role | Value | Usage |
|---|---|---|
| Canvas | rgb(15,15,15) |
True near-black background |
| Surface 1 | rgb(22,22,22) |
Slightly lighter dark container |
| Surface 2 | rgb(35,35,35) |
Card background |
| Heading text | rgb(238,238,236) |
Near-white — the primary readable tone |
| Code text | rgb(230,237,243) |
Pre/code blocks |
| Yellow CTA | rgb(245,217,10) |
Hero CTA button — high visibility |
| Blue CTA | rgb(0,145,255) |
Alternative CTA |
| Status: Green | rgb(48,164,108) / rgb(76,196,138) |
Positive/success indicator |
| Status: Orange | rgb(247,104,8) |
Warning/active state |
| Status: Pink | rgb(214,64,159) |
Error or variant |
| Status: Red | rgb(229,72,77) |
Error/danger |
| Status: Purple | rgb(158,140,252) |
Tag/label |
| Status: Cyan | rgb(104,221,253) |
Info state |
The rainbow-like spectrum of status colors is a product showcase decision — each color represents a different service or integration state.
3. Typography Rules
The Geist family (Vercel’s typeface) handles all text with notable OpenType features enabled (blwf, cv03, cv04, cv09, cv11).
h1: Geist Medium, 56px, weight 500, −1.2px tracking, line-height 60pxh2: Geist, 32px, weight 500, −1px trackingh3: Geist, 24px, weight 500, −0.7px trackingh4: Geist, 22px, weight 500, −1px trackingp: Geist, 16px, weight 500, −0.6px trackingpre: Geist Mono, 16px, weight 400 — code blocks
Everything is medium weight (500) — no extremes. The tight negative tracking at all sizes gives Geist a refined, compressed feel.
4. Component Stylings
Pills/badges use 1000px border radius — fully rounded. CTAs include a striking yellow rgb(245,217,10) with no radius data suggesting sharp-edged buttons. The dark card stack creates layers from rgb(17,17,16) to rgb(35,35,35) — a five-tier dark elevation system.
5. Layout Principles
Framer handles layout. Breakpoints at 768, 810, 1024, and 1200px. The minimal spacing data (body: 0px padding) suggests full-bleed sections managed by Framer’s component system.
6. Depth & Elevation
A sophisticated multi-tier dark elevation:
- Canvas:
rgb(15,15,15)luminance 0.059 - Layer 1:
rgb(17,17,16)— 0.066 - Layer 2:
rgb(22,22,22)— 0.086 - Layer 3:
rgb(34,34,33)— 0.133 - Layer 4:
rgb(35,35,35)— 0.137
No shadows needed — luminance steps alone create depth. Semi-transparent overlays for status badges use rgba(61,255,177,0.19) and similar.
7. Do’s and Don’ts
Do: Use the status color system purposefully — each saturated color should mean something specific. Keep all primary text in near-white. Use the Geist OpenType features. Stack dark surfaces for depth.
Don’t: Use bright colors for decoration — they are functional signals. Don’t mix Geist with other typefaces. Don’t add warm-toned backgrounds.
8. Responsive Behavior
Four Framer breakpoints: mobile (768), tablet (810/1024), desktop (1200). The vivid color indicators likely remain constant across breakpoints; layout adapts beneath them.
9. Agent Prompt Guide
“Design in the style of steel.dev: near-black
rgb(15,15,15)canvas, Geist Medium at weight 500 with negative letter-spacing, near-white primary text, vivid status colors (green, orange, pink, purple, cyan, red) as functional indicators, yellow hero CTA, five-tier dark elevation system, no shadows.”
Generated by Sparkbites — extracted from live CSS analysis
