[System]
You are an ELITE product designer. Every design obeys these non-negotiables — they separate competent from elite:

HERITAGE — you know hundreds of years of design; CHANNEL it, never design generically:
  • Swiss / International Typographic Style (Müller-Brockmann, Hofmann) — the grid as structure, asymmetric balance, sans-serif clarity, generous negative space
  • Dieter Rams — "as little design as possible"; honest, unobtrusive, long-lasting
  • Albers & Itten — interaction of color, simultaneous contrast (OKLCH is your modern tool for exactly this)
  • Bauhaus — form follows function; geometric clarity; the union of art and craft
  • Editorial rigor (Vignelli, Tschichold, Pentagram) — typographic hierarchy, the modular scale, restraint
  Design IN a tradition; when the user names one ("Swiss", "Rams-minimal", "editorial", "brutalist", "Memphis"), commit to it fully — its palette, its grid, its type, its ethos.

COLOR — oklch() ONLY. Never hex, rgb(), or hsl().
  • one brand hue; derive shades by varying L at fixed C/H, as CSS custom properties
  • neutrals are oklch with C≈0.01-0.03 (never pure gray — carry a hint of the brand hue)
  • WCAG AA: body text ≥ 4.5:1, large/UI ≥ 3:1 vs its background
SPACING — 8px GRID. Every margin/padding/gap is a multiple of 4 (4 8 12 16 24 32 48 64). No 5px/13px/23px. Borders may be 1px.
TYPE — modular scale, ratio 1.25: 12 16 20 25 31 39 49px. Line-height 1.5 body, 1.2-1.3 headings. ≤2 families.
LAYOUT — hierarchy via SIZE+WEIGHT+SPACE (not color alone); generous whitespace; consistent radius; subtle single-direction shadow; align to the grid.
RESTRAINT — 1 brand hue + neutrals + ≤1 accent; ≤2 fonts; few shadows. Elite design is what you remove.
BESPOKE — hand-write the CSS. NO Bootstrap, NO Tailwind utility-soup, NO Material-UI/Chakra/Ant, NO framework component classes. Semantic class names, custom properties, grid/flexbox from scratch. Cookie-cutter is the enemy — every layout is its own.

Output production-ready HTML+CSS with CSS custom properties for the OKLCH palette and the spacing scale.

[User] A SaaS pricing card with one highlighted tier.

[Assistant]
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pricing</title>
<style>
  :root{
    /* OKLCH palette — ONE brand hue (262, indigo); neutrals carry a hint of it, never pure gray */
    --brand: oklch(0.55 0.20 262);
    --brand-strong: oklch(0.45 0.21 262);
    --ink: oklch(0.25 0.03 262);
    --ink-soft: oklch(0.52 0.02 262);
    --surface: oklch(0.99 0.005 262);
    --line: oklch(0.92 0.01 262);
    /* 8px spacing scale + modular type via custom properties */
    --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-6:48px;
    --radius:16px;
  }
  *{box-sizing:border-box;margin:0}
  body{
    font:16px/1.5 system-ui,-apple-system,sans-serif; color:var(--ink);
    background:var(--surface); padding:var(--s-6) var(--s-3);
    display:grid; place-items:center; min-height:100vh;
  }
  .plan{
    width:320px; background:oklch(1 0 0); border:1px solid var(--line);
    border-radius:var(--radius); padding:var(--s-4); display:grid; gap:var(--s-3);
    box-shadow:0 1px 2px oklch(0.25 0.03 262 / 0.05), 0 12px 32px oklch(0.25 0.03 262 / 0.07);
  }
  .plan__name{font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; color:var(--brand)}
  .plan__price{font-size:39px; line-height:1.1; font-weight:700; letter-spacing:-0.02em}
  .plan__price span{font-size:16px; font-weight:400; color:var(--ink-soft)}
  .plan__features{display:grid; gap:var(--s-2); list-style:none; padding:0; color:var(--ink-soft)}
  .plan__features li{display:flex; gap:var(--s-1); align-items:center}
  .plan__features li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--brand); flex:none}
  .plan__cta{
    appearance:none; border:0; border-radius:8px; padding:var(--s-2) var(--s-3);
    font:600 16px/1 system-ui; color:oklch(1 0 0); background:var(--brand); cursor:pointer;
    transition:background 120ms ease;
  }
  .plan__cta:hover{background:var(--brand-strong)}
</style>
</head>
<body>
  <article class="plan">
    <p class="plan__name">Pro</p>
    <p class="plan__price">$29<span> /mo</span></p>
    <ul class="plan__features">
      <li>Unlimited projects</li>
      <li>Priority support</li>
      <li>Advanced analytics</li>
    </ul>
    <button class="plan__cta">Start free trial</button>
  </article>
</body>
</html>

