Cloudflare
An internet infrastructure platform anchored in Cloudflare's distinctive orange (#F6821F) on a dark navy canvas (#1D1D1F / #0C0D11) for marketing and clean white for the dashboard. The system reads as serious infrastructure with an approachable brand: the orange is warm and human rather than corporate, contrasting with the technical depth of the product. Dashboard typography uses Inter at functional sizes; marketing uses a custom display variant at bold weights. The orange represents speed, fire, and protection — Cloudflare's three core value propositions materialized as a single accent color used across every touchpoint with unwavering consistency.
Color Tokens
1. Visual Theme & Atmosphere
Cloudflare sits at an interesting design intersection: infrastructure company with consumer-legible branding. The orange is everywhere — Cloudflare's orange is as distinctive as Stripe's blue or GitHub's dark. The dashboard (Workers, R2, D1, Pages, etc.) uses a clean white product surface where orange appears on the primary "Create" button, active navigation indicators, and status warnings (orange = "check this"). Marketing goes darker and more dramatic. The brand consistently communicates speed and protection through warm, energetic color.
2. Color System
- Orange: #F6821F — the singular brand color; used for primary CTAs, active states, and the logo across all contexts
- Secondary amber: #FBAD41 — lighter orange for gradient partner and decorative accents
- Dark marketing: #0C0D11 — very dark navy-black for dramatic marketing surfaces
- Dashboard canvas: White with very light gray surfaces — enterprise clarity
- Warning: Cloudflare uses orange for warnings (matches brand) — a clever dual-use of the primary color
- Danger: Red #FF4040 only for errors, keeping orange non-alarming
3. Typography
Maison Neue (or Inter equivalent) — humanist grotesque at bold display weights for marketing. Dashboard uses Inter at smaller functional sizes. The documentation is extensive and uses a three-level hierarchy (H1/H2/H3) with monospace code blocks throughout.
4. Components & Patterns
- Dashboard nav: Left sidebar with product areas (Workers, Pages, D1, etc.), orange active indicator
- Worker editor: Code editor (Monaco-based), route configuration panel, logs panel
- Analytics charts: Traffic volume over time, geographic heatmap, orange-accented data points
- Status badge: Healthy (green) / Degraded (orange) / Error (red) — Cloudflare's three states
- Zone selector: Top-of-page domain switcher dropdown
- Documentation: Two-column layout with code examples, orange inline links
5. Spacing & Layout
Dashboard: 220px sidebar + content area, max 1200px. Workers editor: split-pane code/preview. Marketing: 1440px max, dramatic full-bleed sections with orange gradient moments.
6. Motion & Interaction
Dashboard is functional and fast — hover highlights, no animation. Worker logs stream in real-time. Deployments show progress with animated status. Marketing has scroll-triggered reveals. Overall: reliable infrastructure aesthetic, not flashy.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for