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

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)

2.2 Primary Palette (Dark Mode)

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.

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

3. Typography

3.1 Font Families

--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

3.3 Font Weights

3.4 Letter Spacing

3.5 Text Rendering

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

--spacing-unit: 4px;

4.2 Spacing Scale

4.3 Common Spacing Patterns

/* 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

Common Patterns

/* 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.

/* 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

/* 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

/* 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

7.3 Standard Transitions

/* 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

/* 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)

// 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

8.2 Breakpoints

8.3 Grid Patterns

/* 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

/* 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:

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

9.2 CSS Token Mapping

: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

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

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

/* 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

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

10.3 Error States

[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

.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

::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:

/* 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

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

11.3 Dashed Line Borders

/* 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

/* 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

Cards

Inputs

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:

: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

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

15.2 Color Science & Elevation

Primary Palette (Extracted Exact Values)

/* 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)

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

/* 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:

font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 
             Segoe UI, sans-serif, ui-sans-serif, system-ui, sans-serif;

Monospace for Code

font-family: JetBrains Mono, ui-monospace, SFMono-Regular, SF Mono, 
             Monaco, Consolas, monospace;

Hierarchy Definition

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

Interactive States

Hover Effects:

/* 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:

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

Focus States:

: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:

<!-- 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

/* 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

Orchestration: Fade-Slide as Single Block

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

/* 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:

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:

.progress-bar {
  transition: width 0.5s ease-out;
}

Slider Thumb:

.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

// 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

: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

// 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
2. Cards
3. Forms
4. Calculator Tools
5. Navigation
6. Hero Sections
7. Data Display
8. Layout
9. Decorative

Buttons

BTN-PRIMARY

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

React + Tailwind

<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

<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;
" this.style.borderColor='#FF4801';" this.style.borderColor='#FFFBF5';">
  Get started
</button>

BTN-SECONDARY

Secondary button - orange background, white text.

React + Tailwind

<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)