frontend-design-landing-page

name

frontend-design-landing-page

description

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.

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

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

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

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

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

/* 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   (, , , );

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

---

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

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

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

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

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

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:

: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;
  
  
  : ;
  : ;
  : ;
  : ;
  
  
  : ;
  : ;
  : ;
  
  
  : , -apple-system, BlinkMacSystemFont, , sans-serif;
  : , , , monospace;
  
  
  : ;
  
  
  : ;
  : ;
  : ;
  : ;
  : ;
  
  
  :    (, , , );
  :    (, , , ),    (, , , );
  :    - (, , , ),    - (, , , );
  :     (, , , );
  
  
  : (, , , );
  : (, , , );
  : ;
  : ;
  : ;
  
  
  : ;
  : ;
  : ;
  : ;
  : ;
}

---

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)

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

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

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:

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

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:

/* 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', , ],
      },
      : {
        : [, { :  }],
        : [, { :  }],
        : [, { :  }],
        : [, { :  }],
        : [, { :  }],
      },
      : {
        : ,
        : ,
      },
      : {
        : ,
        : ,
        : ,
      },
      : {
        : ,
        : ,
        : ,
      },
      : {
        : ,
        : ,
      },
      : {
        : ,
        : ,
      },
      : {
        : {
          : { :  },
          : { :  },
        },
        : {
          : { :  },
        },
      },
      : {
        : ,
        : ,
      },
      : {
        : ,
        : ,
      },
    },
  },
  : [],
}

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;
  
  
  : ;
  : ;
  
  
  : , -apple-system, system-ui, BlinkMacSystemFont, , sans-serif;
  : , ui-monospace, SFMono-Regular, , Monaco, Consolas, monospace;
  
  
  : ;
  
  
  : ;
  : ;
  : ;
  : ;
  
  
  :     (, , , );
  :    - (,,,),    - (,,,);
  :    - (,,,),    - (,,,);
  
  
  : (, , , );
  : (, , , );
  : (, , , );
  : (, , , );
  
  : ;
  : ;
  : ;
  : ;
  
  
  : ;
  : ;
  : ;
  : ;
  : ;
}


 {
  : ;
  : ;
  : (, , , );
  : ;
  : ;
  : ;
  : ;
  : (, , , );
}


 {
  -webkit-: antialiased;
  -moz-osx-: grayscale;
}

 {
  : ;
  : (--lp-bg-page);
  : (--lp-text);
  : (--font-sans);
  : hidden;
}


 {
  :  solid (--lp-accent);
  : ;
}

,
 {
  : (--lp-accent);
  : (--shadow-focus);
}


,
,
,
 {
  : all  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: , :  },
  : { 
    : , 
    : ,
    : { 
      : , 
      : [, , , ] 
    }
  }
};


  buttonInteraction = {
  : { :  },
  : { 
    : , 
    : ,
    : { 
      : , 
      : [, , , ] 
    }
  }
};


  cardHover = {
  : { :  },
  : { 
    : ,
    : { 
      : , 
      : [, , , ] 
    }
  }
};


  progressFill = {
  : { :  },
  :  ({
    : ,
    : { 
      : , 
      :  
    }
  })
};


  floatSubtle = {
  : {
    : [, -, ],
    : {
      : ,
      : ,
      : 
    }
  }
};


  backgroundFadeIn = {
  : { :  },
  : { 
    : ,
    : { 
      : , 
      : ,
      :  
    }
  }
};

---

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

<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:translate-y-[1px] focus:outline-none focus:ring-2 focus:ring-[#FF4801]/30 disabled:opacity-50 disabled:cursor-not-allowed">
  Learn more
</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: #FF4801;
  color: white;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
" onmouseover="this.style.opacity='0.95';" onmouseout="this.style.opacity='1';">
  Learn more
</button>

---

BTN-GHOST

Ghost button - transparent with border, for secondary actions.

React + Tailwind

<button className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-full font-medium bg-transparent text-[#FF4801] border border-[#EBD5C1] transition-all duration-150 ease-out hover:border-dashed hover:border-[#FF4801] hover:text-[#521000] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-[#FF4801]/20 disabled:opacity-50 disabled:cursor-not-allowed">
  View docs
</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: transparent;
  color: #FF4801;
  border: 1px solid #EBD5C1;
  cursor: pointer;
  transition: all 0.15s ease;
" onmouseover="this.style.borderStyle='dashed'; this.style.borderColor='#FF4801';" onmouseout="this.style.borderStyle='solid'; this.style.borderColor='#EBD5C1';">
  View docs
</button>

---

BTN-OUTLINE

Outline button - for less prominent actions.

React + Tailwind

<button className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-full font-medium bg-[#FFFDFB] text-[#521000] border border-[#EBD5C1] transition-all duration-150 ease-out hover:bg-[#FEF7ED] hover:border-dashed active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-[#EBD5C1]/50 disabled:opacity-50 disabled:cursor-not-allowed">
  Cancel
</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: #FFFDFB;
  color: #521000;
  border: 1px solid #EBD5C1;
  cursor: pointer;
  transition: all 0.15s ease;
">
  Cancel
</button>

---

BTN-ICON

Icon-only button with tooltip.

React + Tailwind

<button 
  className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-[#FFFDFB] text-[#521000] border border-[#EBD5C1] transition-all duration-150 ease-out hover:bg-[#FEF7ED] hover:text-[#FF4801] hover:border-[#FF4801] active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-[#FF4801]/20"
  aria-label="Settings"
  title="Settings"
>
  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
  </svg>
</button>

Vanilla HTML

<button style="
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #FFFDFB;
  color: #521000;
  border: 1px solid #EBD5C1;
  cursor: pointer;
  transition: all 0.15s ease;
" aria-label="Settings" title="Settings">
  <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
    <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
    <path stroke-linecap="round" stroke-linejoin="round" d= />
  

---

BTN-LINK

Link styled as text with arrow.

React + Tailwind

<a href="#" className="inline-flex items-center gap-1 font-medium text-[#FF4801] hover:underline hover:underline-offset-4 transition-all duration-150">
  View documentation
  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
  </svg>
</a>

Vanilla HTML

<a href="#" style="
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: #FF4801;
  text-decoration: none;
  transition: all 0.15s ease;
">
  View documentation
  <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
  </svg>
</a>

---

BTN-LOADING

Button with loading spinner state.

React + Tailwind

<button 
  disabled
  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 disabled:opacity-70 disabled:cursor-not-allowed"
>
  <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
  </svg>
  Processing...
</button>

Vanilla HTML

<button disabled 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: #FF4801;
  color: white;
  border: none;
  opacity: 0.7;
  cursor: not-allowed;
">
  <svg width="16" height="16" fill="none" viewBox="0 0 24 24" style="animation: spin 1s linear infinite;">
    <circle opacity="0.25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
    <path opacity="0.75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
  </svg>
  Processing...
</button>
<style>
  @keyframes spin { to { transform: rotate(360deg); } }
</style>

---

Cards

CARD-DEFAULT

Standard card with corner bracket decorations.

React + Tailwind

<div className="relative bg-[#FFFDFB] border border-[#EBD5C1] p-6 shadow-[0_1px_3px_rgba(82,16,0,0.04),0_4px_12px_rgba(82,16,0,0.02)]">
  {/* Corner brackets */}
  <div className="absolute -top-1 -left-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5]" />
  <div className="absolute -top-1 -right-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5]" />
  <div className="absolute -bottom-1 -left-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5]" />
  <div className="absolute -bottom-1 -right-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5]" />
  
  <h3 className="text-lg font-medium text-[#521000] mb-2">Card Title</h3>
  <p className="text-sm text-[#521000]/60 leading-relaxed">
    Card description goes here. This is a standard card with the signature corner bracket decorations.
  </p>
