<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Palette Demo Site</title>
<style>
:root {
--deep-red-100: oklch(0.97 0.02 29);
--deep-red-200: oklch(0.92 0.05 29);
--deep-red-300: oklch(0.86 0.1 29);
--deep-red-400: oklch(0.8 0.14 29);
--deep-red-500: oklch(0.72 0.17 29);
--deep-red-600: oklch(0.63 0.14 29);
--deep-red-700: oklch(0.54 0.12 29);
--deep-red-800: oklch(0.42 0.1 29);
--deep-red-900: oklch(0.31 0.07 29);
--mustard-100: oklch(0.96 0.02 90);
--mustard-200: oklch(0.92 0.05 90);
--mustard-300: oklch(0.85 0.1 90);
--mustard-400: oklch(0.79 0.14 90);
--mustard-500: oklch(0.71 0.17 90);
--mustard-600: oklch(0.61 0.14 90);
--mustard-700: oklch(0.52 0.12 90);
--mustard-800: oklch(0.41 0.1 90);
--mustard-900: oklch(0.3 0.07 90);
--green-100: oklch(0.96 0.02 151);
--green-200: oklch(0.91 0.05 151);
--green-300: oklch(0.84 0.1 151);
--green-400: oklch(0.77 0.14 151);
--green-500: oklch(0.69 0.17 151);
--green-600: oklch(0.6 0.14 151);
--green-700: oklch(0.51 0.12 151);
--green-800: oklch(0.4 0.1 151);
--green-900: oklch(0.29 0.07 151);
--bg: var(--mustard-100);
--surface: rgba(255,255,255,0.72);
--surface-strong: white;
--text: var(--deep-red-900);
--text-soft: color-mix(in oklab, var(--deep-red-900) 72%, white);
--border: color-mix(in oklab, var(--deep-red-300) 35%, white);
--primary: var(--green-600);
--primary-hover: var(--green-700);
--secondary: var(--mustard-400);
--accent: var(--deep-red-500);
--shadow: color-mix(in oklab, var(--deep-red-900) 10%, transparent);
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
color: var(--text);
background:
radial-gradient(circle at top left, var(--mustard-200), transparent 30%),
radial-gradient(circle at bottom right, var(--green-100), transparent 30%),
linear-gradient(180deg, var(--mustard-100), #fff);
}
a { color: inherit; text-decoration: none; }
.container {
width: min(1120px, calc(100% - 2rem));
margin: 0 auto;
}
.nav {
position: sticky;
top: 0;
backdrop-filter: blur(12px);
background: rgba(255,255,255,0.65);
border-bottom: 1px solid var(--border);
z-index: 10;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
gap: 1rem;
}
.brand {
font-weight: 800;
letter-spacing: 0.02em;
color: var(--deep-red-800);
}
.nav-links {
display: flex;
gap: 1rem;
color: var(--text-soft);
font-weight: 600;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 999px;
padding: 0.85rem 1.2rem;
font: inherit;
font-weight: 700;
cursor: pointer;
transition: 160ms ease;
}
.btn-primary {
background: var(--primary);
color: white;
box-shadow: 0 10px 24px var(--shadow);
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
}
.btn-secondary {
background: var(--surface-strong);
color: var(--deep-red-800);
border: 1px solid var(--border);
}
.hero {
padding: 4rem 0 3rem;
}
.hero-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 2rem;
align-items: center;
}
.eyebrow {
display: inline-block;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 800;
color: var(--green-700);
margin-bottom: 1rem;
}
h1 {
margin: 0 0 1rem;
font-size: clamp(2.4rem, 6vw, 4.6rem);
line-height: 0.95;
color: var(--deep-red-900);
}
.hero p {
font-size: 1.05rem;
color: var(--text-soft);
max-width: 58ch;
margin-bottom: 1.5rem;
}
.hero-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.hero-stats {
display: flex;
gap: 1rem;
flex-wrap: wrap;
color: var(--text-soft);
font-weight: 600;
}
.mockup {
background: linear-gradient(180deg, var(--surface), var(--surface-strong));
border: 1px solid var(--border);
border-radius: 28px;
padding: 1.2rem;
box-shadow: 0 25px 60px var(--shadow);
}
.mockup-header {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--deep-red-300);
}
.dot:nth-child(2) { background: var(--mustard-400); }
.dot:nth-child(3) { background: var(--green-400); }
.mockup-card {
background: white;
border: 1px solid var(--border);
border-radius: 18px;
padding: 1rem;
margin-bottom: 0.8rem;
}
.pill-row {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.8rem;
}
.pill {
padding: 0.35rem 0.7rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
}
.pill.red { background: var(--deep-red-100); color: var(--deep-red-800); }
.pill.yellow { background: var(--mustard-200); color: var(--mustard-900); }
.pill.green { background: var(--green-200); color: var(--green-900); }
.section {
padding: 2rem 0;
}
.section h2 {
margin: 0 0 0.5rem;
font-size: 2rem;
color: var(--deep-red-800);
}
.section p.lead {
margin: 0 0 1.5rem;
color: var(--text-soft);
max-width: 65ch;
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.card {
background: var(--surface);
backdrop-filter: blur(10px);
border: 1px solid var(--border);
border-radius: 22px;
padding: 1.25rem;
box-shadow: 0 14px 30px var(--shadow);
}
.card-icon {
width: 44px;
height: 44px;
border-radius: 14px;
display: grid;
place-items: center;
margin-bottom: 0.9rem;
font-weight: 800;
color: white;
}
.card:nth-child(1) .card-icon { background: var(--deep-red-500); }
.card:nth-child(2) .card-icon { background: var(--mustard-600); }
.card:nth-child(3) .card-icon { background: var(--green-600); }
.card h3 {
margin: 0 0 0.5rem;
color: var(--deep-red-900);
}
.card p {
margin: 0;
color: var(--text-soft);
}
.banner {
margin-top: 2rem;
background: linear-gradient(135deg, var(--deep-red-700), var(--deep-red-500));
color: white;
border-radius: 24px;
padding: 1.5rem;
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: center;
box-shadow: 0 18px 40px var(--shadow);
}
.banner p {
margin: 0.4rem 0 0;
color: rgba(255,255,255,0.88);
}
.footer {
padding: 3rem 0;
color: var(--text-soft);
font-size: 0.95rem;
}
@media (max-width: 900px) {
.hero-grid,
.cards {
grid-template-columns: 1fr;
}
.nav-inner {
flex-direction: column;
align-items: flex-start;
}
.banner {
flex-direction: column;
align-items: flex-start;
}
}
</style>
</head>
<body>
<header class="nav">
<div class="container nav-inner">
<div class="brand">Acorn Studio</div>
<nav class="nav-links">
<a href="#">Work</a>
<a href="#">Pricing</a>
<a href="#">About</a>
</nav>
</div>
</header>
<main class="container">
<section class="hero">
<div class="hero-grid">
<div>
<div class="eyebrow">Palette preview website</div>
<h1>Design with warm contrast and soft natural tones</h1>
<p>
This demo uses your deep red, mustard, and green palette in a
full landing page so you can judge the mood, readability, and
balance of the colors in a realistic layout.
</p>
<div class="hero-actions">
<button class="btn btn-primary">Get started</button>
<button class="btn btn-secondary">See examples</button>
</div>
<div class="hero-stats">
<span>Warm and earthy</span>
<span>•</span>
<span>Distinct accent colors</span>
<span>•</span>
<span>Good for editorial or artisan brands</span>
</div>
</div>
<div class="mockup">
<div class="mockup-header">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="mockup-card">
<strong style="color: var(--deep-red-800);">Seasonal collection</strong>
<p style="color: var(--text-soft); margin: 0.5rem 0 0;">
Muted warmth with organic accents and soft UI depth.
</p>
<div class="pill-row">
<span class="pill red">Editorial</span>
<span class="pill yellow">Warm</span>
<span class="pill green">Natural</span>
</div>
</div>
<div class="mockup-card">
<strong style="color: var(--deep-red-800);">Color balance</strong>
<div style="display:flex; gap:0.5rem; margin-top:0.8rem;">
<div style="height:14px; flex:3; background:var(--deep-red-500); border-radius:999px;"></div>
<div style="height:14px; flex:2; background:var(--mustard-500); border-radius:999px;"></div>
<div style="height:14px; flex:2; background:var(--green-500); border-radius:999px;"></div>
</div>
</div>
<div class="mockup-card" style="background: var(--green-100);">
<strong style="color: var(--green-900);">Looks especially nice for:</strong>
<p style="color: var(--green-800); margin: 0.5rem 0 0;">
food brands, craft products, blogs, eco startups, and boutique shops.
</p>
</div>
</div>
</div>
</section>
<section class="section">
<h2>Feature cards</h2>
<p class="lead">
This section helps you judge whether the palette works for content-heavy UI cards and icon accents.
</p>
<div class="cards">
<article class="card">
<div class="card-icon">A</div>
<h3>Bold headline color</h3>
<p>
The deep red works well for strong typography and gives the page a slightly premium, earthy feel.
</p>
</article>
<article class="card">
<div class="card-icon">B</div>
<h3>Warm backgrounds</h3>
<p>
The mustard shades are good as soft backgrounds, highlights, or subtle branding surfaces.
</p>
</article>
<article class="card">
<div class="card-icon">C</div>
<h3>Healthy accents</h3>
<p>
The green shades give a natural accent that pairs nicely with the warmer red and yellow tones.
</p>
</article>
</div>
<div class="banner">
<div>
<strong style="font-size: 1.15rem;">Overall impression</strong>
<p>
The palette feels warm, organic, and distinctive — not corporate blue, more handcrafted and welcoming.
</p>
</div>
<button class="btn btn-secondary">Try this palette</button>
</div>
</section>
<footer class="footer">
Palette demo using your custom OKLCH colors.
</footer>
</main>
</body>
</html>