# SF Compute — Design Language

## 1. Visual Theme & Atmosphere
SF Compute is a GPU compute platform that uses editorial serif typography to differentiate itself from the typical developer-tool aesthetic. The decision to lead with a serif (`ui-serif, Georgia`) signals an audience of thoughtful practitioners, not hasty consumers. The near-white surfaces use perceptual colour space (lab values) for precise neutral control. A monospace font for technical specifications and Inter for UI complete a classic editorial-technical trinity. The result is a serious, unhurried platform for infrastructure professionals.

## 2. Color Palette & Roles
- **Background** — transparent/white with `lab(96.52...)` footer surface (very light warm grey)
- **Primary text** — `lab(15.204 0 0)` (near-black, perceptually neutral): main headings and body
- **Secondary text** — `lab(48.496 0 0)` (mid grey): links and secondary content
- **Sidebar accent** — `#18181b` (near-black): sidebar primary interactive
- **Sidebar surface** — `var(--color-neutral-50)`: light sidebar fill
- **Border/ring** — `lab(91.6229 -0.159115 -2.26791)` (near-white): subtle structural edge

All colours defined in perceptual lab space — precision over convention.

## 3. Typography Rules
- **ui-serif / Georgia** (weight 400–500): primary editorial voice for headings and body
- **Inter** (weight 400–500): UI elements and navigation
- **ui-monospace / SFMono / Menlo** (weight 400): technical specifications, code, data
- Scale: 12–24px — editorial and measured, no cinematic extremes
- No letter-spacing, no text transforms — the serif's inherent character provides rhythm
- The serif choice is the single most differentiating typographic decision on the site

## 4. Component Stylings
- **8px radius** for cards and interactive elements
- **Fully rounded** (`3.35544e+07px`) for pill buttons and tags
- Two-level shadow system for cards and interactive focus states
- Sidebar with distinct surface colour and border system
- Monospace used contextually for compute specs, numbers, technical data

## 5. Layout Principles
- Sidebar navigation layout (`--sidebar*` tokens): persistent left panel with content area
- Footer with distinct lab-grey background for visual closure
- Clean editorial column for main content — wide margins and clear hierarchy
- Generous whitespace honouring the serif's need for breathing room

## 6. Depth & Elevation
- Two shadow levels: one for cards, one for interactive focus rings
- Sidebar border creates structural edge between nav and content
- Lab-grey footer provides visual grounding at page bottom

## 7. Do's and Don'ts
**Do:** Use `ui-serif / Georgia` for all editorial headings and body copy.
**Do:** Reserve `ui-monospace` for technical data — compute specs, pricing, code.
**Do:** Define colours in lab space for perceptual consistency.
**Don't:** Replace the serif with a sans-serif — the editorial identity depends on it.
**Don't:** Add accent colours — the achromatic system is the differentiator.
**Don't:** Use more than two shadow levels.

## 8. Responsive Behavior
- Sidebar collapses to a top navigation or drawer on mobile
- Editorial column expands to full width on mobile
- Serif body text scales well at mobile sizes (18px to 16px)
- Monospace technical data may require horizontal scroll on narrow viewports

## 9. Agent Prompt Guide
> Design like SF Compute: white to light grey surfaces (lab values), Georgia/ui-serif for all editorial type, Inter for UI, monospace for technical specs. 8px card radius, pill buttons. Two-level subtle shadow. Sidebar layout with neutral-50 fill. No colour accents — the serif is the identity. Serious infrastructure editorial aesthetic.

*Generated by Sparkbites — extracted from live CSS analysis*