:root {
  /* Colors */
  --brand-accent-orange: #f69259;
  --header-color: #333333;
  --brand-accent-purple2: #ba77b1;
  --brand-accent-yellow: #ffdb6f;
  --button-color: #2c7cb0;
  --brand-accent-blue: #408bc9;
  --accent-color: #348af0;
  --input-placeholder-color: rgba(94,120,146,.5);
  --brand-accent-dark-green: #1c422b;
  --input-background-color: rgba(135,159,183,.15);
  --brand-accent-red: #f16975;
  --accent-text-color: #0069e4;
  --brand-accent-green: #65cc9a;
  --bg-background-color: #ffffff;
  --text-color: #000000;
  --nav-link-background-color-active: rgba(65,54,128,.1);
  --button-hover-color: #276d9b;
  --brand-accent-mid-red: #f3bac3;
  --brand-accent-purple1: #8176b5;
  --mobile-content-section-shadow-color: rgba(0,0,0,.08);
  --border-color: #a9a9a9;
  --brand-accent-dark-red: #711423;
  --brand-accent-light-green: #eff8f3;
  --brand-accent-light-red: #fcf0f2;
  --brand-accent-light-blue: #76c4e2;
  --input-border-color: rgba(66,89,111,.15);
  --brand-accent-mid-green: #b0ddc2;

  /* Typography */
  --font-primary: 'Open Sans', Helvetica, Arial;

  /* Spacing */
  --space-3: 3px;
  --space-3_2: 3.2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-5_1: 5.1px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14_4: 14.4px;
  --space-16: 16px;
  --space-20: 20px;
  --space-25: 25px;
  --space-27: 27px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-80: 80px;
  --space-100: 100px;
  --space-346_5: 346.5px;

  /* Radius */
  --radius-sm: 3px;
  --radius-lg: 40px;
  --radius-pill: 224px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgb(204, 204, 204) 0px 3px 4px 0px;
}

# Cloudflare DNS Design System Specification

System Prompt:
You are a Cloudflare DNS design expert. Build UIs matching their visual language exactly.

Brand Context:
Cloudflare DNS values clarity, speed, and trust. The design is minimal, flat, and highly legible, with a restrained palette and functional typography. Components are precise and responsive, avoiding unnecessary decoration.

Color Palette:
- Deep Blue: #0000ee — Links, interactive text
- White: #ffffff — Backgrounds, button surfaces
- Deep Indigo: #221e68 — Section backgrounds
- Dark Gray: #414142 — Logo neutral
- Light Purple Overlay: #413680 — Hover/focus backgrounds
- Brand Accent Orange: #f69259 — Highlights, icons
- Header Text: #333333 — Headings
- Brand Accent Purple2: #ba77b1 — Decorative accents
- Brand Accent Yellow: #ffdb6f — Icons, highlights
- Button Blue: #2c7cb0 — Secondary buttons
- Brand Accent Blue: #408bc9 — Links, icons
- Accent Blue: #348af0 — Primary actions
- Placeholder: rgba(94,120,146,.5) — Input placeholder
- Dark Green: #1c422b — Status indicators
- Input Background: rgba(135,159,183,.15) — Input fields
- Red Accent: #f16975 — Errors
- Accent Text Blue: #0069e4 — Emphasis text
- Green Accent: #65cc9a — Success
- Nav Active BG: rgba(65,54,128,.1) — Active nav item
- Button Hover Blue: #276d9b — Button hover
- Mid Red Accent: #f3bac3 — Soft alert background
- Purple Accent1: #8176b5 — Decorative accents
- Mobile Section Shadow: rgba(0,0,0,.08) — Section separators
- Border Gray: #a9a9a9 — Dividers
- Dark Red Accent: #711423 — Alerts
- Light Green Accent: #eff8f3 — Success backgrounds
- Light Red Accent: #fcf0f2 — Error backgrounds
- Light Blue Accent: #76c4e2 — Info backgrounds
- Input Border: rgba(66,89,111,.15) — Input borders
- Mid Green Accent: #b0ddc2 — Success secondary

Typography:
Font Family: 'Open Sans', Helvetica, Arial — from Google Fonts
Sizes & Weights:
| Element | Size | Weight | Line Height | Use Case |
| H1 | 40px | 500 | 1.4 | Page titles |
| H1 | 36px | 500 | 1.0 | Hero titles |
| H1 | 30px | 400 | 1.4 | Section headings |
| ... (include all from table above) ...

Spacing & Grid:
Base: 8px grid
Tokens: 3px, 3.2px, 4px, 5px, 5.1px, 8px, 10px, 12px, 14.4px, 16px, 20px, 25px, 27px, 40px, 50px, 60px, 80px, 100px, 346.5px
Use: Button padding (5.1px), card padding (20px), section gaps (25px+)

Border Radius:
- none: 0 — nav links
- sm: 3px — inputs
- lg: 40px — pill-like divs
- pill: 224px — extreme pill buttons
- full: 50% — circular buttons

Shadows & Depth:
Soft shadow: rgb(204, 204, 204) 0px 3px 4px — used sparingly
Otherwise flat design — rely on borders

Component Specifications:

Primary Button:
Default: background transparent, color #000000, padding 5.1px 10.2px, border-radius 0px, border 3px solid transparent
Hover: background var(--selection-background-color), transform translateY(-1px)
Active: background rgba(0,0,0,0.2), transform translateY(1px)
Focus: outline none

Secondary Button:
Default: background #000000, color #ffffff, same padding/border
Hover/Active: same as primary

Share Button:
Background #ffffff, color #000000, padding 0, border-radius 50%
Hover: inset shadows

Links:
White / deep blue / black text, underline, no hover change

Input Fields:
Background rgba(135,159,183,.15)
Border rgba(66,89,111,.15)
Placeholder rgba(94,120,146,.5)

Layout & Responsive Rules:
Max width: 1200px
Breakpoints: 375px, 525px, 576px, 650px, 768px, 769px, 920px, 1080px, 1200px

Interaction Rules:
Transitions: 150ms ease for state changes
Focus: outline none for buttons, rely on background change
Hover: slight translateY for buttons

DO:
- Use exact hex values from palette
- Maintain 8px grid
- Keep buttons flat — no heavy shadows
- Use Open Sans everywhere
- Ensure WCAG AA contrast

DON'T:
- Invent new colors
- Mix rounded and square corners inconsistently
- Use gradients
- Apply drop shadows to text

Code Examples:

```css
.btn-primary {
  background: transparent;
  color: #000000;
  padding: 5.1px 10.2px;
  border-radius: 0;
  border: 3px solid transparent;
  font-weight: 600;
  font-size: 17px;
  transition: background 150ms ease, transform 150ms ease;
}
.btn-primary:hover {
  background: var(--selection-background-color);
  transform: translateY(-1px);
}
.btn-primary:active {
  background: rgba(0,0,0,0.2);
  transform: translateY(1px);
}

.card {
  background: #ffffff;
  border-radius: 3px;
  padding: 20px;
  box-shadow: var(--shadow-soft);
}

.input {
  border: 1px solid rgba(66,89,111,.15);
  border-radius: 3px;
  padding: 12px;
  font-size: 16px;
  background: rgba(135,159,183,.15);
}
.input::placeholder {
  color: rgba(94,120,146,.5);
}
```