# Frontend Design Landing Page

> Marketing landing page and conversion-focused product page reference. Use this skill when building hero sections, feature grids, pricing pages, testimonials, CTAs, footers, navigation bars, or any public-facing marketing surface. Covers a warm, professional, developer-friendly design language (cream backgrounds, generous whitespace, pill CTAs, corner-bracket card decorations) and a complete token set, animation system, and copy-paste component snippets. NOT for product/dashboard UIs — use frontend-design-saas for those.

- Skill: `cloudflare/frontend-design-landing-page` (Agent Skill)
- Install (CLI): `npx skillmds@latest add cloudflare/frontend-design-landing-page`
- Raw SKILL.md: https://api.skillmd.com/api/skills/cloudflare/frontend-design-landing-page/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: Cloudflare (https://skillmd.com/u/cloudflare)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/cloudflare/frontend-design-landing-page

---


# Landing Page Design System

> **AI-Optimized Design Reference** for building warm, professional, conversion-focused marketing landing pages, product pages, feature pages, and pricing pages.

This skill captures a specific landing-page register: warm cream backgrounds (NOT pure white), brown text (NOT pure black), a single bold accent for CTAs, pill-rounded buttons, and signature corner-bracket card decorations. It's tuned for developer-adjacent / B2B products — the aesthetic feels human and crafted without being playful or consumer-y. Pin the accent color to your brand; the rest of the system is reusable as-is.

> **When to use this vs. `frontend-design-saas`:** Landing-page surfaces (homepage, /features, /pricing, /about, blog) → this skill. Product UI behind the login (dashboards, settings, tables) → `frontend-design-saas`.

---

## Quick Reference (TL;DR)

```
Brand Accent:    #FF4801 (replace with your brand) / #FF7038 (hover)
Background:      #FFFBF5 (warm cream) / #121212 (dark mode)
Text:            #521000 (warm brown) / #F0E3DE (dark mode)
Border:          #EBD5C1 (cream-tinted)
Font Sans:       "Inter" / "Geist" / "Manrope" / any modern grotesk
Font Mono:       "JetBrains Mono" / "IBM Plex Mono" / "Geist Mono"
Base Spacing:    4px (multiples: 8, 12, 16, 24, 32, 48, 64)
Border Radius:   Buttons = pill (9999px), Cards = 12-16px, Inputs = 8px, Hero = 16-20px
Signature:       Corner brackets on cards (8px decorative squares at corners)
```

This is a **landing-page** register, not a product-UI register. Buttons are pills (consumer/marketing read), backgrounds are warm cream (inviting, not sterile), and decorative idioms like corner brackets are welcome. For product surfaces behind auth, use the SaaS skill instead.

---

## 1. Brand Foundation

### Design Philosophy

| Principle | Description |
|-----------|-------------|
| **Warm but Technical** | Cream tones soften technical content |
| **Professional yet Approachable** | Modern typography, generous whitespace |
| **Developer-Focused** | Monospace for code, terminal aesthetics |
| **Performance-Oriented** | Smooth animations convey speed |

### Visual Identity

- **Never use pure white** (`#FFFFFF`) for backgrounds — always warm cream (`#FFFBF5`)
- **Never use pure black** (`#000000`) for text — always warm brown (`#521000`)
- **Orange is the accent**, not the dominant color
- **Corner brackets** on cards are a signature decorative element
- **Dot patterns** and **dashed lines** add visual texture

---

## 2. Color System

### 2.1 Primary Palette (Light Mode)

| Token | Hex | RGB | Usage |
|-------|-----|-----|-------|
| `--lp-accent` | `#FF4801` | `rgb(255, 72, 1)` | Primary accent, CTAs, links |
| `--lp-accent-hover` | `#FF7038` | `rgb(255, 112, 56)` | Hover states |
| `--lp-accent-light` | `rgba(255, 72, 1, 0.1)` | — | Badges, light backgrounds |
| `--lp-text` | `#521000` | `rgb(82, 16, 0)` | Primary text |
| `--lp-text-muted` | `rgba(82, 16, 0, 0.6)` | — | Secondary text |
| `--lp-text-subtle` | `rgba(82, 16, 0, 0.38)` | — | Tertiary text, placeholders |
| `--lp-bg-page` | `#F5F1EB` | `rgb(245, 241, 235)` | Page background (outer) |
| `--lp-bg-100` | `#FFFBF5` | `rgb(255, 251, 245)` | Primary background |
| `--lp-bg-200` | `#FFFDFB` | `rgb(255, 253, 251)` | Card backgrounds |
| `--lp-bg-300` | `#FEF7ED` | `rgb(254, 247, 237)` | Hover backgrounds |
| `--lp-border` | `#EBD5C1` | `rgb(235, 213, 193)` | Borders, dividers |
| `--lp-border-light` | `rgba(235, 213, 193, 0.5)` | — | Subtle borders |

### 2.2 Primary Palette (Dark Mode)

| Token | Hex | Usage |
|-------|-----|-------|
| `--lp-accent` | `#F14602` | Primary accent |
| `--lp-accent-hover` | `#FF6D33` | Hover states |
| `--lp-text` | `#F0E3DE` | Primary text |
| `--lp-text-muted` | `rgba(255, 253, 251, 0.56)` | Secondary text |
| `--lp-bg-100` | `#121212` | Primary background |
| `--lp-bg-200` | `#191817` | Card backgrounds |
| `--lp-bg-300` | `#2A2927` | Hover backgrounds |
| `--lp-border` | `rgba(240, 227, 222, 0.13)` | Borders |

