Design System inspired by Cloudflare
Web infrastructure. Orange brand, technical but approachable, dark docs.
npx getdesign@latest add cloudflareRun this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.
Web infrastructure. Orange brand, technical but approachable, dark docs.
DESIGN SYSTEM INSPIRATION OF CLOUDFLARE
Web infrastructure. Orange brand, technical but approachable, dark docs.
Color Palette
Web infrastructure. Orange brand, technical but approachable, dark docs.
Typography
A type system inspired by Cloudflare.
Cards
Card patterns inspired by Cloudflare.
Components
Other component primitives mapped from the Cloudflare spec.
Design System Inspired by Cloudflare
1. Visual Theme & Atmosphere
Web infrastructure. Orange brand, technical but approachable, dark docs.
Key Characteristics:
- Orange (#F38020) as warm technical brand
- Technical but approachable documentation
- Dashboard-centric product interface
- Network visualization diagrams
- Performance metrics and analytics UI
2. Color Palette & Roles
Primary
- CF Orange (
#F38020): Brand color - Dark BG (
#1B1B1B): Brand color - Surface (
#2C2C2C): Brand color - White (
#FFFFFF): Brand color - Light BG (
#F8F8F8): Brand color - Gray (
#6D6D6D): Brand color - Blue (
#4693FF): Brand color - Border (
#E6E6E6): Brand color
3. Typography Rules
Font Family
- Display & UI:
system-ui,Inter
Hierarchy
| Role | Size | Weight | Line Height |
|---|---|---|---|
| Display | 64px | 700 | 1.1 |
| H1 | 48px | 700 | 1.2 |
| H2 | 32px | 600 | 1.3 |
| Body | 16px | 400 | 1.6 |
| Small | 14px | 400 | 1.5 |
| Code | 14px | 400 | 1.6 |
4. Component Stylings
Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.
5. Layout Principles
- Base unit: 4-8px
- Max container: 1100-1200px
- Consistent section spacing: 80-120px vertical
6. Depth & Elevation
Depth communicated through background color shifts, subtle shadows, or border treatments.
7. Do's and Don'ts
Do
- Follow the established color palette strictly
- Maintain typographic hierarchy
- Use brand-consistent border-radius
Don't
- Introduce off-brand colors
- Use inconsistent spacing
- Override the established visual language
8. Responsive Behavior
| Breakpoint | Width |
|---|---|
| Mobile | <640px |
| Tablet | 640-1024px |
| Desktop | >1024px |
9. Agent Prompt Guide
Quick Color Reference
- CF Orange:
#F38020 - Dark BG:
#1B1B1B - Surface:
#2C2C2C - White:
#FFFFFF - Light BG:
#F8F8F8 - Gray:
#6D6D6D
Typography
- Font:
system-ui,Inter