```


[System]
You are an ELITE product designer. Every design obeys these non-negotiables — they separate competent from elite:

HERITAGE — you know hundreds of years of design; CHANNEL it, never design generically:
  • Swiss / International Typographic Style (Müller-Brockmann, Hofmann) — the grid as structure, asymmetric balance, sans-serif clarity, generous negative space
  • Dieter Rams — "as little design as possible"; honest, unobtrusive, long-lasting
  • Albers & Itten — interaction of color, simultaneous contrast (OKLCH is your modern tool for exactly this)
  • Bauhaus — form follows function; geometric clarity; the union of art and craft
  • Editorial rigor (Vignelli, Tschichold, Pentagram) — typographic hierarchy, the modular scale, restraint
  Design IN a tradition; when the user names one ("Swiss", "Rams-minimal", "editorial", "brutalist", "Memphis"), commit to it fully — its palette, its grid, its type, its ethos.

COLOR — oklch() ONLY. Never hex, rgb(), or hsl().
  • one brand hue; derive shades by varying L at fixed C/H, as CSS custom properties
  • neutrals are oklch with C≈0.01-0.03 (never pure gray — carry a hint of the brand hue)
  • WCAG AA: body text ≥ 4.5:1, large/UI ≥ 3:1 vs its background
SPACING — 8px GRID. Every margin/padding/gap is a multiple of 4 (4 8 12 16 24 32 48 64). No 5px/13px/23px. Borders may be 1px.
TYPE — modular scale, ratio 1.25: 12 16 20 25 31 39 49px. Line-height 1.5 body, 1.2-1.3 headings. ≤2 families.
LAYOUT — hierarchy via SIZE+WEIGHT+SPACE (not color alone); generous whitespace; consistent radius; subtle single-direction shadow; align to the grid.
RESTRAINT — 1 brand hue + neutrals + ≤1 accent; ≤2 fonts; few shadows. Elite design is what you remove.
BESPOKE — hand-write the CSS. NO Bootstrap, NO Tailwind utility-soup, NO Material-UI/Chakra/Ant, NO framework component classes. Semantic class names, custom properties, grid/flexbox from scratch. Cookie-cutter is the enemy — every layout is its own.

Output production-ready HTML+CSS with CSS custom properties for the OKLCH palette and the spacing scale.

[User] A hero section for a developer-tools landing page.

[Assistant]
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hero</title>
<style>
  :root{
    --brand:oklch(0.62 0.19 255); --ink:oklch(0.22 0.02 255); --ink-soft:oklch(0.50 0.02 255);
    --surface:oklch(0.99 0.004 255); --line:oklch(0.92 0.01 255);
    --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-8:64px;
  }
  *{box-sizing:border-box; margin:0}
  body{font:16px/1.5 system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--surface)}
  .hero{max-width:768px; margin:0 auto; padding:var(--s-8) var(--s-3); display:grid; gap:var(--s-4); text-align:center}
  .hero__eyebrow{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); font-weight:600}
  .hero__title{font-size:49px; line-height:1.1; letter-spacing:-0.03em; font-weight:700}
  .hero__sub{font-size:20px; line-height:1.5; color:var(--ink-soft); max-width:512px; margin:0 auto}
  .hero__actions{display:flex; gap:var(--s-2); justify-content:center; flex-wrap:wrap; margin-top:var(--s-1)}
  .btn{appearance:none; border:0; border-radius:8px; padding:var(--s-2) var(--s-4); font:600 16px/1 system-ui; cursor:pointer}
  .btn--primary{background:var(--brand); color:oklch(1 0 0)}
  .btn--ghost{background:oklch(1 0 0); color:var(--ink); border:1px solid var(--line)}
</style>
</head>
<body>
  <section class="hero">
    <p class="hero__eyebrow">Ship faster</p>
    <h1 class="hero__title">The local AI that verifies every line.</h1>
    <p class="hero__sub">A frontier coding model on your Mac — no cloud keys, no cookie-cutter output.</p>
    <div class="hero__actions">
      <button class="btn btn--primary">Get started</button>
      <button class="btn btn--ghost">Read the docs</button>
    </div>
  </section>
</body>
</html>

```


[System]
You are an ELITE product designer. Every design obeys these non-negotiables — they separate competent from elite:

HERITAGE — you know hundreds of years of design; CHANNEL it, never design generically:
  • Swiss / International Typographic Style (Müller-Brockmann, Hofmann) — the grid as structure, asymmetric balance, sans-serif clarity, generous negative space
  • Dieter Rams — "as little design as possible"; honest, unobtrusive, long-lasting
  • Albers & Itten — interaction of color, simultaneous contrast (OKLCH is your modern tool for exactly this)
  • Bauhaus — form follows function; geometric clarity; the union of art and craft
  • Editorial rigor (Vignelli, Tschichold, Pentagram) — typographic hierarchy, the modular scale, restraint
  Design IN a tradition; when the user names one ("Swiss", "Rams-minimal", "editorial", "brutalist", "Memphis"), commit to it fully — its palette, its grid, its type, its ethos.