### 2.3 Category / Tag Colors (optional)

If your product has multiple feature categories that appear as tags or pills throughout the page (feature cards, navigation, etc.), define a small categorical palette. Keep luminance similar across the set so no single color overpowers the others.

| Slot | Primary | Background | Example use |
|----------|---------|------------|-------|
| Category A | `#0A95FF` | `rgba(10, 149, 255, 0.1)` | "Compute" / "Performance" |
| Category B | `#EE0DDB` | `rgba(238, 13, 219, 0.1)` | "Storage" / "Data" |
| Category C | `#19E306` | `#F2F5E1` | "AI" / "Intelligence" |
| Category D | `#9616FF` | `#F8EBEE` | "Media" / "Edge" |

These are placeholders — swap to your product's category palette. The goal is a small set of visually distinct accent colors used only on category labels, NEVER on primary CTAs (the brand accent owns that role).

### 2.4 Semantic Colors

| Purpose | Light Mode | Dark Mode |
|---------|------------|-----------|
| Success | `#16A34A` | `#4ADE80` |
| Warning | `#EAB308` | `#FACC15` |
| Error | `#DC2626` | `#F87171` |
| Info | `#2563EB` | `#60A5FA` |

---

## 3. Typography

### 3.1 Font Families

```css
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Consolas", monospace;
```

**Font Files:**
- `Kunst Grotesk Regular.woff2` (400)
- `Kunst Grotesk Medium.woff2` (500)
- `JetBrains Mono Regular.woff2` (400)

### 3.2 Type Scale

| Name | Size | Line Height | Weight | Usage |
|------|------|-------------|--------|-------|
| `xs` | 12px (0.75rem) | 1.33 | 400 | Badges, captions, footnotes |
| `sm` | 14px (0.875rem) | 1.43 | 400 | Secondary text, labels |
| `base` | 16px (1rem) | 1.5 | 400 | Body text |
| `lg` | 18px (1.125rem) | 1.56 | 400/500 | Large body, subheadings |
| `xl` | 20px (1.25rem) | 1.4 | 500 | Section titles |
| `2xl` | 24px (1.5rem) | 1.33 | 500 | Card headings |
| `3xl` | 30px (1.875rem) | 1.2 | 500 | Section headings |
| `4xl` | 36px (2.25rem) | 1.11 | 500 | Page headings |
| `5xl` | 48px (3rem) | 1.0 | 500 | Hero headings |

### 3.3 Font Weights

| Weight | Value | Usage |
|--------|-------|-------|
| Normal | 400 | Body text, descriptions |
| Medium | 500 | Headings, buttons, emphasis |

### 3.4 Letter Spacing

| Context | Value | CSS |
|---------|-------|-----|
| Headings | -0.02em | `letter-spacing: -0.02em` |
| Body | Normal | `letter-spacing: normal` |
| Uppercase labels | 0.05em | `letter-spacing: 0.05em` |
| Logo text | -0.46px | `letter-spacing: -0.46px` |

### 3.5 Text Rendering

```css
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
```

---

## 4. Spacing System

### 4.1 Base Unit

```css
--spacing-unit: 4px;
```

### 4.2 Spacing Scale

| Token | Value | Pixels | Common Usage |
|-------|-------|--------|--------------|
| `0` | 0 | 0px | Reset |
| `0.5` | 0.125rem | 2px | Tiny gaps |
| `1` | 0.25rem | 4px | Tight spacing |
| `1.5` | 0.375rem | 6px | Small gaps |
| `2` | 0.5rem | 8px | Default small padding |
| `3` | 0.75rem | 12px | Input padding, card gaps |
| `4` | 1rem | 16px | Standard padding |
| `5` | 1.25rem | 20px | Medium spacing |
| `6` | 1.5rem | 24px | Section padding (mobile) |
| `8` | 2rem | 32px | Large padding |
| `10` | 2.5rem | 40px | Section gaps |
| `12` | 3rem | 48px | Large section gaps |
| `16` | 4rem | 64px | Hero padding |
| `20` | 5rem | 80px | Major sections |
| `24` | 6rem | 96px | Max section spacing |

### 4.3 Common Spacing Patterns

```css
/* Card padding */
padding: 24px;  /* p-6 */

/* Input padding */
padding: 12px;  /* p-3 */

/* Button padding */
padding: 12px 24px;  /* py-3 px-6 */

/* Section padding (responsive) */
padding: 32px 16px;  /* Mobile */
padding: 48px 32px;  /* Tablet */
padding: 64px 48px;  /* Desktop */

/* Grid gaps */
gap: 16px;  /* Cards */
gap: 24px;  /* Sections */
```

---

## 5. Border Radius

| Token | Value | Usage |
|-------|-------|-------|
| `rounded-sm` | 4px | Small badges |
| `rounded` | 6px | Tags, small elements |
| `rounded-md` | 8px | Inputs |
| `rounded-lg` | 12px | Icon containers, panels |
| `rounded-xl` | 16px | Hero sections |
| `rounded-2xl` | 20px | Large hero sections |
| `rounded-full` | 9999px | Buttons, pills, avatars |
| `rounded-none` | 0 | Cards (sharp edges) |

### Common Patterns

