Sandworm

Gradients

ready

A temperature matrix — three roles (hero / accent / brand) × two registers (warm / cool), plus spectrum and neutral specials. Gradients are for hero brand marks and primary CTAs. Over-application kills the signal — reach for the sister gradients only when their specific surface logic applies.

Warm — the default register

Brand gradient — warm-hero ends on violet-600 (#6242e0), settled 2026-06-10. Never violet-500.

warm-hero

THE brand gradient. Hero emphasis spans, GradientButton, customer-story card halos.

sand-3000%red-40050%violet-600100%

Tailwind

bg-gradient-to-r from-sand-300 via-red-400 to-violet-600

CSS

background-image: linear-gradient(to right, var(--sand-300) 0%, var(--red-400) 50%, var(--violet-600) 100%);

warm-accent

Accent strips, narrower CTAs.

sand-3000%red-500100%

Tailwind

bg-gradient-to-r from-sand-300 to-red-500

CSS

background-image: linear-gradient(to right, var(--sand-300) 0%, var(--red-500) 100%);

warm-brand

Light-to-deep, lands on brand magenta. Richer than the old 2-stop sand→magenta.

sand-1000%sand-30033%magenta-60067%magenta-900100%

Tailwind

bg-gradient-to-r from-sand-100 via-sand-300 via-magenta-600 to-magenta-900

CSS

background-image: linear-gradient(to right, var(--sand-100) 0%, var(--sand-300) 33%, var(--magenta-600) 67%, var(--magenta-900) 100%);

Cool — cloud / data / product surfaces

cool-hero

Cool counterpart to warm-hero. Cloud, data, and product surfaces where warm over-saturates.

violet-5000%teal-400100%

Tailwind

bg-gradient-to-r from-violet-500 to-teal-400

CSS

background-image: linear-gradient(to right, var(--violet-500) 0%, var(--teal-400) 100%);

cool-hero-alt

Softer warm↔cool blend variant.

violet-5000%red-150100%

Tailwind

bg-gradient-to-r from-violet-500 to-red-150

CSS

background-image: linear-gradient(to right, var(--violet-500) 0%, var(--red-150) 100%);

cool-accent

Cool accent strips and CTAs.

violet-4000%blue-300100%

Tailwind

bg-gradient-to-r from-violet-400 to-blue-300

CSS

background-image: linear-gradient(to right, var(--violet-400) 0%, var(--blue-300) 100%);

cool-brand

Light-to-deep mirror of warm-brand, lands on violet. Cloud-native brand mark.

blue-1500%teal-30033%violet-60067%violet-900100%

Tailwind

bg-gradient-to-r from-blue-150 via-teal-300 via-violet-600 to-violet-900

CSS

background-image: linear-gradient(to right, var(--blue-150) 0%, var(--teal-300) 33%, var(--violet-600) 67%, var(--violet-900) 100%);

Spectrum & Neutral

spectrum

Full warm↔cool sweep. Reserved for rare showcase or celebration moments — one per page max.

sand-3000%magenta-60025%violet-50050%teal-40075%blue-150100%

Tailwind

bg-gradient-to-r from-sand-300 via-magenta-600 via-violet-500 via-teal-400 to-blue-150

CSS

background-image: linear-gradient(to right, var(--sand-300) 0%, var(--magenta-600) 25%, var(--violet-500) 50%, var(--teal-400) 75%, var(--blue-150) 100%);

depth

Dark structural elevation wash. Not brand-expressive — used for section depth and dark surface layering.

stone-7000%stone-950100%

Tailwind

bg-gradient-to-r from-stone-700 to-stone-950

CSS

background-image: linear-gradient(to right, var(--stone-700) 0%, var(--stone-950) 100%);

depth-light

Light structural elevation wash. Not brand-expressive — used for light section depth.

stone-1500%stone-30050%stone-600100%

Tailwind

bg-gradient-to-r from-stone-150 via-stone-300 to-stone-600

CSS

background-image: linear-gradient(to right, var(--stone-150) 0%, var(--stone-300) 50%, var(--stone-600) 100%);