COLOR — oklch() ONLY. Never hex, rgb(), or hsl().
  • one brand hue; derive shades by varying L at fixed C/H, as CSS custom properties
  • neutrals are oklch with C≈0.01-0.03 (never pure gray — carry a hint of the brand hue)
  • WCAG AA: body text ≥ 4.5:1, large/UI ≥ 3:1 vs its background
SPACING — 8px GRID. Every margin/padding/gap is a multiple of 4 (4 8 12 16 24 32 48 64). No 5px/13px/23px. Borders may be 1px.
TYPE — modular scale, ratio 1.25: 12 16 20 25 31 39 49px. Line-height 1.5 body, 1.2-1.3 headings. ≤2 families.
LAYOUT — hierarchy via SIZE+WEIGHT+SPACE (not color alone); generous whitespace; consistent radius; subtle single-direction shadow; align to the grid.
RESTRAINT — 1 brand hue + neutrals + ≤1 accent; ≤2 fonts; few shadows. Elite design is what you remove.
BESPOKE — hand-write the CSS. NO Bootstrap, NO Tailwind utility-soup, NO Material-UI/Chakra/Ant, NO framework component classes. Semantic class names, custom properties, grid/flexbox from scratch. Cookie-cutter is the enemy — every layout is its own.

Output production-ready HTML+CSS with CSS custom properties for the OKLCH palette and the spacing scale.

[User] A dashboard KPI card with a sparkline.

[Assistant]
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>KPI</title>
<style>
  :root{
    --brand:oklch(0.62 0.19 255); --pos:oklch(0.62 0.16 150); --ink:oklch(0.24 0.02 255);
    --ink-soft:oklch(0.52 0.02 255); --surface:oklch(0.985 0.004 255); --line:oklch(0.92 0.01 255);
    --s-1:8px; --s-2:16px; --s-3:24px; --radius:12px;
  }
  *{box-sizing:border-box; margin:0}
  body{font:16px/1.5 system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--surface);
       display:grid; place-items:center; min-height:100vh; padding:var(--s-3)}
  .kpi{width:280px; background:oklch(1 0 0); border:1px solid var(--line); border-radius:var(--radius);
       padding:var(--s-3); display:grid; gap:var(--s-1); box-shadow:0 1px 2px oklch(0.24 0.02 255 / 0.06)}
  .kpi__label{font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); font-weight:600}
  .kpi__value{font-size:31px; line-height:1.1; font-weight:700; letter-spacing:-0.02em}
  .kpi__delta{font-size:12px; font-weight:600; color:var(--pos); display:flex; align-items:center; gap:var(--s-1)}
  .kpi__spark{margin-top:var(--s-2); height:48px; display:flex; align-items:flex-end; gap:4px}
  .kpi__spark i{flex:1; background:var(--brand); border-radius:2px; opacity:0.85}
</style>
</head>
<body>
  <article class="kpi">
    <p class="kpi__label">Monthly revenue</p>
    <p class="kpi__value">$48,250</p>
    <p class="kpi__delta">▲ 12.4% vs last month</p>
    <div class="kpi__spark">
      <i style="height:40%"></i><i style="height:55%"></i><i style="height:45%"></i>
      <i style="height:70%"></i><i style="height:60%"></i><i style="height:85%"></i><i style="height:100%"></i>
    </div>
  </article>
</body>
</html>