```css
/* Buttons - always fully rounded */
border-radius: 9999px;

/* Cards - sharp edges */
border-radius: 0;

/* Inputs */
border-radius: 8px;

/* Hero sections (desktop) */
border-radius: 16px;

/* Progress bars */
border-radius: 9999px;

/* Icon containers */
border-radius: 8px;
```

---

## 6. Shadow System

### 6.1 Shadow Stack (Signature Effect)

Used on hero sections and elevated cards for depth with inner glow.

```css
/* Light Mode */
--shadow-stack: 
  1px 6px 6px 0 rgba(255, 255, 255, 0.2) inset,
  0 0 0px 0 rgba(255, 255, 255, 0.35) inset,
  0 4px 12px 0 rgba(0, 0, 0, 0.02),
  0 2px 12px 0 rgba(0, 0, 0, 0.03);

/* Dark Mode */
--shadow-stack-dark:
  1px 6px 16px 0 rgba(255, 255, 255, 0.05) inset,
  0 4px 12px 0 rgba(0, 0, 0, 0.02),
  0 2px 12px 0 rgba(0, 0, 0, 0.03);
```

### 6.2 Utility Shadows

```css
/* Subtle shadow for cards */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

/* Standard card shadow */
--shadow-card: 
  0 1px 3px rgba(82, 16, 0, 0.04),
  0 4px 12px rgba(82, 16, 0, 0.02);

/* Elevated shadow */
--shadow-lg: 
  0 10px 15px -3px rgba(0, 0, 0, 0.1),
  0 4px 6px -4px rgba(0, 0, 0, 0.1);

/* Focus ring shadow */
--shadow-focus: 0 0 0 3px rgba(255, 72, 1, 0.2);
```

---

## 7. Animation System

### 7.1 Timing Functions

```css
/* Standard ease-out (default for most transitions) */
--ease-out: cubic-bezier(0, 0, 0.2, 1);

/* Button interactions */
--ease-button: cubic-bezier(0.25, 0.46, 0.45, 0.94);

/* Active/press states */
--ease-active: cubic-bezier(0.55, 0.085, 0.68, 0.53);

/* Smooth deceleration */
--ease-decel: cubic-bezier(0.4, 0, 0.2, 1);
```

### 7.2 Duration Scale

| Token | Value | Usage |
|-------|-------|-------|
| `--duration-instant` | 100ms | Micro-interactions |
| `--duration-fast` | 150ms | Default transitions |
| `--duration-normal` | 200ms | Hover states |
| `--duration-medium` | 300ms | Theme transitions |
| `--duration-slow` | 500ms | Complex animations |
| `--duration-long` | 1000ms | Page transitions |

### 7.3 Standard Transitions

```css
/* Color transitions (default) */
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;

/* Button transitions */
transition: all 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);

/* Card hover */
transition: box-shadow 0.2s ease, transform 0.2s ease;

/* Input focus */
transition: border-color 0.15s ease, box-shadow 0.15s ease;
```

### 7.4 Keyframe Animations

```css
/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slide up */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Pulse (loading) */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Progress bar fill */
@keyframes progressFill {
  from { width: 0; }
  to { width: var(--progress-width); }
}

/* Infinite scroll (logos) */
@keyframes infiniteScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
```

### 7.5 Framer Motion Presets (React)

```javascript
// Fade in
const fadeIn = {
  initial: { opacity: 0 },
  animate: { opacity: 1 },
  transition: { duration: 0.3 }
};

// Slide up
const slideUp = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94] }
};

// Stagger children
const staggerContainer = {
  animate: { transition: { staggerChildren: 0.1 } }
};

// Scale on hover
const scaleHover = {
  whileHover: { scale: 1.02 },
  whileTap: { scale: 0.98 }
};

// Button press
const buttonPress = {
  whileTap: { scale: 0.98, y: 1 }
};
```

---

## 8. Layout System

### 8.1 Container Widths

| Token | Value | Usage |
|-------|-------|-------|
| `--container-sm` | 640px | Narrow content |
| `--container-md` | 768px | Medium content |
| `--container-lg` | 1024px | Standard content |
| `--container-xl` | 1200px | Wide content |
| `--container-2xl` | 1480px | Full-width sections |

### 8.2 Breakpoints

| Name | Min Width | Usage |
|------|-----------|-------|
| `sm` | 640px | Large phones |
| `md` | 768px | Tablets |
| `lg` | 1024px | Laptops |
| `xl` | 1280px | Desktops |
| `2xl` | 1536px | Large screens |

### 8.3 Grid Patterns

```css
/* 2-column grid */
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;

/* 3-column grid */
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;

/* 4-column grid */
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;

/* Calculator layout (2 columns, different widths) */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;

/* Responsive grid */
display: grid;
grid-template-columns: repeat(1, 1fr);  /* Mobile */
grid-template-columns: repeat(2, 1fr);  /* md: */
grid-template-columns: repeat(3, 1fr);  /* lg: */
```

### 8.4 Bento Grid

```css
/* Bento layout with varying sizes */
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 8px;

/* Bento cell sizes */
.bento-sm { grid-column: span 4; }    /* 1/3 width */
.bento-md { grid-column: span 6; }    /* 1/2 width */
.bento-lg { grid-column: span 8; }    /* 2/3 width */
.bento-full { grid-column: span 12; } /* Full width */
```

---

## 9. Dark Mode Implementation

### 9.1 Detection Script

Place in `<head>` before any styles load:

```html
<script>
(function() {
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.documentElement.classList.add('dark');
  }
})();
</script>
```

### 9.2 CSS Token Mapping

```css
:root {
  --lp-accent: #FF4801;
  --lp-text: #521000;
  --lp-text-muted: rgba(82, 16, 0, 0.6);
  --lp-bg-100: #FFFBF5;
  --lp-bg-200: #FFFDFB;
  --lp-border: #EBD5C1;
}

:root.dark, html.dark {
  --lp-accent: #F14602;
  --lp-text: #F0E3DE;
  --lp-text-muted: rgba(255, 253, 251, 0.56);
  --lp-bg-100: #121212;
  --lp-bg-200: #191817;
  --lp-border: rgba(240, 227, 222, 0.13);
}
```

### 9.3 Theme Transition

```css
html.theme-transitioning,
html.theme-transitioning * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
```

### 9.4 System Preference Listener

```javascript
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', (e) => {
  document.documentElement.classList.toggle('dark', e.matches);
});
```

---

## 10. Accessibility

### 10.1 Focus States

```css
/* Default focus ring */
:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 2px;
}

/* Button focus */
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 72, 1, 0.3);
}

/* Input focus */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--lp-accent);
  box-shadow: 0 0 0 3px rgba(255, 72, 1, 0.1);
}
```

### 10.2 Disabled States

```css
:disabled,
[disabled],
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
```

### 10.3 Error States

```css
[aria-invalid="true"],
.input-error {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.error-message {
  color: #DC2626;
  font-size: 14px;
  margin-top: 4px;
}
```

### 10.4 Screen Reader Utilities

```css
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
```

### 10.5 Selection Styling

```css
::selection {
  background-color: rgba(255, 72, 1, 0.2);
  color: var(--lp-text);
}
```

---

## 11. Decorative Elements

### 11.1 Corner Brackets

Signature decorative element for cards:

```css
/* Corner bracket container */
.corner-brackets {
  position: relative;
}

/* Individual bracket */
.corner-bracket {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid var(--lp-border);
  border-radius: 1.5px;
  background: var(--lp-bg-100);
}

/* Positions */
.corner-bracket.top-left { top: -4px; left: -4px; }
.corner-bracket.top-right { top: -4px; right: -4px; }
.corner-bracket.bottom-left { bottom: -4px; left: -4px; }
.corner-bracket.bottom-right { bottom: -4px; right: -4px; }
```

### 11.2 Dot Pattern Background

```css
.dot-pattern {
  background-image: radial-gradient(
    circle,
    var(--lp-border) 0.75px,
    transparent 0.75px
  );
  background-size: 12px 12px;
}
```

### 11.3 Dashed Line Borders

```css
/* Vertical dashed line */
.dashed-line-vertical {
  width: 1px;
  background-image: linear-gradient(
    to bottom,
    var(--lp-border) 50%,
    transparent 50%
  );
  background-size: 1px 16px;
  background-repeat: repeat-y;
}

/* Horizontal dashed line */
.dashed-line-horizontal {
  height: 1px;
  background-image: linear-gradient(
    to right,
    var(--lp-border) 50%,
    transparent 50%
  );
  background-size: 16px 1px;
  background-repeat: repeat-x;
}
```

### 11.4 Gradient Masks

```css
/* Fade edges */
.fade-left {
  mask-image: linear-gradient(to right, transparent, black 20%);
}

.fade-right {
  mask-image: linear-gradient(to left, transparent, black 20%);
}

.fade-both {
  mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}
```

---

## 12. Component Quick Reference

### Buttons

| Variant | Background | Text | Border |
|---------|------------|------|--------|
| Primary | `#FFFBF5` | `#FF4801` | `#FFFBF5` |
| Secondary | `#FF4801` | `#FFFBF5` | transparent |
| Ghost | transparent | `#FF4801` | `#EBD5C1` |
| Outline | transparent | `#521000` | `#EBD5C1` |

### Cards

| Variant | Background | Border | Shadow |
|---------|------------|--------|--------|
| Default | `#FFFDFB` | `#EBD5C1` | shadow-card |
| Elevated | `#FFFBF5` | `#EBD5C1` | shadow-lg |
| Interactive | `#FFFDFB` | `#EBD5C1` | hover: shadow-lg |

### Inputs

| State | Border | Shadow |
|-------|--------|--------|
| Default | `#EBD5C1` | none |
| Focus | `#FF4801` | `0 0 0 3px rgba(255,72,1,0.1)` |
| Error | `#DC2626` | `0 0 0 3px rgba(220,38,38,0.1)` |
| Disabled | `#EBD5C1` | none, opacity: 0.5 |

---

## 13. File Structure Recommendation

```
project/
├── styles/
│   ├── tokens.css          # CSS custom properties
│   ├── base.css            # Reset, typography, global styles
│   ├── components/
│   │   ├── buttons.css
│   │   ├── cards.css
│   │   ├── forms.css
│   │   ├── navigation.css
│   │   └── calculator.css
│   └── utilities.css       # Helper classes
├── fonts/
│   ├── Kunst Grotesk Regular.woff2
│   ├── Kunst Grotesk Medium.woff2
│   └── JetBrains Mono Regular.woff2
└── components/             # React/Vue components
    ├── Button.tsx
    ├── Card.tsx
    ├── Input.tsx
    └── Calculator/
        ├── InputPanel.tsx
        ├── OutputPanel.tsx
        └── ComparisonBar.tsx
```