</div>

Vanilla HTML

<div style="
  position: relative;
  background: #FFFDFB;
  border: 1px solid #EBD5C1;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(82,16,0,0.04), 0 4px 12px rgba(82,16,0,0.02);
">
  <!-- Corner brackets -->
  <div style="position: absolute; top: -4px; left: -4px; width: 8px; height: 8px; border: 1px solid #EBD5C1; border-radius: 1.5px; background: #FFFBF5;"></div>
  <div style="position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; border: 1px solid #EBD5C1; border-radius: 1.5px; background: #FFFBF5;"></div>
  <div style="position: absolute; bottom: -4px; left: -4px; width: 8px; height: 8px; border: 1px solid #EBD5C1; border-radius: 1.5px; background: #FFFBF5;"></div>
  <div style="position: absolute; bottom: -4px; right: -4px; width: 8px; height: 8px; border: 1px solid #EBD5C1; border-radius: 1.5px; background: #FFFBF5;"></div>
  
  <h3 style="font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 500; color: #521000; margin: 0 0 8px 0;">Card Title</h3>
  <p style="font-family: 'Inter', sans-serif; font-size: 14px; color: rgba(82,16,0,0.6); line-height: 1.6; margin: 0;">
    Card description goes here. This is a standard card with the signature corner bracket decorations.
  </p>