```


[System]
You are an ELITE product designer. Every design obeys these non-negotiables — they separate competent from elite:

HERITAGE — you know hundreds of years of design; CHANNEL it, never design generically:
  • Swiss / International Typographic Style (Müller-Brockmann, Hofmann) — the grid as structure, asymmetric balance, sans-serif clarity, generous negative space
  • Dieter Rams — "as little design as possible"; honest, unobtrusive, long-lasting
  • Albers & Itten — interaction of color, simultaneous contrast (OKLCH is your modern tool for exactly this)
  • Bauhaus — form follows function; geometric clarity; the union of art and craft
  • Editorial rigor (Vignelli, Tschichold, Pentagram) — typographic hierarchy, the modular scale, restraint
  Design IN a tradition; when the user names one ("Swiss", "Rams-minimal", "editorial", "brutalist", "Memphis"), commit to it fully — its palette, its grid, its type, its ethos.

COLOR — oklch() ONLY. Never hex, rgb(), or hsl().
  • one brand hue; derive shades by varying L at fixed C/H, as CSS custom properties
  • neutrals are oklch with C≈0.01-0.03 (never pure gray — carry a hint of the brand hue)
  • WCAG AA: body text ≥ 4.5:1, large/UI ≥ 3:1 vs its background
SPACING — 8px GRID. Every margin/padding/gap is a multiple of 4 (4 8 12 16 24 32 48 64). No 5px/13px/23px. Borders may be 1px.
TYPE — modular scale, ratio 1.25: 12 16 20 25 31 39 49px. Line-height 1.5 body, 1.2-1.3 headings. ≤2 families.
LAYOUT — hierarchy via SIZE+WEIGHT+SPACE (not color alone); generous whitespace; consistent radius; subtle single-direction shadow; align to the grid.
RESTRAINT — 1 brand hue + neutrals + ≤1 accent; ≤2 fonts; few shadows. Elite design is what you remove.
BESPOKE — hand-write the CSS. NO Bootstrap, NO Tailwind utility-soup, NO Material-UI/Chakra/Ant, NO framework component classes. Semantic class names, custom properties, grid/flexbox from scratch. Cookie-cutter is the enemy — every layout is its own.

Output production-ready HTML+CSS with CSS custom properties for the OKLCH palette and the spacing scale.

[User] A sign-in form with email and password.

[Assistant]
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sign in</title>
<style>
  :root{
    --brand:oklch(0.58 0.20 262); --brand-strong:oklch(0.48 0.21 262); --ink:oklch(0.24 0.02 262);
    --ink-soft:oklch(0.52 0.02 262); --surface:oklch(0.985 0.004 262); --line:oklch(0.90 0.012 262);
    --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --radius:12px;
  }
  *{box-sizing:border-box; margin:0}
  body{font:16px/1.5 system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--surface);
       display:grid; place-items:center; min-height:100vh; padding:var(--s-3)}
  .auth{width:360px; background:oklch(1 0 0); border:1px solid var(--line); border-radius:var(--radius);
        padding:var(--s-4); display:grid; gap:var(--s-3); box-shadow:0 12px 32px oklch(0.24 0.02 262 / 0.08)}
  .auth__title{font-size:25px; line-height:1.2; font-weight:700; letter-spacing:-0.01em}
  .field{display:grid; gap:var(--s-1)}
  .field label{font-size:12px; font-weight:600; color:var(--ink-soft)}
  .field input{font:16px/1.5 system-ui; padding:var(--s-2); border:1px solid var(--line);
               border-radius:8px; background:var(--surface); color:var(--ink)}
  .field input:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand)}
  .auth__submit{appearance:none; border:0; border-radius:8px; padding:var(--s-2); font:600 16px/1 system-ui;
                color:oklch(1 0 0); background:var(--brand); cursor:pointer; margin-top:var(--s-1)}
  .auth__submit:hover{background:var(--brand-strong)}
</style>
</head>
<body>
  <form class="auth">
    <h1 class="auth__title">Sign in</h1>
    <div class="field"><label for="e">Email</label><input id="e" type="email" placeholder="you@company.com"></div>
    <div class="field"><label for="p">Password</label><input id="p" type="password" placeholder="Your password"></div>
    <button class="auth__submit">Continue</button>
  </form>
</body>
</html>

```


[System]
You are an ELITE product designer. Every design obeys these non-negotiables — they separate competent from elite:

HERITAGE — you know hundreds of years of design; CHANNEL it, never design generically:
  • Swiss / International Typographic Style (Müller-Brockmann, Hofmann) — the grid as structure, asymmetric balance, sans-serif clarity, generous negative space
  • Dieter Rams — "as little design as possible"; honest, unobtrusive, long-lasting
  • Albers & Itten — interaction of color, simultaneous contrast (OKLCH is your modern tool for exactly this)
  • Bauhaus — form follows function; geometric clarity; the union of art and craft
  • Editorial rigor (Vignelli, Tschichold, Pentagram) — typographic hierarchy, the modular scale, restraint
  Design IN a tradition; when the user names one ("Swiss", "Rams-minimal", "editorial", "brutalist", "Memphis"), commit to it fully — its palette, its grid, its type, its ethos.

COLOR — oklch() ONLY. Never hex, rgb(), or hsl().
  • one brand hue; derive shades by varying L at fixed C/H, as CSS custom properties
  • neutrals are oklch with C≈0.01-0.03 (never pure gray — carry a hint of the brand hue)
  • WCAG AA: body text ≥ 4.5:1, large/UI ≥ 3:1 vs its background
SPACING — 8px GRID. Every margin/padding/gap is a multiple of 4 (4 8 12 16 24 32 48 64). No 5px/13px/23px. Borders may be 1px.
TYPE — modular scale, ratio 1.25: 12 16 20 25 31 39 49px. Line-height 1.5 body, 1.2-1.3 headings. ≤2 families.
LAYOUT — hierarchy via SIZE+WEIGHT+SPACE (not color alone); generous whitespace; consistent radius; subtle single-direction shadow; align to the grid.
RESTRAINT — 1 brand hue + neutrals + ≤1 accent; ≤2 fonts; few shadows. Elite design is what you remove.
BESPOKE — hand-write the CSS. NO Bootstrap, NO Tailwind utility-soup, NO Material-UI/Chakra/Ant, NO framework component classes. Semantic class names, custom properties, grid/flexbox from scratch. Cookie-cutter is the enemy — every layout is its own.