---

## 14. CSS Custom Properties (Full Set)

Copy this into your project's CSS:

```css
:root {
  /* Colors - Primary */
  --lp-accent: #FF4801;
  --lp-accent-hover: #FF7038;
  --lp-accent-light: rgba(255, 72, 1, 0.1);
  
  /* Colors - Text */
  --lp-text: #521000;
  --lp-text-muted: rgba(82, 16, 0, 0.6);
  --lp-text-subtle: rgba(82, 16, 0, 0.38);
  
  /* Colors - Backgrounds */
  --lp-bg-page: #F5F1EB;
  --lp-bg-100: #FFFBF5;
  --lp-bg-200: #FFFDFB;
  --lp-bg-300: #FEF7ED;
  
  /* Colors - Borders */
  --lp-border: #EBD5C1;
  --lp-border-light: rgba(235, 213, 193, 0.5);
  
  /* Colors - Semantic */
  --lp-success: #16A34A;
  --lp-warning: #EAB308;
  --lp-error: #DC2626;
  --lp-info: #2563EB;
  
  /* Colors - Product Categories */
  --lp-compute: #0A95FF;
  --lp-storage: #EE0DDB;
  --lp-ai: #19E306;
  --lp-media: #9616FF;
  
  /* Colors - Provider Comparisons */
  --lp-aws: #FF9900;
  --lp-gcp: #4285F4;
  --lp-azure: #0078D4;
  
  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
  
  /* Spacing */
  --spacing-unit: 4px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-focus: 0 0 0 3px rgba(255, 72, 1, 0.2);
  
  /* Transitions */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-button: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  
  /* Containers */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1480px;
}
```

---

## 15. Forensic Visual Analysis

> **Design Language DNA & Animation Physics**
> A specification so precise that a developer could rebuild it without seeing the original.

### 15.1 Visual Hierarchy & Spatial Logic

#### Grid System

| Aspect | Value | Notes |
|--------|-------|-------|
| **Layout Type** | Asymmetrical fluid with max-width constraints | NOT a strict 12-column grid |
| **Max Container** | `1480px` (homepage / wide marketing) / `1024px` (focused content / docs) | Content centered with `mx-auto` |
| **Content Width** | `64rem` (1024px) for tools/calculators | Narrower for focused interfaces |
| **Grid Columns** | 1-col mobile → 2-col tablet → responsive desktop | Uses CSS Grid, not flexbox grids |

#### Spacing Constants (The "Airiness")

```
Section Padding (Y-axis):
├── Mobile:   32px (py-8)
├── Tablet:   48px (pt-12)
└── Desktop:  64px-80px (py-16 to py-20)

Grid Gaps (X-axis):
├── Card grids:     24px (gap-6)
├── Form elements:  24px (gap-6)
├── Tight grids:    12px (gap-3)
└── Use-case cards: 12px (gap-3)

Component Internal Padding:
├── Cards:          24px (p-6) to 32px (p-8)
├── Buttons:        12px 24px (py-3 px-6)
├── Inputs:         12px (p-3)
└── Hero sections:  48px-64px (p-12 to p-16)
```

#### Density Classification

| Context | Density | Characteristics |
|---------|---------|-----------------|
| **Landing pages** | Expressive (Marketing) | Generous whitespace, large text, breathing room |
| **Calculator tools** | Moderate | Balanced density, functional spacing |
| **Data tables** | Compact | Tighter padding (py-3 pr-4) |

### 15.2 Color Science & Elevation

#### Primary Palette (Extracted Exact Values)

```css
/* Core landing-page palette */
:root {
  --lp-accent: #ff4801;        /* Primary accent - EXACT */
  --lp-text: #521000;          /* Primary text - warm brown */
  --lp-bg-page: #fffbf5;       /* Page background - warm cream */
  --lp-border: #EBD5C1;        /* Border color */
}

/* Background Layers (Light Mode) */
--lp-bg-100: rgb(255, 251, 245);  /* #FFFBF5 - Primary */
--lp-bg-200: rgb(255, 253, 251);  /* #FFFDFB - Cards/elevated */
--lp-bg-300: rgb(254, 247, 237);  /* #FEF7ED - Hover states */

/* Text Opacity Variations */
--lp-text-muted: rgba(82, 16, 0, 0.7);   /* #521000b3 - Secondary */
--lp-text-subtle: rgba(82, 16, 0, 0.4);  /* #52100066 - Tertiary */
```

#### Semantic Colors (from components)

| Purpose | Color | Usage Example |
|---------|-------|---------------|
| Success | `#16A34A` (green-600) | Savings badges, positive indicators |
| Success Background | `#DCF7E3` (green-100) | Badge backgrounds |
| Warning | `#EAB308` | Caution states |
| Error | `#DC2626` | Error borders, messages |
| Info | `#2563EB` | Informational highlights |

#### Depth Strategy

**NO Glassmorphism** - The design uses:

1. **Solid backgrounds** with subtle layering (`bg-100` → `bg-200` → `bg-300`)
2. **Border lines** for separation (1px solid `#EBD5C1`)
3. **Minimal shadows** - shadows are subtle, not dramatic

```css
/* Card Shadow (Light/Subtle) */
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);

/* Focus Shadow */
box-shadow: 0 0 0 3px rgba(255, 72, 1, 0.1);

/* NO backdrop-filter: blur() usage */
/* NO heavy drop shadows */
```

