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