</div>

---

CARD-FEATURE

Feature card with icon, title, and description.

React + Tailwind

<div className="relative bg-[#FFFDFB] border border-[#EBD5C1] p-6 transition-all duration-200 hover:bg-[#FEF7ED] hover:shadow-lg">
  {/* Corner brackets */}
  <div className="absolute -top-1 -left-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5]" />
  <div className="absolute -top-1 -right-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5]" />
  <div className="absolute -bottom-1 -left-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5]" />
  <div className="absolute -bottom-1 -right-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5]" />
  
  {/* Icon */}
  <div className="w-10 h-10 rounded-lg bg-[#FF4801]/10 flex items-center justify-center mb-4">
    <svg className="w-5 h-5 text-[#FF4801]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
    </svg>
  </div>
  
  <h3 className="text-base font-medium text-[#521000] mb-2">Lightning Fast</>
  
</div>

Vanilla HTML

<div style="
  position: relative;
  background: #FFFDFB;
  border: 1px solid #EBD5C1;
  padding: 24px;
  transition: all 0.2s ease;
">
  <!-- Corner brackets -->
  <div style="position: absolute; top: -4px; left: -4px; width: 8px; height: 8px; border: 1px solid #EBD5C1; border-radius: 1.5px; background: #FFFBF5;"></div>
  <div style="position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; border: 1px solid #EBD5C1; border-radius: 1.5px; background: #FFFBF5;"></div>
  <div style="position: absolute; bottom: -4px; left: -4px; width: 8px; height: 8px; border: 1px solid #EBD5C1; border-radius: 1.5px; background: #FFFBF5;"></div>
  <div style="position: absolute; bottom: -4px; right: -4px; width: 8px; height: 8px; border: 1px solid #EBD5C1; border-radius: 1.5px; background: #FFFBF5;"></div>
  
  <!-- Icon -->
  <div style="width: 40px; height: 40px; border-radius: 8px; background: rgba(255,72,1,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="#FF4801" stroke-width=>
      
    
  
  
  Lightning Fast
  
    Deploy to 300+ locations worldwide. Your code runs milliseconds from your users.
  

---

CARD-STAT

Statistics card with large number and label.

React + Tailwind

<div className="relative bg-[#FFFDFB] border border-[#EBD5C1] p-6 text-center">
  {/* Corner brackets */}
  <div className="absolute -top-1 -left-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5]" />
  <div className="absolute -top-1 -right-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5]" />
  <div className="absolute -bottom-1 -left-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5]" />
  <div className="absolute -bottom-1 -right-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5]" />
  
  <div className="text-3xl font-medium text-[#FF4801] tracking-tight">$0.015</div>
  <div className="text-xs font-mono text-[#521000]/60 uppercase tracking-wider mt-2">per GB / month</div>
</div>

Vanilla HTML

<div style="
  position: relative;
  background: #FFFDFB;
  border: 1px solid #EBD5C1;
  padding: 24px;
  text-align: center;
