# Gradient Mesh / Aurora Evolved

> Multi-point mesh gradients with film grain, poured into cards, headlines and payment cards on a calm paper-white page.

- Nickname: Grainy mesh
- Also called: Mesh gradient, Grainy gradient, Aurora 2.0
- Category: Futuristic & Tech
- Moods: Dreamy, Luxury, Bold, Friendly
- Industries: Fintech & Banking, Startup & Tech, Creative & Portfolio, SaaS, Web3 & Crypto
- Style page: https://uilingo.dev/styles/gradient-mesh-aurora-evolved/

Gradient Mesh is the grown-up evolution of aurora backgrounds: instead of a blurred sky behind everything, rich 4–6 point mesh gradients (peach, coral, lilac, cobalt, mint) are used as a material — filling a hero card, a credit card, a KPI tile or the letters of a headline — and always carry a fine film-grain noise so they feel printed and tactile rather than digital. Around them the UI stays quiet: warm off-white paper, ink-black type and buttons, generous rounded corners.

## Best for
- Fintech cards, wallets and neobanks
- Brand and product launch pages
- Pricing and plan highlights
- Creator and design-tool marketing

## Avoid for
- Dense admin tools with many equal cards
- Strictly corporate or government sites
- Low-end devices if meshes are animated

## Do
- Use the mesh on 1–3 hero objects per view, not every surface
- Always overlay fine grain (effective ~15–25%) so gradients don’t band
- Put ink text (#14121A) on pastel mesh and keep it ≥ 4.5:1
- Vary the mesh focal points per card so each feels unique

## Don't
- Don’t blur the mesh into a vague background (that is Aurora)
- Don’t use a smooth two-stop linear gradient — it must have 4+ colour points
- Don’t add glassmorphism blur on top of mesh cards
- Don’t put white text on light peach/lilac areas

## Audit
Passed after 2 rounds · builder unknown · auditor unknown

## Prompt
Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page.

```markdown
# Build a landing web page in the "Gradient Mesh / Aurora Evolved" UI style

Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light

## The style in one line
Multi-point mesh gradients with film grain, poured into cards, headlines and payment cards on a calm paper-white page.
Design keywords: mesh gradient fill, film grain noise, gradient inside cards, gradient headline text, peach coral lilac cobalt, ink black buttons, paper white page, credit-card tiles.

## Visual language
A calm, warm paper-white page (#F6F3EE) with ink-black type and ink pill buttons, where colour arrives as an object: rich multi-point mesh gradients (peach, coral, lilac, cobalt, mint) poured into a few hero objects — a balance card, a featured plan, a KPI tile, the letters of a headline — each finished with fine film grain so it looks printed and tactile. Big rounded corners (24–32px), soft long shadows and generous space make it feel premium and editorial rather than techy.

## Signature details (must be visible)
- Pastel mesh (--mesh, ink text sits on it) = radial-gradient(at 12% 18%, #FFB98A 0, transparent 55%), radial-gradient(at 88% 8%, #C9B5FF 0, transparent 55%), radial-gradient(at 92% 88%, #9FB4FF 0, transparent 55%), radial-gradient(at 8% 92%, #FFA8C5 0, transparent 55%), radial-gradient(at 55% 52%, #B7F0DE 0, transparent 50%), #FFD9C7
- Mesh variants with different focal points so no two objects match: --mesh-2 = radial-gradient(at 85% 15%, #FFB98A 0, transparent 55%), radial-gradient(at 15% 10%, #A9F0DA 0, transparent 50%), radial-gradient(at 20% 85%, #C9B5FF 0, transparent 55%), radial-gradient(at 90% 90%, #FFA8C5 0, transparent 55%), #DCD3FF; --mesh-3 = radial-gradient(at 50% 0%, #9FB4FF 0, transparent 60%), radial-gradient(at 0% 100%, #FFC79E 0, transparent 55%), radial-gradient(at 100% 70%, #FFA8C5 0, transparent 55%), #E2E8FF
- Rich mesh (--mesh-rich, white text is safe on it) = radial-gradient(at 10% 20%, #F26B2A 0, transparent 55%), radial-gradient(at 85% 10%, #7B4BF0 0, transparent 55%), radial-gradient(at 90% 85%, #2F3FE0 0, transparent 55%), radial-gradient(at 15% 90%, #E2306F 0, transparent 55%), radial-gradient(at 55% 50%, #12A78A 0, transparent 45%), #B53A8C. Used for the CTA block, bar fills, checked switch, progress, eyebrow dot, onboarding art, logo and the hero halo
- Ink mesh (--mesh-ink) for the hero key phrase, article title and stat numbers = radial-gradient(at 0% 30%, #D84A16 0, transparent 50%), radial-gradient(at 45% 0%, #C21F5E 0, transparent 50%), radial-gradient(at 75% 80%, #5326C9 0, transparent 50%), radial-gradient(at 100% 20%, #2232C4 0, transparent 50%), #8A2A8F. Grain on text is LAYERED, not blended: background: var(--grain) 0 0/180px 180px, var(--mesh-ink); background-clip:text; color:transparent — the result must read orange → magenta → violet → cobalt, never a single muddy wine colour
- Film grain: an inline SVG feTurbulence (baseFrequency .85, 3 octaves, stitchTiles) tile 180px whose feColorMatrix alpha is .5; it sits in a ::after overlay with mix-blend-mode multiply at opacity .55 on mesh objects and .32 on the page background, so the effective grain is ~27% on objects and ~16% on the page
- Scope: at most 1–3 mesh OBJECTS per viewport (cards, panels, CTA, art blocks). Mesh-filled text, 18px eyebrow dots and 44px icon tiles don't count toward that limit
- Pastel mesh cards always carry ink text (#14121A, ≥ 4.5:1); white text only on the rich mesh
- Ink-black pill buttons (#14121A, white text); hover adds a 3px page-colour gap and a lilac ring 0 0 0 5px var(--ring-hover) #C9B5FF; input focus = 2px surface gap + 4px var(--ring-focus) #9FB4FF
- Hero product shot tilted −2° with the main chart card filled with --mesh-3 and a blurred rich-mesh halo behind it

## Design tokens — use these exact values
Colours (light mode):
  - background #F6F3EE
  - surface #FFFFFF
  - surface-2 #EEE9E1
  - text #14121A
  - text-muted #5D5866
  - primary #14121A (text on it #FFFFFF)
  - secondary #3A3FE0 (text on it #FFFFFF)
  - accent #E8487A
  - border rgba(20,18,26,0.10)
  - success #0F8A5F · warning #B4610B · danger #D2304F
  - chart series #3A3FE0, #E8487A, #F08A3E, #8E63F2, #1FB59A
Radius: sm 10px, md 16px, lg 24px, xl 32px, pill 999px
Border width: 1px
Shadows: sm `0 1px 2px rgba(20,18,26,0.06)`, md `0 12px 32px -8px rgba(20,18,26,0.14)`, lg `0 30px 70px -20px rgba(58,40,90,0.30)` (where shadows reference var(--c-border) use the border colour)
Spacing: 8px base unit × 1.05 density
Motion: 300ms cubic-bezier(.2,.9,.25,1)

## Typography (Latin + Thai)
- Headings: Bricolage Grotesque 600/700 with Thai fallback Kanit 500/600
- Body: DM Sans 400/500/700 with Thai fallback IBM Plex Sans Thai 400/500/600
- Mono: DM Mono
- Google Fonts URL: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700&family=DM+Sans:wght@400;500;700&family=DM+Mono:wght@400;500&family=Kanit:wght@500;600&family=IBM+Plex+Sans+Thai:wght@400;500;600&display=swap
- CSS stacks: heading `"Bricolage Grotesque", "Kanit", system-ui, sans-serif`; body `"DM Sans", "IBM Plex Sans Thai", system-ui, sans-serif`; mono `"DM Mono", ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to IBM Plex Sans Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face.
- Display size clamp(3rem, 7vw, 5.75rem), heading weight 600, heading tracking -0.04em (Latin only), sentence-case labels.
- Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side.
- Why this pairing: Kanit’s punchy loopless forms match Bricolage Grotesque’s chunky ink-trap headlines; IBM Plex Sans Thai keeps body copy as neutral and clear as DM Sans.

## Components
- Primary button: ink pill, white text, soft dark drop shadow; hover = lilac double ring (--ring-hover); secondary = white pill with 1px hairline and tiny shadow
- Bento features: lead card filled with pastel mesh + grain, large 2rem ink title, white sibling cards with small mesh-filled 44px icon tiles (mesh / mesh-2 / mesh-3 rotating)
- Featured pricing plan: --mesh-2 fill with ink text, an ink button (#14121A fill, white text — not the cobalt secondary token) and an ink badge; other plans plain white
- Eyebrow: white pill with a hairline border and an 18px rich-mesh dot
- Inputs: white, 16px radius; focus = 2px white gap + 4px periwinkle ring (--ring-focus #9FB4FF); selected radio cards fill with pastel mesh and an ink 2px outline
- Badges: neutral sand fill; status badges as soft tints; 'solid' badge = pastel mesh with ink text
- Dashboard: first KPI tile is a pastel mesh card, others white; sidebar active item is an ink pill; series colours cobalt/coral/orange/violet/mint with 3px lines on white cards only; bar fills use the rich mesh
- Charts drawn on a mesh card use ink #14121A lines at 2px (no series colours on mesh)
- FAQ toggles: 28px round mesh buttons with +/−
- CTA: full rich-mesh block with grain, white headline, white pill input and ink button
- Stack note: apply mesh through a modifier class or a higher-specificity selector (e.g. .ui-card.is-mesh, .card--mesh) so plain card background rules don't override it; the components/kit page title also uses the ink-mesh text fill

## Layout for this web page
Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer.
Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → logos → features → stats → showcase → pricing → faq → cta. Feature section as bento.
Use a split hero (copy left, tilted mesh product shot right), then logos, a bento feature grid with one big mesh card, oversized ink-mesh stat numbers, a mesh-framed showcase, pricing with one mesh plan, FAQ and a rich-mesh CTA. Keep at most 1–3 mesh objects in any viewport; everything else is white cards on paper (#F6F3EE) carrying the page grain. Dashboards use a light sidebar, ink active pill, one mesh KPI and a line + comparison + table + donut mix.

## Content
Use realistic product copy (fictional brand) suited to: Fintech cards, wallets and neobanks. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match.

## Do
- Use the mesh on 1–3 hero objects per view, not every surface
- Always overlay fine grain (effective ~15–25%) so gradients don’t band
- Put ink text (#14121A) on pastel mesh and keep it ≥ 4.5:1
- Vary the mesh focal points per card so each feels unique

## Don't
- Don’t blur the mesh into a vague background (that is Aurora)
- Don’t use a smooth two-stop linear gradient — it must have 4+ colour points
- Don’t add glassmorphism blur on top of mesh cards
- Don’t put white text on light peach/lilac areas
- Smooth two-stop linear gradients — the look needs 4+ colour points and grain
- Blurring the mesh into a vague full-page background (that is Aurora UI)
- Frosted translucent panels over the mesh (that is Glassmorphism)
- White text on light peach/lilac areas
- Putting mesh on every card, button and list row — it must stay special

## Stack notes
One self-contained HTML file with a <style> block. Declare all tokens as CSS custom properties on :root and build every component from them. No frameworks.

## Acceptance checklist
- Someone who knows the "Gradient Mesh / Aurora Evolved" style recognises it at a glance from the signature details.
- Every colour, radius, border and shadow comes from the tokens above.
- Thai and English text both render in their intended fonts with comfortable line-height.
- Text contrast meets WCAG AA (4.5:1 body, 3:1 large text) unless the style explicitly trades this off.
- Interactive elements have hover, focus-visible and pressed states in the style's language.
```