### 15.3 Typography & Micro-Copy Specs

#### Type Personality: **Grotesk Sans**

The typography uses **Inter** - a modern grotesk with humanist touches. Fallback chain:
```css
font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 
             Segoe UI, sans-serif, ui-sans-serif, system-ui, sans-serif;
```

#### Monospace for Code
```css
font-family: JetBrains Mono, ui-monospace, SFMono-Regular, SF Mono, 
             Monaco, Consolas, monospace;
```

#### Hierarchy Definition

| Level | Size | Weight | Line Height | Letter Spacing | Example |
|-------|------|--------|-------------|----------------|---------|
| **h1** | 24px-30px (`text-2xl` to `text-3xl`) | 500 (medium) | 1.2-1.33 | `-0.035em` | "Pricing", "Build faster" |
| **h2** | 18px (`text-lg`) | 500 | 1.4 | normal | "Pricing Details" |
| **h3** | 16px (`text-base`) | 500 | 1.5 | normal | Form labels |
| **p** (body) | 14px-16px (`text-sm` to `text-base`) | 400 | 1.4-1.5 | normal | Descriptions |
| **p** (muted) | 14px (`text-sm`) | 400 | 1.4 | normal | Secondary info |
| **small** | 12px (`text-xs`) | 400 | 1.33 | normal | Footnotes, captions |

#### Typography Style: **Tight and Medium Weight**

- **Headings**: Tighter tracking (`letter-spacing: -0.035em`)
- **Body**: Normal tracking
- **Weight distribution**: Primarily 400 (regular) and 500 (medium)
- **NO bold (700)** used in the interfaces

### 15.4 Component Anatomy

#### The "Radius" Strategy

| Element | Radius | CSS |
|---------|--------|-----|
| **Buttons** | Hyper-rounded | `border-radius: 9999px` (rounded-full) |
| **Inputs** | Soft | `border-radius: 8px` (rounded-lg) |
| **Cards** | Sharp | `border-radius: 0` (no rounding) |
| **Progress bars** | Hyper-rounded | `border-radius: 9999px` |
| **Dropdowns** | Soft | `border-radius: 8px` |
| **Badges/Pills** | Hyper-rounded | `border-radius: 9999px` |
| **Hero sections** | Large soft | `border-radius: 16px` (md:rounded-2xl) |

#### Interactive States

**Hover Effects:**
```css
/* Buttons - Dashed border reveal */
.button:hover {
  border-style: dashed;
  opacity: 0.95;
}

/* Cards - Dashed border */
.card:hover {
  border-style: dashed;
}

/* Links - Underline */
.link:hover {
  text-decoration: underline;
}

/* Background shift */
.interactive:hover {
  background-color: var(--lp-bg-300);  /* Warmer cream */
}
```

**Active/Press States:**
```css
button:active {
  transform: translateY(1px);
  scale: 0.98;
}
```

**Focus States:**
```css
:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 2px;
}

input:focus {
  border-color: var(--lp-accent);
  box-shadow: 0 0 0 3px rgba(255, 72, 1, 0.1);
}
```

**NO "Grow" effects, "Glow" borders, or "Shimmer" overlays** - The design is subtle and professional.

#### Corner Brackets (Signature Element)

The 8px corner bracket decorations are the **signature decorative element** of this design language — they appear at the four outer corners of cards and feature blocks, suggesting precision and crafted technical detail without adding visual noise:

```html
<!-- Corner bracket structure -->
<div class="pointer-events-none absolute inset-0 z-10 select-none">
  <div class="absolute bg-cf-bg-100" 
       style="top:-4px;left:-4px;width:8px;height:8px;border:1px solid #EBD5C1;border-radius:1.5px"></div>
  <div class="absolute bg-cf-bg-100" 
       style="top:-4px;right:-4px;width:8px;height:8px;border:1px solid #EBD5C1;border-radius:1.5px"></div>
  <div class="absolute bg-cf-bg-100" 
       style="left:-4px;bottom:-4px;width:8px;height:8px;border:1px solid #EBD5C1;border-radius:1.5px"></div>
  <div class="absolute bg-cf-bg-100" 
       style="right:-4px;bottom:-4px;width:8px;height:8px;border:1px solid #EBD5C1;border-radius:1.5px"></div>
</div>
```

### 15.5 Animation Physics (The Motion Signature)

#### The Easing Curves

```css
/* Standard ease-out (most transitions) */
--ease-standard: cubic-bezier(0, 0, 0.2, 1);  /* Tailwind's ease-out */

/* Button interactions - High-end feel */
--ease-button: cubic-bezier(0.25, 0.46, 0.45, 0.94);

/* Active/press response */
--ease-active: cubic-bezier(0.55, 0.085, 0.68, 0.53);

/* Page entrance - Apple-style smooth deceleration */
--ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
```

#### Duration Scale

| Context | Duration | Usage |
|---------|----------|-------|
| Instant feedback | `0.15s` (150ms) | Color changes, opacity |
| Standard transitions | `0.16s` (160ms) | Button presses |
| Hover effects | `0.2s` (200ms) | Background color shifts |
| Complex animations | `0.5s` (500ms) | Progress bars, entrance |
| Page transitions | `2s` (2000ms) | Background fade-in |

#### Orchestration: **Fade-Slide as Single Block**

The content does NOT stagger in one-by-one. Instead, entire sections fade and slide together:

```css
/* Page entrance animation */
.animate-in {
  animation: fadeSlideUp 0.5s ease-out forwards;
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Background lines fade in slowly */
.fade-in {
  transition: opacity 2000ms ease-out;
  transition-delay: 100ms;
}
```

#### Micro-interactions

**Button Press Physics:**
```css
button {
  transition: scale 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              translate 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

button:active {
  scale: 0.98;
  transform: translateY(1px);
}
```

**Progress Bar Animation:**
```css
.progress-bar {
  transition: width 0.5s ease-out;
}
```

**Slider Thumb:**
```css
.slider-thumb {
  cursor: grab;
  transition: box-shadow 0.15s ease;
}

.slider-thumb:active {
  cursor: grabbing;
}

.slider-thumb:hover {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
```

**NO "Magnetic" follow effects or "Tilt" effects** - Interactions are clean and direct.

### 15.6 Technical Deliverables

#### Tailwind Configuration

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'cf': {
          'orange': '#FF4801',
          'orange-hover': '#FF7038',
          'orange-light': 'rgba(255, 72, 1, 0.06)',
          'text': '#521000',
          'text-muted': 'rgba(82, 16, 0, 0.7)',
          'text-subtle': 'rgba(82, 16, 0, 0.4)',
          'bg-page': '#FFFBF5',
          'bg-100': '#FFFBF5',
          'bg-200': '#FFFDFB',
          'bg-300': '#FEF7ED',
          'border': '#EBD5C1',
          'border-light': 'rgba(235, 213, 193, 0.5)',
        },
        'aws-orange': '#FF9900',
        'gcp-blue': '#4285F4',
      },
      fontFamily: {
        sans: ['Inter', '-apple-system', 'system-ui', 'BlinkMacSystemFont', 'Segoe UI', 'sans-serif'],
        mono: ['JetBrains Mono', 'ui-monospace', 'SFMono-Regular', 'SF Mono', 'Monaco', 'Consolas', 'monospace'],
      },
      fontSize: {
        'sm': ['0.9rem', { lineHeight: '1.4' }],
        'base': ['1rem', { lineHeight: '1.5' }],
        'lg': ['1.125rem', { lineHeight: '1.75rem' }],
        '2xl': ['1.5rem', { lineHeight: '2rem' }],
        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
      },
      letterSpacing: {
        'tight-heading': '-0.035em',
        'logo': '-0.46px',
      },
      borderRadius: {
        'lg': '0.5rem',
        'xl': '0.75rem',
        '2xl': '1rem',
      },
      transitionTimingFunction: {
        'button': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
        'active': 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
        'entrance': 'cubic-bezier(0.16, 1, 0.3, 1)',
      },
      transitionDuration: {
        '160': '160ms',
        '2000': '2000ms',
      },
      animation: {
        'float-subtle': 'float-subtle 3s ease-in-out infinite',
        'dash-draw': 'dashdraw 0.5s linear infinite',
      },
      keyframes: {
        'float-subtle': {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-3px)' },
        },
        'dashdraw': {
          '0%': { strokeDashoffset: '10' },
        },
      },
      boxShadow: {
        'focus': '0 0 0 3px rgba(255, 72, 1, 0.1)',
        'card': '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
      },
      maxWidth: {
        '5xl': '64rem',
        '8xl': '1480px',
      },
    },
  },
  plugins: [],
}
```

#### CSS Variables Block

```css
:root {
  /* === COLORS === */
  /* Primary */
  --lp-accent: #FF4801;
  --lp-accent-hover: #FF7038;
  --lp-accent-light: rgba(255, 72, 1, 0.06);
  
  /* Text */
  --lp-text: #521000;
  --lp-text-muted: rgba(82, 16, 0, 0.7);
  --lp-text-subtle: rgba(82, 16, 0, 0.4);
  
  /* Backgrounds */
  --lp-bg-page: #FFFBF5;
  --lp-bg-100: #FFFBF5;
  --lp-bg-200: #FFFDFB;
  --lp-bg-300: #FEF7ED;
  
  /* Borders */
  --lp-border: #EBD5C1;
  --lp-border-light: rgba(235, 213, 193, 0.5);
  
  /* Semantic */
  --lp-success: #16A34A;
  --lp-success-bg: #DCF7E3;
  --lp-warning: #EAB308;
  --lp-error: #DC2626;
  
  /* Provider Colors */
  --aws-orange: #FF9900;
  --gcp-blue: #4285F4;
  
  /* === TYPOGRAPHY === */
  --font-sans: "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, monospace;
  
  /* === SPACING === */
  --spacing-unit: 4px;
  
  /* === BORDER RADIUS === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  
  /* === SHADOWS === */
  --shadow-focus: 0 0 0 3px rgba(255, 72, 1, 0.1);
  --shadow-card: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  
  /* === TRANSITIONS === */
  --ease-standard: cubic-bezier(0, 0, 0.2, 1);
  --ease-button: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-active: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 500ms;
  
  /* === CONTAINERS === */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1480px;
}

/* Dark Mode */
:root.dark {
  --lp-accent: #F14602;
  --lp-text: #F0E3DE;
  --lp-text-muted: rgba(255, 253, 251, 0.56);
  --lp-bg-page: #0D0D0D;
  --lp-bg-100: #121212;
  --lp-bg-200: #191817;
  --lp-bg-300: #2A2927;
  --lp-border: rgba(240, 227, 222, 0.13);
}