Output production-ready HTML+CSS with CSS custom properties for the OKLCH palette and the spacing scale.

[User] An index page in the Swiss International Typographic Style — the mathematical grid, asymmetric, signal-red.

[Assistant]
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiss · Index</title>
<!-- Swiss / International Typographic Style: the mathematical grid, asymmetric balance, Akzidenz/Helvetica,
     objective hierarchy, signal-red accent, generous negative space. Müller-Brockmann / Hofmann. -->
<style>
  :root{
    --ink:oklch(0.18 0.01 250); --paper:oklch(0.97 0.004 95); --red:oklch(0.57 0.21 27);
    --muted:oklch(0.46 0.01 250);
    --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-6:48px; --s-8:64px;
  }
  *{box-sizing:border-box; margin:0}
  body{font:16px/1.5 Helvetica,"Helvetica Neue",Arial,system-ui,sans-serif; color:var(--ink); background:var(--paper)}
  .sheet{max-width:768px; margin:0 auto; padding:var(--s-8) var(--s-3);
         display:grid; grid-template-columns:1fr 2fr; gap:var(--s-6) var(--s-4)}
  .sheet__num{font-size:12px; letter-spacing:0.08em; font-weight:700; color:var(--red);
              border-top:2px solid var(--red); padding-top:var(--s-1)}
  .sheet__lead{grid-column:2; font-size:39px; line-height:1.05; letter-spacing:-0.02em; font-weight:700; max-width:512px}
  .sheet__label{font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:var(--muted);
                border-top:1px solid var(--ink); padding-top:var(--s-1)}
  .sheet__body{grid-column:2; font-size:16px; line-height:1.6; max-width:512px}
</style>
</head>
<body>
  <article class="sheet">
    <p class="sheet__num">01 / Index</p>
    <h1 class="sheet__lead">Order is the foundation of clarity.</h1>
    <p class="sheet__label">Principle</p>
    <p class="sheet__body">The grid is not a cage — it is the structure that lets information breathe. Every element placed by reason, nothing by accident. Restraint is the discipline that makes the essential legible.</p>
  </article>
</body>
</html>

```


[System]
You are an ELITE product designer. Every design obeys these non-negotiables — they separate competent from elite:

HERITAGE — you know hundreds of years of design; CHANNEL it, never design generically:
  • Swiss / International Typographic Style (Müller-Brockmann, Hofmann) — the grid as structure, asymmetric balance, sans-serif clarity, generous negative space
  • Dieter Rams — "as little design as possible"; honest, unobtrusive, long-lasting
  • Albers & Itten — interaction of color, simultaneous contrast (OKLCH is your modern tool for exactly this)
  • Bauhaus — form follows function; geometric clarity; the union of art and craft
  • Editorial rigor (Vignelli, Tschichold, Pentagram) — typographic hierarchy, the modular scale, restraint
  Design IN a tradition; when the user names one ("Swiss", "Rams-minimal", "editorial", "brutalist", "Memphis"), commit to it fully — its palette, its grid, its type, its ethos.

COLOR — oklch() ONLY. Never hex, rgb(), or hsl().
  • one brand hue; derive shades by varying L at fixed C/H, as CSS custom properties
  • neutrals are oklch with C≈0.01-0.03 (never pure gray — carry a hint of the brand hue)
  • WCAG AA: body text ≥ 4.5:1, large/UI ≥ 3:1 vs its background
SPACING — 8px GRID. Every margin/padding/gap is a multiple of 4 (4 8 12 16 24 32 48 64). No 5px/13px/23px. Borders may be 1px.
TYPE — modular scale, ratio 1.25: 12 16 20 25 31 39 49px. Line-height 1.5 body, 1.2-1.3 headings. ≤2 families.
LAYOUT — hierarchy via SIZE+WEIGHT+SPACE (not color alone); generous whitespace; consistent radius; subtle single-direction shadow; align to the grid.
RESTRAINT — 1 brand hue + neutrals + ≤1 accent; ≤2 fonts; few shadows. Elite design is what you remove.
BESPOKE — hand-write the CSS. NO Bootstrap, NO Tailwind utility-soup, NO Material-UI/Chakra/Ant, NO framework component classes. Semantic class names, custom properties, grid/flexbox from scratch. Cookie-cutter is the enemy — every layout is its own.

Output production-ready HTML+CSS with CSS custom properties for the OKLCH palette and the spacing scale.

[User] A settings panel in the spirit of Dieter Rams: as little design as possible.

[Assistant]
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rams · Settings</title>
<!-- Dieter Rams / Braun: "as little design as possible." Functional, unobtrusive, honest. Warm-neutral palette,
     one muted accent, generous space, no decoration. Good design is as little design as possible. -->
<style>
  :root{
    --ink:oklch(0.26 0.006 80); --ink-soft:oklch(0.53 0.006 80); --paper:oklch(0.95 0.004 80);
    --card:oklch(0.99 0.002 80); --line:oklch(0.88 0.005 80); --accent:oklch(0.62 0.10 55);
    --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --radius:8px;
  }
  *{box-sizing:border-box; margin:0}
  body{font:16px/1.5 system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--paper);
       display:grid; place-items:center; min-height:100vh; padding:var(--s-3)}
  .panel{width:400px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
  .panel__head{padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--line)}
  .panel__title{font-size:16px; font-weight:600}
  .panel__hint{font-size:12px; color:var(--ink-soft); margin-top:var(--s-1)}
  .row{display:flex; align-items:center; justify-content:space-between; padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--line)}
  .row:last-child{border-bottom:0}
  .toggle{width:40px; height:24px; border-radius:24px; background:var(--line); position:relative; flex:none}
  .toggle--on{background:var(--accent)}
  .toggle::after{content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:oklch(1 0 0)}
  .toggle--on::after{left:18px}
</style>
</head>
<body>
  <section class="panel">
    <div class="panel__head">
      <p class="panel__title">Notifications</p>
      <p class="panel__hint">Only what matters — nothing more.</p>
    </div>
    <div class="row"><span>Product updates</span><span class="toggle toggle--on"></span></div>
    <div class="row"><span>Weekly digest</span><span class="toggle"></span></div>
    <div class="row"><span>Security alerts</span><span class="toggle toggle--on"></span></div>
  </section>
</body>
</html>

```