">
  <!-- Corner brackets -->
  <div style="position: absolute; top: -4px; left: -4px; width: 8px; height: 8px; border: 1px solid #EBD5C1; border-radius: 1.5px; background: #FFFBF5;"></div>
  <div style="position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; border: 1px solid #EBD5C1; border-radius: 1.5px; background: #FFFBF5;"></div>
  <div style="position: absolute; bottom: -4px; left: -4px; width: 8px; height: 8px; border: 1px solid #EBD5C1; border-radius: 1.5px; background: #FFFBF5;"></div>
  <div style="position: absolute; bottom: -4px; right: -4px; width: 8px; height: 8px; border: 1px solid #EBD5C1; border-radius: 1.5px; background: #FFFBF5;"></div>
  
  <div style="font-family: 'Inter', sans-serif; font-size: 30px; font-weight: 500; color: #FF4801; letter-spacing: -0.02em;">$0.015</div>
  <div style="font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(82,16,0,0.6); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 8px;">per GB / month</div>
</div>

---

CARD-PRICING

Pricing tier card with features list.

React + Tailwind

<div className="relative bg-[#FFFDFB] border border-[#EBD5C1] overflow-hidden">
  {/* Corner brackets */}
  <div className="absolute -top-1 -left-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5] z-10" />
  <div className="absolute -top-1 -right-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5] z-10" />
  <div className="absolute -bottom-1 -left-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5] z-10" />
  <div className="absolute -bottom-1 -right-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5] z-10" />
  
  {/* Header */}
  <div className="p-6 border-b border-[#EBD5C1]/50">
    <h3 className="text-lg font-medium text-[#521000]">Pro</h3>
    <div className="mt-2">
      <span className="text-3xl font-medium text-[#521000]">$20</span>
      <span className="text-sm text-[#521000]/60">/month</span>
    </div>
    <p className="text-sm text-[#521000]/60 mt-2">For growing teams and projects</>
  </div>
  
  {}
  <div className=>
    
    
    
  </div>
</div>

Vanilla HTML

<div style="
  position: relative;
  background: #FFFDFB;
  border: 1px solid #EBD5C1;
  overflow: hidden;
">
  <!-- Corner brackets -->
  <div style="position: absolute; top: -4px; left: -4px; width: 8px; height: 8px; border: 1px solid #EBD5C1; border-radius: 1.5px; background: #FFFBF5; z-index: 10;"></div>
  <div style="position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; border: 1px solid #EBD5C1; border-radius: 1.5px; background: #FFFBF5; z-index: 10;"></div>
  <div style="position: absolute; bottom: -4px; left: -4px; width: 8px; height: 8px; border: 1px solid #EBD5C1; border-radius: 1.5px; background: #FFFBF5; z-index: 10;"></div>
  <div style="position: absolute; bottom: -4px; right: -4px; width: 8px; height: 8px; border: 1px solid #EBD5C1; border-radius: 1.5px; background: #FFFBF5; z-index: 10;"></div>
  
  <!-- Header -->
  <div style="padding: 24px; border-bottom: 1px solid rgba(235,213,193,0.5);">
    <h3 style="font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 500; color: #521000; margin: 0;">Pro</h3>
    <div style="margin-top: 8px;">
      <span style="font-family: 'Inter', sans-serif; font-size: 30px; font-weight: 500; color: #521000;">$20
      /month
    
    For growing teams and projects
  
  
  
  
    
      
        
          
        
        100 GB storage included
      
      
        
          
        
        10 million requests/month
      
      
        
          
        
        Zero egress fees
      
    
    
    Get started
  

---

CARD-COMPARISON-ROW

Side-by-side comparison row with progress bar — useful for "us vs. them" feature/pricing comparisons.

React + Tailwind

<div className="relative bg-[#FFFDFB] border border-[#EBD5C1] p-4">
  <div className="flex items-center justify-between mb-3">
    <div className="flex items-center gap-3">
      <div className="h-6 w-6 rounded bg-[#FF4801]/10 grid place-items-center text-[#FF4801] text-xs font-semibold">
        Y
      </div>
      <span className="font-medium text-[#521000]">Your product</span>
    </div>
    <div className="text-right">
      <span className="text-lg font-medium text-[#521000]">$150.00</span>
      <span className="text-sm text-[#521000]/60">/mo</span>
    </div>
  </div>

  {/* Progress bar — proportional value shown */}
  <div className="h-3 bg-[#EBD5C1]/30 rounded-full overflow-hidden">
    <div
      className="h-full bg-[#FF4801] rounded-full transition-all duration-500 ease-out"
      style={{ width: '15%' }}
    />
  </div>
</div>

Vanilla HTML

