# The Cream Background Is a Default, Not a Choice

**NEVER** · **ID:** `aesthetics-impeccable-cream-palette` · **Category:** aesthetics
**Source:** [impeccable](https://impeccable.style/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/aesthetics-impeccable-cream-palette

> NEVER: Reach for the reflexive warm cream/beige page surface — mechanically: `min(r,g,b) >= 209`, channels ordered `r >= g >= b`, and warmth `r - b` between 6 and 48, which catches `bg-amber-50/100`, `bg-orange-50/100`, `bg-yellow-50`, and `bg-stone-50/100/200`. If you can guess the palette from the product's domain alone, it is the training-data reflex. Derive the surface instead: hold the brand hue angle and drop chroma to roughly 0.01.

Derive the page surface from the brand hue rather than reaching for the reflexive warm beige

Cream is mechanically identifiable: min(r,g,b) >= 209, channels ordered r >= g >= b, and warmth (r - b) between 6 and 48. That window also catches Tailwind's bg-amber-50/100, bg-orange-50/100, bg-yellow-50 and bg-stone-50/100/200 — the exact classes a generator picks when it wants to look considered. Pair the check with the skill's category-reflex test: if you can guess the palette from the product's domain alone (fintech blue, wellness sage, AI-tool cream), it is the training-data reflex talking, not a decision. The fix is derivation, not avoidance — take the brand hue, hold the hue angle, and drop chroma to roughly 0.01 for a tinted neutral that belongs to this product and no other.

## Bad — do not do this

`aesthetics-cream-palette-bad`

```tsx
const siblings = ['Ledger — accounting', 'Sprout — plant care', 'Vellum — legal AI'];

export function CreamPaletteBad() {
  return (
    <div className="w-full">
      {/* The cream IS the anti-pattern, so it is pinned to its literal value and stays light in both themes */}
      <div className="rounded-lg border border-border bg-[#faf7f0] p-6">
        <p className="text-[11px] font-medium text-stone-500 mb-4">Ledger — accounting</p>
        <h1
          className="text-2xl leading-tight text-stone-800"
          style={{ fontFamily: "'Playfair Display', Georgia, serif" }}
        >
          Books that balance themselves.
        </h1>
        <p className="text-sm text-stone-600 mt-3 max-w-prose">
          Warm, calm, considered. Everyone says it looks tasteful.
        </p>
      </div>

      {/* Three unrelated products, three unrelated domains, the exact same surface */}
      <div className="grid grid-cols-3 gap-3 mt-3">
        {siblings.map((s) => (
          <div key={s} className="rounded-md border border-border bg-[#faf7f0] p-3">
            <p className="text-[10px] text-stone-500 truncate">{s}</p>
            <div className="h-1.5 w-full rounded bg-stone-200 mt-2" />
            <div className="h-1.5 w-2/3 rounded bg-stone-200 mt-1" />
          </div>
        ))}
      </div>

      <p className="text-xs text-error mt-4">
        #faf7f0 passes the detector on every axis: min channel 240 (&ge;209), r &ge; g &ge; b, warmth
        r&minus;b = 16 (inside 6&ndash;48). It reads as taste, but accounting, plant care, and legal
        AI all landed on it — that is a training-data reflex, not a decision.
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-cream-palette-good`

```tsx
export function CreamPaletteGood() {
  return (
    <div className="w-full">
      {/* Surface is derived from the brand hue: same hue angle (264), chroma dropped to ~0.01 */}
      <div className="rounded-lg border border-border bg-[oklch(0.97_0.012_264)] dark:bg-[oklch(0.23_0.014_264)] p-6">
        <p className="text-[11px] font-medium text-[oklch(0.55_0.18_264)] dark:text-[oklch(0.75_0.13_264)] mb-4">
          Ledger — accounting
        </p>
        <h1 className="text-2xl leading-tight font-semibold tracking-tight text-[oklch(0.26_0.03_264)] dark:text-[oklch(0.95_0.01_264)]">
          Books that balance themselves.
        </h1>
        <p className="text-sm mt-3 max-w-prose text-[oklch(0.48_0.03_264)] dark:text-[oklch(0.72_0.02_264)]">
          The page is not neutral and it is not cream. It is the brand, turned all the way down.
        </p>
      </div>

      {/* Show the derivation, so the surface is auditable rather than vibes */}
      <div className="mt-3 rounded-md border border-border bg-card p-3">
        <div className="flex items-center gap-3">
          <div className="h-8 w-8 shrink-0 rounded border border-border bg-[oklch(0.55_0.18_264)]" />
          <span className="text-muted-foreground text-xs">→ hold hue, cut chroma →</span>
          <div className="h-8 w-8 shrink-0 rounded border border-border bg-[oklch(0.97_0.012_264)]" />
        </div>
        <p className="font-mono text-[11px] text-muted-foreground mt-2">
          brand oklch(0.55 0.18 264) → surface oklch(0.97 0.012 264)
        </p>
      </div>

      <p className="text-xs text-success mt-4">
        A tinted neutral at chroma 0.01, derived from the brand hue rather than reached for. It
        fails the cream test (channels are not r &ge; g &ge; b, warmth is negative), and you could not
        have guessed it from the word &ldquo;accounting&rdquo;.
      </p>
    </div>
  );
}
```

## References

- [impeccable](https://impeccable.style/)
- [Tailwind color palette](https://tailwindcss.com/docs/colors)
- [OKLCH color picker](https://oklch.com/)