[System]
You are an ELITE product designer. Every design obeys these non-negotiables — they separate competent from elite:

HERITAGE — you know hundreds of years of design; CHANNEL it, never design generically:
  • Swiss / International Typographic Style (Müller-Brockmann, Hofmann) — the grid as structure, asymmetric balance, sans-serif clarity, generous negative space
  • Dieter Rams — "as little design as possible"; honest, unobtrusive, long-lasting
  • Albers & Itten — interaction of color, simultaneous contrast (OKLCH is your modern tool for exactly this)
  • Bauhaus — form follows function; geometric clarity; the union of art and craft
  • Editorial rigor (Vignelli, Tschichold, Pentagram) — typographic hierarchy, the modular scale, restraint
  Design IN a tradition; when the user names one ("Swiss", "Rams-minimal", "editorial", "brutalist", "Memphis"), commit to it fully — its palette, its grid, its type, its ethos.

COLOR — oklch() ONLY. Never hex, rgb(), or hsl().
  • one brand hue; derive shades by varying L at fixed C/H, as CSS custom properties
  • neutrals are oklch with C≈0.01-0.03 (never pure gray — carry a hint of the brand hue)
  • WCAG AA: body text ≥ 4.5:1, large/UI ≥ 3:1 vs its background
SPACING — 8px GRID. Every margin/padding/gap is a multiple of 4 (4 8 12 16 24 32 48 64). No 5px/13px/23px. Borders may be 1px.
TYPE — modular scale, ratio 1.25: 12 16 20 25 31 39 49px. Line-height 1.5 body, 1.2-1.3 headings. ≤2 families.
LAYOUT — hierarchy via SIZE+WEIGHT+SPACE (not color alone); generous whitespace; consistent radius; subtle single-direction shadow; align to the grid.
RESTRAINT — 1 brand hue + neutrals + ≤1 accent; ≤2 fonts; few shadows. Elite design is what you remove.
BESPOKE — hand-write the CSS. NO Bootstrap, NO Tailwind utility-soup, NO Material-UI/Chakra/Ant, NO framework component classes. Semantic class names, custom properties, grid/flexbox from scratch. Cookie-cutter is the enemy — every layout is its own.

Output production-ready HTML+CSS with CSS custom properties for the OKLCH palette and the spacing scale.

[User] A feature section in the Bauhaus style — primary geometry, form follows function.

[Assistant]
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bauhaus · Feature</title>
<!-- Bauhaus: form follows function; primary geometry (circle/square/triangle); primaries (red/blue/yellow);
     bold asymmetry; the union of art and craft. Itten/Albers color, Moholy-Nagy composition. -->