<div style="
  position: relative;
  background: #FFFDFB;
  border: 1px solid #EBD5C1;
  padding: 16px;
">
  <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
    <div style="display: flex; align-items: center; gap: 12px;">
      <div style="height: 24px; width: 24px; border-radius: 4px; background: rgba(255,72,1,0.1); display: grid; place-items: center; color: #FF4801; font-size: 12px; font-weight: 600;">Y</div>
      <span style="font-family: 'Inter', sans-serif; font-weight: 500; color: #521000;">Your product</span>
    </div>
    <div style="text-align: right;">
      <span style="font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 500; color: #521000;">$150.00</span>
      <span style="font-family: 'Inter', sans-serif; font-size: 14px; color: rgba(82,16,0,0.6);">/mo</span>
    </div>
  </div>

  <!-- Progress bar -->
  <div style="height: 12px; background: rgba(235,213,193,0.3); border-radius: 9999px; overflow: hidden;">
    
  

---

CARD-USE-CASE

Use case preset card for calculators.

React + Tailwind

<button 
  type="button"
  className="flex flex-col items-center p-4 border border-[#EBD5C1] bg-[#FFFDFB] transition-all text-center hover:border-dashed hover:border-[#FF4801] focus:outline-none focus:ring-2 focus:ring-[#FF4801]/20"
>
  <div className="mb-2 text-[#521000]/60">
    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path strokeLinecap="round" strokeLinejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
    </svg>
  </div>
  <span className="text-sm font-medium text-[#521000]">AI/ML Training</span>
  <span className="text-xs text-[#521000]/60 mt-0.5">100TB</span>
</button>

Vanilla HTML

<button type="button" style="
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border: 1px solid #EBD5C1;
  background: #FFFDFB;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
" onmouseover="this.style.borderStyle='dashed'; this.style.borderColor='#FF4801';" onmouseout="this.style.borderStyle='solid'; this.style.borderColor='#EBD5C1';">
  <div style="margin-bottom: 8px; color: rgba(82,16,0,0.6);">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
      <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
    </svg>
  </div>
  <span style="font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: #521000;">AI/ML Training</>
  100TB

---

CARD-TESTIMONIAL

Testimonial card with quote, avatar, and attribution.

React + Tailwind

<div className="relative bg-[#FFFDFB] border border-[#EBD5C1] p-6">
  {/* Corner brackets */}
  <div className="absolute -top-1 -left-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5]" />
  <div className="absolute -top-1 -right-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5]" />
  <div className="absolute -bottom-1 -left-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5]" />
  <div className="absolute -bottom-1 -right-1 w-2 h-2 border border-[#EBD5C1] rounded-[1.5px] bg-[#FFFBF5]" />
  
  {/* Quote icon */}
  <svg className="w-8 h-8 text-[#FF4801]/20 mb-4" fill="currentColor" viewBox="0 0 24 24">
    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
  </svg>
  
  <blockquote className="text-base text-[#521000] leading-relaxed mb-4">
    "We cut our infrastructure costs by 60% and eliminated an entire category of vendor lock-in. The migration was seamless."
  </blockquote>
  
  <div className="flex items-center gap-3">
    <div className="w-10 h-10 rounded-full bg-[#FF4801]/10 flex items-center justify-center">
      <span =>JD
    
    
      Jane Doe
      CTO, TechCorp
    
  
</div>

---

Forms

FORM-INPUT

Text input with label and optional error state.

React + Tailwind

<div className="flex flex-col">
  <label htmlFor="storage" className="block mb-2 text-base font-medium text-[#521000] leading-tight">
    How much data will you store?
  </label>
  <input
    type="text"
    id="storage"
    className="border border-[#EBD5C1] bg-[#FFFDFB] text-[#521000] text-sm rounded-lg p-3 text-right focus:border-[#FF4801] focus:ring-1 focus:ring-[#FF4801] outline-none transition-all duration-150"
    placeholder="10"
    defaultValue="10"
  />
</div>

Vanilla HTML

