Automattic Soft Gradient Dreamy
Transform a page from flat cold SaaS into a warm, atmospheric, depth-rich aesthetic. Extracted from Hex, Antimetal, Incident.io, Outseta, Cohere, Amplemarket, Duna, Reducto.
When to invoke
- Design feels "cold," "generic," "SaaS-template"
- User asks for "dreamy," "warm," "premium," "atmospheric," "editorial"
- Page background is pure
#ffffffor#f9fafb - Shadows are flat
0 4px 6px rgba(0,0,0,0.1)Tailwind defaults - Gradient hero is the generic purple→blue diagonal
The 6 core rules
Rule 1: Never use pure white as page background
Use a warm or cool off-white, 2–5% shifted from #fff:
/* Warm grounds (dominant pattern) */
--bg-warm-paper: #f5f2f0; /* Cohere */
--bg-cream: #f7f7f5; /* Duna */
--bg-stone: #f8f8f6; /* Reducto */
--bg-soft: #fafafa; /* Shade, Autosend */
--bg-warm-off: #fbfaf9; /* Amplemarket */
--bg-cool-off: #f8f9fc; /* Antimetal light */
--bg-opal: #FBF9F9; /* Hex */
/* Dark theme → go WARM, not black */
--bg-warm-dark: #100d0a; /* Antimetal dark */
--bg-deep-plum: #1b0624; /* Duna dark sections */
--bg-obsidian: #14141C; /* Hex dark */
--bg-alarmalade: #f8f5ef; /* Incident warm surface */
Anti-pattern: background: #ffffff or background: #f9fafb (cold gray).
Rule 2: Shadows must be tinted — never neutral black
Every case-study site tints shadows to match the theme's dominant hue. Copy these patterns directly:
/* Aubergine-tinted (Outseta) — for warm purple-leaning designs */
--shadow-aubergine: 0 0 0 1px hsl(293deg 100% 7% / 0.11),
0 2px 2px 0 hsl(293deg 100% 7% / 0.05);
/* Rose-tinted (Hex) — for warm pink/stone designs */
--shadow-rose: 0 0 24px 0px rgba(245,192,192,0.23) inset,
6px 27px 10px 0px rgba(100,63,63,0.01),
4px 4px 10px 0px rgba(100,63,63,0.04),
2px 13px 8px 0px rgba(100,63,63,0.06),
1px 6px 6px 0px rgba(100,63,63,0.06),
0px 1px 3px 0px rgba(100,63,63,0.18);
/* Plum-tinted (Duna) — Figma-exported sub-pixel precision */
--shadow-plum: 0 0.6021873px 1.8065619px -0.6666667px rgba(45,32,50,0.08),
0 2.288533px 6.8656px -1.3333333px rgba(45,32,50,0.09),
0 10px 30px -2px rgba(45,32,50,0.12);
/* Cool blue-gray (Cal) — for neutral, "calm software" */
--shadow-cal: 0px 1px 5px -4px rgba(19,19,22,0.7),
0px 0px 0px 1px rgba(34,42,53,0.08),
0px 4px 8px 0px rgba(34,42,53,0.05);
/* Theme-mixed (Antimetal) — shadow inherits the hero color via color-mix */
--shadow-themed: 0 48px 56px color-mix(in srgb, var(--color-hero) 8%, transparent),
0 24px 32px color-mix(in srgb, var(--color-hero) 12%, transparent),
inset 0 .5px .5px color-mix(in srgb, var(--color-hero) 24%, transparent),
inset 0 -.5px .5px color-mix(in srgb, var(--color-hero) 24%, transparent),
inset 0 0 0 1px color-mix(in srgb, var(--color-hero) 6%, transparent);
Anti-pattern: box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) (Tailwind default).
Rule 3: Stack 3–8 shadow layers for real atmosphere
Premium sites never ship a single-layer shadow. The formula:
Layer 1: 1px ring (hairline outline) → 0 0 0 1px rgba(...tint..., 0.06-0.11)
Layer 2: Short contact (close lift) → 0 1px 2px rgba(...tint..., 0.05)
Layer 3: Medium ambient (mid distance) → 0 4-8px 16-24px rgba(...tint..., 0.05-0.08)
Layer 4: Long ambient (far glow) → 0 24-56px 56-88px rgba(...tint..., 0.05-0.20)
Layer 5: Top inset highlight → inset 0 .5px .5px rgba(255,255,255,0.24)
Layer 6: Bottom inset highlight → inset 0 -.5px .5px rgba(255,255,255,0.24)
Antimetal's 8-layer signature (copy verbatim):
box-shadow:
0 56px 88px #0a08061a,
0 16px 40px #0a08060d,
0 4px 12px #0a080605,
0 0 0 1px #0a08060a,
inset 0 4px 12px -6px #e0f6ff0f,
inset 0 .5px .5px #e0f6ff3d,
inset 0 0 0 1px #e0f6ff0f,
inset 0 -.5px .5px #e0f6ff3d;
Hex's rose floating-card (exaggerated 103px blur for maximum atmosphere):
box-shadow:
0 0 0 1px rgba(49,38,59,0.22),
0 103px 103px 0 rgba(49,38,59,0.09),
0 26px 57px 0 rgba(49,38,59,0.10);
Rule 4: Gradients are never the default 135° purple→blue
When you use a gradient, be intentional about:
- Angle (specific degree, not 45/135)
- Palette (warm or intentional 3+ stop)
- Usage (ambient wash, text clip, or signature art — rarely as a button background)
Incident.io's "Alarmalade" — 3-stop 70° brand gradient:
background: linear-gradient(70deg, #f25533 31%, #f1cd98 82%, #f8f5ef 100%);
Cohere's signature — 78° coral-to-blue, a full warm-to-cool journey:
background: linear-gradient(78deg, #ff7759, #7670c5 60%, #4c6ee6 90%);
Angellist's painterly plate — 9-stop gallery art (used inside 200–300px radius rectangles):
background: linear-gradient(195.85deg,
#6258ff -121.25%, #e06ab2 -69.08%, #fb8569 -36.55%,
#ffb1b1 12.07%, #cdcbff 59.26%, #7e6f4a 126.83%,
#32607f 172.94%, #fde8b5 277.03%);
Outseta's warm diagonal — peach/cream/yellow wash behind hero:
background: linear-gradient(145deg, hsl(47deg 100% 87%), #2900290d 30%);
Antimetal's subtle double-wash — stacked vertical ambient at 4% opacity:
background:
linear-gradient(0deg, #e0f6ff0a 0%, #e0f6ff0a 100%),
linear-gradient(180deg, #e0f6ff0a 0%, #0000 25%, #0000 90%, #e0f6ff0a 100%),
var(--bg-page);
Amplemarket's radial mouse-tracking — WebGL-shader gradient painted on hero text:
background: radial-gradient(
80.17% 109.2% at var(--gradient-posX, 54.31%) var(--gradient-posY, 61.46%),
var(--violet) 0%,
var(--peach) var(--gradient-stop1, 49.83%),
var(--phoenix-orange) var(--gradient-stop2, 99.99%));
Anti-pattern: linear-gradient(135deg, #667eea 0%, #764ba2 100%) (every AI site).
Rule 5: Inset highlights simulate dual-edge lighting on cards
Cards feel lit from within when you add inset highlights on TOP and BOTTOM edges:
box-shadow:
/* ambient drop */
0 24px 32px 0 rgba(10,8,5,0.12),
/* 1px ring */
inset 0 0 0 1px rgba(255,255,255,0.06),
/* top highlight — simulates light hitting top edge */
inset 0 .5px .5px rgba(255,255,255,0.24),
/* bottom highlight — simulates rim light on bottom edge */
inset 0 -.5px .5px rgba(255,255,255,0.24);
This makes the card appear "glassy" rather than "floating." Antimetal's signature.
Rule 6: Buttons get ambient stack + inset highlight
Buttons are the most imitated element. Make them physical:
Amplemarket's keycap stack (4 drops + 2 insets, copy verbatim):
box-shadow:
0 6px 2px #11111103,
0 3px 2px #1111110D,
0 1px 1px #11111117,
0 0 1px #1111111f,
inset 0 6px 12px #ffffff33,
inset 0 1px 1px #fff3;
/* Active state inverts the inset — feels truly pressed */
box-shadow:
0 6px 2px #11111103,
0 3px 2px #1111110D,
0 1px 1px #11111117,
0 0 1px #1111111f,
inset 0 6px 12px #11111133,
inset 0 1px 1px #111111f3;
Cal's highlight lip (1px white inset on top edge):
background: #141414;
box-shadow:
0px 1px 5px -4px rgba(19,19,22,0.7),
0px 0px 0px 1px rgba(34,42,53,0.08),
0px 4px 8px 0px rgba(34,42,53,0.05),
inset 0px 2px 0px 0px rgb(255,255,255); /* ← top edge highlight */
Application workflow
Apply these in order when retrofitting a page:
- Swap the background — page from
#fff→ warm off-white (#fafafa/#f5f2f0/#f7f7f5) - Pick a shadow tint — what hue dominates your theme? Warm purple → aubergine. Warm pink → rose. Warm neutral → plum. Cool neutral → blue-gray. Commit to one tinted shadow system across the whole page.
- Replace every
shadow-sm/md/lg/xlwith a stacked multi-layer shadow using that tint - Add inset highlights to cards (top + bottom 0.5px at ~24% tint)
- Redesign the gradient hero with a deliberate multi-stop warm palette at a non-default angle
- Upgrade buttons to ambient-stack + inset-highlight shadows; keep them flat color (no gradient button backgrounds)
Ready-to-use CSS blocks
Dreamy light theme starter
:root {
/* Warm paper ground */
--bg-page: #f7f7f5;
--bg-card: #ffffff;
--bg-sunken: #f1ebe2;
/* Warm plum-tinted text */
--text-primary: #222221;
--text-secondary: #4d4846;
--text-muted: #898683;
/* Theme-matched shadow tint */
--shadow-tint: 45, 32, 50; /* warm plum */
/* Hairline border */
--border-hairline: rgba(0, 0, 0, 0.06);
/* Multi-layer card shadow */
--shadow-card:
0 0.6021873px 1.8065619px -0.667px rgba(var(--shadow-tint), 0.08),
0 2.288533px 6.8656px -1.333px rgba(var(--shadow-tint), 0.09),
0 10px 30px -2px rgba(var(--shadow-tint), 0.12);
/* Floating card (deeper) */
--shadow-float:
0 0 0 1px rgba(var(--shadow-tint), 0.06),
0 4px 12px rgba(var(--shadow-tint), 0.04),
0 16px 40px rgba(var(--shadow-tint), 0.06),
0 56px 88px rgba(var(--shadow-tint), 0.08),
inset 0 .5px .5px rgba(255,255,255,0.24),
inset 0 -.5px .5px rgba(255,255,255,0.24);
}
body { background: var(--bg-page); color: var(--text-primary); }
.card { background: var(--bg-card); box-shadow: var(--shadow-card); border-radius: 16px; }
.card--float { box-shadow: var(--shadow-float); }
Dreamy dark theme (Antimetal-inspired)
.theme-dark {
--bg-page: #100d0a; /* warm near-black */
--bg-card: #17130f;
--color-hero: #fff3d7; /* WARM CREAM — not cool white */
--text-primary: #fff3d7;
--text-secondary: #fff3d7b8;
--shadow-card:
0 0 0 1px color-mix(in srgb, var(--color-hero) 4%, transparent),
0 6px 16px rgba(0,0,0,0.25),
inset 0 .5px 1px color-mix(in srgb, var(--color-hero) 8%, transparent),
inset 0 1px 2px color-mix(in srgb, var(--color-hero) 6%, transparent),
inset 0 0 0 1px color-mix(in srgb, var(--color-hero) 6%, transparent);
}
Site references (what each pattern is extracted from)
| Pattern | Source sites |
|---|---|
| Warm off-white background | Duna, Reducto, Cohere, Amplemarket, Hex |
| Tinted shadow system | Outseta (aubergine), Hex (rose), Duna (plum), Cal (blue-gray) |
| 8-layer stacked shadow | Antimetal, Hex, Outseta |
| Dual inset highlights | Antimetal, Amplemarket, Cal |
| Multi-stop warm gradient | Incident (70° alarmalade), Cohere (78° coral→blue), Angellist (9-stop) |
color-mix theme-tied shadows |
Antimetal |
| Radial mouse-tracking gradient | Amplemarket (WebGL), Shade (cursor spotlight) |
| Sub-pixel Figma-exported shadows | Duna |
What this skill does NOT do
- Doesn't dictate color palette — pick your own, then tint shadows to match
- Doesn't apply to utility/admin UI (dashboards) — those usually want less atmosphere
- Not for high-contrast accessibility-first interfaces
- Not for motion/micro-interactions (see
motion-and-micro-interactionsskill)