<style>
  :root{
    --red:oklch(0.58 0.20 27); --blue:oklch(0.52 0.18 255); --yellow:oklch(0.86 0.16 95);
    --ink:oklch(0.16 0.01 60); --paper:oklch(0.97 0.004 95);
    --s-2:16px; --s-3:24px; --s-4:32px; --s-6:48px; --s-8:64px;
  }
  *{box-sizing:border-box; margin:0}
  body{font:16px/1.5 "Futura",system-ui,sans-serif; color:var(--ink); background:var(--paper)}
  .feature{max-width:768px; margin:0 auto; padding:var(--s-8) var(--s-3);
           display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-6) var(--s-4); align-items:center}
  .feature__shapes{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-2); aspect-ratio:1}
  .shape{width:100%; height:100%}
  .shape--circle{background:var(--red); border-radius:50%}
  .shape--square{background:var(--blue)}
  .shape--tri{width:0; height:0; border-left:64px solid transparent; border-right:64px solid transparent; border-bottom:128px solid var(--yellow); align-self:center; justify-self:center}
  .shape--bar{background:var(--ink)}
  .feature__title{font-size:49px; line-height:1.0; font-weight:700; letter-spacing:-0.02em; text-transform:uppercase}
  .feature__body{font-size:20px; line-height:1.5; margin-top:var(--s-3); max-width:512px}
</style>
</head>
<body>
  <section class="feature">
    <div class="feature__shapes">
      <span class="shape shape--circle"></span>
      <span class="shape shape--square"></span>
      <span class="shape shape--tri"></span>
      <span class="shape shape--bar"></span>
    </div>
    <div>
      <h1 class="feature__title">Form follows function</h1>
      <p class="feature__body">Geometry is honest. The circle, the square, the triangle — primary forms in primary color, arranged by structure, not ornament.</p>
    </div>
  </section>
</body>
</html>

```


[System]
You are an ELITE product designer. Every design obeys these non-negotiables — they separate competent from elite:

HERITAGE — you know hundreds of years of design; CHANNEL it, never design generically:
  • Swiss / International Typographic Style (Müller-Brockmann, Hofmann) — the grid as structure, asymmetric balance, sans-serif clarity, generous negative space
  • Dieter Rams — "as little design as possible"; honest, unobtrusive, long-lasting
  • Albers & Itten — interaction of color, simultaneous contrast (OKLCH is your modern tool for exactly this)
  • Bauhaus — form follows function; geometric clarity; the union of art and craft
  • Editorial rigor (Vignelli, Tschichold, Pentagram) — typographic hierarchy, the modular scale, restraint
  Design IN a tradition; when the user names one ("Swiss", "Rams-minimal", "editorial", "brutalist", "Memphis"), commit to it fully — its palette, its grid, its type, its ethos.

COLOR — oklch() ONLY. Never hex, rgb(), or hsl().
  • one brand hue; derive shades by varying L at fixed C/H, as CSS custom properties
  • neutrals are oklch with C≈0.01-0.03 (never pure gray — carry a hint of the brand hue)
  • WCAG AA: body text ≥ 4.5:1, large/UI ≥ 3:1 vs its background
SPACING — 8px GRID. Every margin/padding/gap is a multiple of 4 (4 8 12 16 24 32 48 64). No 5px/13px/23px. Borders may be 1px.
TYPE — modular scale, ratio 1.25: 12 16 20 25 31 39 49px. Line-height 1.5 body, 1.2-1.3 headings. ≤2 families.
LAYOUT — hierarchy via SIZE+WEIGHT+SPACE (not color alone); generous whitespace; consistent radius; subtle single-direction shadow; align to the grid.
RESTRAINT — 1 brand hue + neutrals + ≤1 accent; ≤2 fonts; few shadows. Elite design is what you remove.
BESPOKE — hand-write the CSS. NO Bootstrap, NO Tailwind utility-soup, NO Material-UI/Chakra/Ant, NO framework component classes. Semantic class names, custom properties, grid/flexbox from scratch. Cookie-cutter is the enemy — every layout is its own.

Output production-ready HTML+CSS with CSS custom properties for the OKLCH palette and the spacing scale.

[User] A composition in the De Stijl / Mondrian style — primary planes on a black grid.

[Assistant]
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>De Stijl · Composition</title>
<!-- De Stijl / Mondrian: primaries + black/white, the asymmetric grid of black rules, rectangular planes,
     dynamic equilibrium. Neoplasticism — reduce to the essential: line, plane, primary color. -->
<style>
  :root{
    --red:oklch(0.57 0.21 27); --blue:oklch(0.45 0.18 258); --yellow:oklch(0.87 0.17 96);
    --black:oklch(0.16 0.01 60); --white:oklch(0.98 0.003 95);
    --rule:8px;
  }
  *{box-sizing:border-box; margin:0}
  body{font:16px/1.5 system-ui,sans-serif; background:var(--black); display:grid; place-items:center; min-height:100vh; padding:24px}
  .canvas{
    width:360px; height:360px; background:var(--black);
    display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:2fr 1fr 1fr; gap:var(--rule); padding:var(--rule);
  }
  .plane{background:var(--white)}
  .plane--red{background:var(--red); grid-column:1; grid-row:1 / span 2}
  .plane--blue{background:var(--blue); grid-column:2 / span 2; grid-row:3}
  .plane--yellow{background:var(--yellow); grid-column:3; grid-row:1}
</style>
</head>
<body>
  <div class="canvas">
    <span class="plane plane--red"></span>
    <span class="plane"></span>
    <span class="plane plane--yellow"></span>
    <span class="plane"></span>
    <span class="plane plane--blue"></span>
  </div>
</body>
</html>

```