<div style="display: flex; flex-direction: column;">
  <label for="storage" style="
    display: block;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #521000;
    line-height: 1.4;
  ">
    How much data will you store?
  </label>
  <input
    type="text"
    id="storage"
    placeholder="10"
    value="10"
    style="
      border: 1px solid #EBD5C1;
      background: #FFFDFB;
      color: #521000;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      border-radius: 8px;
      padding: 12px;
      text-align: right;
      outline: none;
      transition: all 0.15s ease;
    "
    onfocus="this.style.borderColor='#FF4801'; this.style.boxShadow='0 0 0 1px #FF4801';"
    onblur="this.style.borderColor='#EBD5C1'; this.style.boxShadow='none';"
  />
</div>

---

FORM-INPUT-WITH-UNIT

Input with unit selector dropdown (e.g., for pricing calculators or quantity inputs).

React + Tailwind

<div className="flex flex-col">
  <label htmlFor="data_stored" className="block mb-2 text-base font-medium text-[#521000] leading-tight">
    How much data will you store?
  </label>
  <div className="flex">
    <input
      id="data_stored"
      type="text"
      className="flex-1 border border-[#EBD5C1] bg-[#FFFDFB] text-[#521000] text-sm rounded-lg p-3 text-right focus:border-[#FF4801] focus:ring-1 focus:ring-[#FF4801] outline-none"
      defaultValue="10"
    />
    <div className="relative ml-2">
      <select
        aria-label="Storage unit"
        className="appearance-none pl-3 pr-8 py-3 text-sm text-[#521000] bg-[#FEF7ED] border border-[#EBD5C1] rounded-lg cursor-pointer focus:border-[#FF4801] focus:ring-1 focus:ring-[#FF4801] outline-none"
        defaultValue="TB"
      >
        <option value="GB">GB</option>
        <option value="TB">TB</option>
        <option value="PB">PB
      
      
        
      
    
  
</div>

Vanilla HTML

<div style="display: flex; flex-direction: column;">
  <label for="data_stored" style="
    display: block;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #521000;
    line-height: 1.4;
  ">
    How much data will you store?
  </label>
  <div style="display: flex;">
    <input
      id="data_stored"
      type="text"
      value="10"
      style="
        flex: 1;
        border: 1px solid #EBD5C1;
        background: #FFFDFB;
        color: #521000;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        border-radius: 8px;
        padding: 12px;
        text-align: right;
        outline: none;
      "
    />
    <div style="position: relative; margin-left: 8px;">
      <select aria-label="Storage unit" style="
        appearance: none;
        padding: 12px 32px 12px 12px;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        color: #521000;
        background: #FEF7ED;
        border: 1px solid #EBD5C1;
        border-radius: 8px;
        cursor: pointer;
        outline: none;
      ">
        <option value="GB">GB</option>
        <option value="TB" >TB
        PB
      
      
        
      
    
  

---

FORM-RANGE-SLIDER

Range slider with floating value badge (useful for usage/pricing inputs).

React + Tailwind

function RangeSlider() {
  const [value, setValue] = useState(75);
  
  return (
    <div className="flex flex-col">
      <label htmlFor="egress" className="block mb-2 text-base font-medium text-[#521000] leading-tight">
        What % of stored data will be downloaded (egress) monthly?
      </label>
      <div className="pt-8 relative">
        <input
          type="range"
          id="egress"
          min="0"
          max="500"
          value={value}
          onChange={(e) => setValue(Number(e.target.value))}
          className="w-full h-2 bg-[#EBD5C1] rounded-full appearance-none cursor-pointer
            [&::-webkit-slider-thumb]:appearance-none
            [&::-webkit-slider-thumb]:w-5
            [&::-webkit-slider-thumb]:h-5
            [&::-webkit-slider-thumb]:bg-white
            [&::-webkit-slider-thumb]:border-2
            [&::-webkit-slider-thumb]:border-[#FF4801]
            [&::-webkit-slider-thumb]:rounded-full
            [&::-webkit-slider-thumb]:shadow-md
            [&::-webkit-slider-thumb]:cursor-grab
            [&::-webkit-slider-thumb]:active:cursor-grabbing"
          style={{
            background: `linear-gradient(to right, #FF4801 0%, #FF4801 ${(value / 500) * 100}%, #EBD5C1 ${(value / 500) * 100}%, #EBD5C1 100%)`
          }}
        />
        {/* Floating badge */}
        <div 
          className=
          =  `(${( / ) * }%  )` }}
        >
          {value}%
        
        
          0%
          500%
        
      
    
  );
}