/* Base Styles */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background-color: var(--lp-bg-page);
  color: var(--lp-text);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

/* Focus States */
:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 2px;
}

input:focus,
select:focus {
  border-color: var(--lp-accent);
  box-shadow: var(--shadow-focus);
}

/* Transitions */
button,
a,
input,
select {
  transition: all 0.2s ease-in-out;
}
```

#### Framer Motion Variants

```javascript
// framer-motion-variants.js

// Page entrance animation
export const pageEntrance = {
  initial: { opacity: 0 },
  animate: { 
    opacity: 1,
    transition: { 
      duration: 0.5, 
      ease: [0.16, 1, 0.3, 1] 
    }
  }
};

// Section slide-up
export const sectionSlideUp = {
  initial: { opacity: 0, y: 20 },
  animate: { 
    opacity: 1, 
    y: 0,
    transition: { 
      duration: 0.4, 
      ease: [0.25, 0.46, 0.45, 0.94] 
    }
  }
};

// Stagger container (for card grids)
export const staggerContainer = {
  animate: {
    transition: {
      staggerChildren: 0.08,
      delayChildren: 0.1
    }
  }
};

// Stagger child item
export const staggerItem = {
  initial: { opacity: 0, y: 16 },
  animate: { 
    opacity: 1, 
    y: 0,
    transition: { 
      duration: 0.35, 
      ease: [0.25, 0.46, 0.45, 0.94] 
    }
  }
};

// Button hover and tap
export const buttonInteraction = {
  whileHover: { scale: 1.01 },
  whileTap: { 
    scale: 0.98, 
    y: 1,
    transition: { 
      duration: 0.16, 
      ease: [0.55, 0.085, 0.68, 0.53] 
    }
  }
};

// Card hover
export const cardHover = {
  initial: { scale: 1 },
  whileHover: { 
    scale: 1.01,
    transition: { 
      duration: 0.2, 
      ease: [0.25, 0.46, 0.45, 0.94] 
    }
  }
};

// Progress bar fill
export const progressFill = {
  initial: { width: 0 },
  animate: (width) => ({
    width: `${width}%`,
    transition: { 
      duration: 0.5, 
      ease: "easeOut" 
    }
  })
};

// Floating animation (for icons/decorations)
export const floatSubtle = {
  animate: {
    y: [0, -3, 0],
    transition: {
      duration: 3,
      ease: "easeInOut",
      repeat: Infinity
    }
  }
};

// Background fade-in (slow entrance)
export const backgroundFadeIn = {
  initial: { opacity: 0 },
  animate: { 
    opacity: 1,
    transition: { 
      duration: 2, 
      delay: 0.1,
      ease: "easeOut" 
    }
  }
};

// Usage example with React
/*
import { motion } from 'framer-motion';
import { pageEntrance, staggerContainer, staggerItem } from './framer-motion-variants';

function Page() {
  return (
    <motion.main {...pageEntrance}>
      <motion.div 
        variants={staggerContainer}
        initial="initial"
        animate="animate"
        className="grid grid-cols-3 gap-6"
      >
        {items.map((item) => (
          <motion.div key={item.id} variants={staggerItem}>
            {item.content}
          </motion.div>
        ))}
      </motion.div>
    </motion.main>
  );
}
*/
```

---

*Synthesized from analysis of warm-cream developer-marketing landing pages. The aesthetic — warm cream backgrounds, brown text, single bold accent for CTAs, corner-bracket decorations — is portable to any B2B / developer-tools / dev-adjacent product brand.*



# ===== SNIPPETS.md =====

# Landing Page Design - Component Snippets

> **Copy-paste ready components** for building warm-cream landing-page interfaces.
> Each snippet includes React + Tailwind AND Vanilla HTML versions.

---

## Table of Contents

1. [Buttons](#buttons)
2. [Cards](#cards)
3. [Forms](#forms)
4. [Calculator Tools](#calculator-tools)
5. [Navigation](#navigation)
6. [Hero Sections](#hero-sections)
7. [Data Display](#data-display)
8. [Layout](#layout)
9. [Decorative](#decorative)

---

# Buttons

## BTN-PRIMARY

Primary CTA button - cream background, orange text, fully rounded.

### React + Tailwind

```jsx
<button className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-full font-medium bg-[#FFFBF5] text-[#FF4801] border border-[#FFFBF5] transition-all duration-150 ease-out hover:bg-transparent hover:border-[#FF4801] active:scale-[0.98] active:translate-y-[1px] focus:outline-none focus:ring-2 focus:ring-[#FF4801]/30 disabled:opacity-50 disabled:cursor-not-allowed">
  Get started
</button>
```

### Vanilla HTML

```html
<button style="
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  background: #FFFBF5;
  color: #FF4801;
  border: 1px solid #FFFBF5;
  cursor: pointer;
  transition: all 0.15s ease;
" onmouseover="this.style.background='transparent'; this.style.borderColor='#FF4801';" onmouseout="this.style.background='#FFFBF5'; this.style.borderColor='#FFFBF5';">
  Get started
</button>
```

---

## BTN-SECONDARY

Secondary button - orange background, white text.

### React + Tailwind

```jsx
<button className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-full font-medium bg-[#FF4801] text-white border border-transparent transition-all duration-150 ease-out hover:opacity-95 hover:border-dashed hover:border-white/50 active:scale-[0.98] active:tr

…(truncated)