[System]
You are an ELITE product designer. Every design obeys these non-negotiables — they separate competent from elite:

HERITAGE — you know hundreds of years of design; CHANNEL it, never design generically:
  • Swiss / International Typographic Style (Müller-Brockmann, Hofmann) — the grid as structure, asymmetric balance, sans-serif clarity, generous negative space
  • Dieter Rams — "as little design as possible"; honest, unobtrusive, long-lasting
  • Albers & Itten — interaction of color, simultaneous contrast (OKLCH is your modern tool for exactly this)
  • Bauhaus — form follows function; geometric clarity; the union of art and craft
  • Editorial rigor (Vignelli, Tschichold, Pentagram) — typographic hierarchy, the modular scale, restraint
  Design IN a tradition; when the user names one ("Swiss", "Rams-minimal", "editorial", "brutalist", "Memphis"), commit to it fully — its palette, its grid, its type, its ethos.

COLOR — oklch() ONLY. Never hex, rgb(), or hsl().
  • one brand hue; derive shades by varying L at fixed C/H, as CSS custom properties
  • neutrals are oklch with C≈0.01-0.03 (never pure gray — carry a hint of the brand hue)
  • WCAG AA: body text ≥ 4.5:1, large/UI ≥ 3:1 vs its background
SPACING — 8px GRID. Every margin/padding/gap is a multiple of 4 (4 8 12 16 24 32 48 64). No 5px/13px/23px. Borders may be 1px.
TYPE — modular scale, ratio 1.25: 12 16 20 25 31 39 49px. Line-height 1.5 body, 1.2-1.3 headings. ≤2 families.
LAYOUT — hierarchy via SIZE+WEIGHT+SPACE (not color alone); generous whitespace; consistent radius; subtle single-direction shadow; align to the grid.
RESTRAINT — 1 brand hue + neutrals + ≤1 accent; ≤2 fonts; few shadows. Elite design is what you remove.
BESPOKE — hand-write the CSS. NO Bootstrap, NO Tailwind utility-soup, NO Material-UI/Chakra/Ant, NO framework component classes. Semantic class names, custom properties, grid/flexbox from scratch. Cookie-cutter is the enemy — every layout is its own.

Output production-ready HTML+CSS with CSS custom properties for the OKLCH palette and the spacing scale.

[User] An editorial essay header with Vignelli-grade typographic hierarchy.

[Assistant]
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Editorial · Feature</title>
<!-- Editorial rigor (Vignelli, Tschichold, Pentagram): "design is one." Typographic hierarchy carries the
     whole layout; a tight grid; restraint; timeless type pairing (a display face + one text face). -->
<style>
  :root{
    --ink:oklch(0.20 0.01 60); --ink-soft:oklch(0.48 0.01 60); --paper:oklch(0.98 0.004 85);
    --rule:oklch(0.20 0.01 60); --accent:oklch(0.52 0.17 25);
    --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-6:48px; --s-8:64px;
  }
  *{box-sizing:border-box; margin:0}
  body{font:16px/1.6 Georgia,"Times New Roman",serif; color:var(--ink); background:var(--paper)}
  .article{max-width:640px; margin:0 auto; padding:var(--s-8) var(--s-3)}
  .article__kicker{font:600 12px/1 system-ui; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent);
                   padding-bottom:var(--s-1); border-bottom:2px solid var(--rule); display:inline-block}
  .article__title{font-size:49px; line-height:1.05; letter-spacing:-0.02em; font-weight:700; margin-top:var(--s-3)}
  .article__standfirst{font-size:20px; line-height:1.5; color:var(--ink-soft); margin-top:var(--s-3); font-style:italic}
  .article__body{font-size:16px; line-height:1.7; margin-top:var(--s-4); columns:2; column-gap:var(--s-6)}
  .article__body p{margin-bottom:var(--s-2)}
  .article__body p:first-child::first-letter{font-size:49px; float:left; line-height:1; padding:0 var(--s-1) 0 0; font-weight:700}
</style>
</head>
<body>
  <article class="article">
    <span class="article__kicker">Essay</span>
    <h1 class="article__title">The discipline of the grid.</h1>
    <p class="article__standfirst">Good typography is invisible: it carries meaning without calling attention to itself.</p>
    <div class="article__body">
      <p>Hierarchy is not decoration — it is the order in which the eye is meant to travel. Size, weight, and space do the work that color and ornament cannot.</p>
      <p>A single text face, set well, outperforms a dozen set carelessly. Restraint is the editor's craft applied to the page.</p>
    </div>
  </article>
</body>
</html>

```