# 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 60px
- `h2`: Geist, 32px, weight 500, −1px tracking
- `h3`: Geist, 24px, weight 500, −0.7px tracking
- `h4`: Geist, 22px, weight 500, −1px tracking
- `p`: Geist, 16px, weight 500, −0.6px tracking
- `pre`: 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*