Vanilla HTML + JavaScript

<div style="display: flex; flex-direction: column;">
  <label for="egress" style="
    display: block;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #521000;
    line-height: 1.4;
  ">
    What % of stored data will be downloaded (egress) monthly?
  </label>
  <div style="padding-top: 32px; position: relative;">
    <input
      type="range"
      id="egress"
      min="0"
      max="500"
      value="75"
      style="
        width: 100%;
        height: 8px;
        border-radius: 9999px;
        appearance: none;
        cursor: pointer;
        background: linear-gradient(to right, #FF4801 15%, #EBD5C1 15%);
      "
      oninput="updateSlider(this)"
    />
    <div id="slider-badge" style="
      position: absolute;
      top: 0;
      left: calc(15% - 20px);
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 500;
      color: #FF4801;
      background: rgba(255,72,1,0.1);
      padding: 4px 8px;
      border-radius: 9999px;
      white-space: nowrap;
    ">75%</div>
    <div style="display: flex; justify-content: space-between; padding-top: 8px; font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(82,16,0,0.6);">
      0%
      500%
    
  

---

FORM-TOGGLE

Toggle switch for on/off states.

React + Tailwind

function Toggle({ enabled, onChange, label }) {
  return (
    <label className="inline-flex items-center cursor-pointer">
      <div className="relative">
        <input
          type="checkbox"
          checked={enabled}
          onChange={(e) => onChange(e.target.checked)}
          className="sr-only peer"
        />
        <div className="w-11 h-6 bg-[#EBD5C1] peer-focus:ring-2 peer-focus:ring-[#FF4801]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-[#EBD5C1] after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#FF4801]"></div>
      </div>
      {label && <span className="ml-3 text-sm font-medium text-[#521000]">{label}</span>}
    </label>
  );
}

Vanilla HTML

<label style="display: inline-flex; align-items: center; cursor: pointer;">
  <div style="position: relative;">
    <input type="checkbox" id="toggle" style="position: absolute; width: 1px; height: 1px; opacity: 0;" onchange="updateToggle(this)">
    <div id="toggle-track" style="
      width: 44px;
      height: 24px;
      background: #EBD5C1;
      border-radius: 9999px;
      position: relative;
      transition: background 0.2s ease;
    ">
      <div id="toggle-thumb" style="
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        background: white;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        transition: transform 0.2s ease;
      "></div>
    </div>
  </div>
  <span style="margin-left: 12px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: #521000;">Enable feature</span>
</label>

<script>
function updateToggle(input) {
   track = .();
   thumb = .();
   (input.) {
    track.. = ;
    thumb.. = ;
  }  {
    track.. = ;
    thumb.. = ;
  }
}

---

FORM-TOGGLE-GROUP

Toggle button group for binary or small-set selection (e.g., month/year billing).

React + Tailwind

function ToggleGroup({ options, value, onChange }) {
  return (
    <div className="inline-flex rounded-full border border-[#EBD5C1] overflow-hidden">
      {options.map((option) => (
        <button
          key={option.value}
          type="button"
          onClick={() => onChange(option.value)}
          className={`px-4 py-2 text-sm font-medium transition-all ${
            value === option.value
              ? 'bg-[#FF4801] text-white hover:opacity-95'
              : 'bg-[#FFFDFB] text-[#521000] hover:bg-[#FEF7ED]'
          }`}
        >
          {option.label}
        </button>
      ))}
    </div>
  );
}

// Usage
<ToggleGroup
  options={[
    { value: 'month', label: 'month' },
    { value: 'year', label: 'year' }
  ]}
  value="month"
  onChange={(v) => setPeriod(v)}
/>

Vanilla HTML

<div style="display: inline-flex; border-radius: 9999px; border: 1px solid #EBD5C1; overflow: hidden;">
  <button type="button" id="btn-month" onclick="selectPeriod('month')" style="
    padding: 8px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    background: #FF4801;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
  ">month</button>
  <button type="button" id="btn-year" onclick="selectPeriod('year')" style="
    padding: 8px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    background: #FFFDFB;