Style · 13
Gradient Gradient = two named colour stops and an angle; naming them is the difference from a muddy blend.
Name the two stops and the angle, not "colorful".
Preview North Product Pricing Docs Search Get started Two stops. One angle. Two stops. One angle. Campaign on the hero, readable white below.
Get started 120° wash
On white
Ship
Copy on white Body never sits on the wash.
Measure
Two stops only No third stop. No purple.
Price
Team plan Three hairline columns under the hero.
Campaign
Campaign landing Gradient · Minimal
Pricing Gradient
Docs Minimal Page Overall Page Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
BUILD
- Build a complete Gradient campaign / product landing homepage. Not a card, not an isolated navbar, not a page-wide wash, not tabs.
- Domain from Use on: Landings first; Pricing is a section on white, not a separate site.
STYLE
- Gradient: two stops, an angle, on the hero only
- Hero stage ONLY: linear-gradient(120deg, #0071E3 0%, #00C2B3 100%). Type on the wash is white
- Below the hero: #FFFFFF, type #1D1D1F, mute #6E6E73, hairline rgba(29,29,31,0.12), 12px radius on feature and price cards
- Hero CTA: white fill, type #0071E3. Plus Jakarta Sans. No Inter
LAYOUT
- Nav sits ON the gradient hero: North, separate Product / Pricing / Docs, search, Get started (white pill)
- Centered container max-width 1120px, 12 columns, 24px gutter
- Finished campaign home: split hero on the wash, then white feature trio, mosaic, three-column footer. Gradient stops at the hero.
SECTIONS
1. Gradient hero: "Two stops. One angle." plus a 120° visual tile. CTA Get started
2. Three white feature columns: Ship / Measure / Price
3. Mosaic: Campaign landing (lead) + Pricing + Docs
4. Three-column white footer: Product / Pricing / Legal
INTERACTION
- Hover lifts the white CTA and white cards 2px. The gradient never gains a third stop
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia, rainbow, extra stops. No Inter. No emoji icons
- Do not paint the whole page with the gradient. Do not put body copy on the wash
- Do not output only a headline plus two empty cells on a full-bleed slash
MOTION
- Flowing gradient: 8s linear loop on background-position, or transform where possible.
- Hover: gradient opacity only, 160ms. Do not re-tint the whole surface.
- Never animate two gradients at once; it muddies both.
- prefers-reduced-motion: static gradient.
Preview Specimen
Gradient Name the two stops and the angle, not "colorful".
Continue Card Card Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a single Gradient card. Not a page, not a dashboard.
STYLE
- Stage is a locked two-stop gradient: 120deg #0071E3 → #00C2B3. No third stop
- Card is white #FFFFFF on that wash, 16px radius, readable title #1D1D1F and body #6E6E73
- Continue: white fill, type #0071E3, pill. Hero only uses the gradient; the card face stays readable white
LAYOUT
- One card: kicker SPECIMEN, title, summary, one primary button
- Do not paint the card face with the gradient
INTERACTION
- Hover lifts the card 2px. Do not add a third color or a rainbow
CONSTRAINTS
- Gradient locked 120deg #0071E3 → #00C2B3. No purple, violet, indigo, fuchsia, no extra stops
- No Inter
TECHNICAL
- React, Tailwind CSS, shadcn/ui restyled to this two-stop wash - not default shadcn
Buttons Buttons Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Gradient button row only: Continue (solid), Save (outline), Skip (ghost). Not a card, not a page.
STYLE
- Stage 120deg #0071E3 → #00C2B3 only
- Continue: white fill, type #0071E3 (readable on the wash)
- Save: transparent with 1px white edge, white type
- Skip: ghost white type
LAYOUT
- One horizontal row on the gradient well. No white card wrapping the row
INTERACTION
- Hover lifts 2px. No third stop, no rainbow hover
CONSTRAINTS
- Only #0071E3 and #00C2B3 in the wash at 120deg. No purple. No Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn Button - do not keep default shadcn look
Preview North Overview Billing Open
Navbar Navbar Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Gradient site navbar only. Not tabs, not a page.
STYLE
- Bar sits on 120deg #0071E3 → #00C2B3. Type white; links rgba(255,255,255,0.8)
- Wordmark North in white. Open: white pill, type #0071E3
LAYOUT
- Single horizontal chrome: wordmark, Overview, Billing, Open. No panel
INTERACTION
- Open lifts 2px on hover. No third color in the bar
CONSTRAINTS
- Two stops only, 120deg #0071E3 → #00C2B3. No purple, no rainbow. No Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation - not default shadcn
Preview Overview Billing Activity
SECTION
Two lines of English dummy for Overview. Plan usage and upcoming invoices stay in this panel.
Tabs Tabs Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Gradient Tabs component with three tabs: Overview (selected), Billing, Activity. Not a navbar, not a page.
STYLE
- Stage 120deg #0071E3 → #00C2B3. Selected tab: white pill, type #0071E3
- Unselected: white at 80% opacity, no fill
- Panel: white surface, 16px radius, readable #1D1D1F / #6E6E73 - the gradient is the well, not the panel fill
LAYOUT
- Horizontal tablist + one panel. No wordmark, no Open
INTERACTION
- Hover on unselected lifts that chip 2px. No third stop, no purple underline
CONSTRAINTS
- Only #0071E3 and #00C2B3 at 120deg. No rainbow tabs. No Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs - do not keep default shadcn look
What is Gradient? Gradients need stops and angle. Give two hex values and a degree or the model will default to purple.
Elements Two stops Angle On hero only Put this word in the prompt.
Copy Prompt BUILD
- Build a complete Gradient campaign / product landing homepage. Not a card, not an isolated navbar, not a page-wide wash, not tabs.
- Domain from Use on: Landings first; Pricing is a section on white, not a separate site.
STYLE
- Gradient: two stops, an angle, on the hero only
- Hero stage ONLY: linear-gradient(120deg, #0071E3 0%, #00C2B3 100%). Type on the wash is white
- Below the hero: #FFFFFF, type #1D1D1F, mute #6E6E73, hairline rgba(29,29,31,0.12), 12px radius on feature and price cards
- Hero CTA: white fill, type #0071E3. Plus Jakarta Sans. No Inter
LAYOUT
- Nav sits ON the gradient hero: North, separate Product / Pricing / Docs, search, Get started (white pill)
- Centered container max-width 1120px, 12 columns, 24px gutter
- Finished campaign home: split hero on the wash, then white feature trio, mosaic, three-column footer. Gradient stops at the hero.
SECTIONS
1. Gradient hero: "Two stops. One angle." plus a 120° visual tile. CTA Get started
2. Three white feature columns: Ship / Measure / Price
3. Mosaic: Campaign landing (lead) + Pricing + Docs
4. Three-column white footer: Product / Pricing / Legal
INTERACTION
- Hover lifts the white CTA and white cards 2px. The gradient never gains a third stop
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia, rainbow, extra stops. No Inter. No emoji icons
- Do not paint the whole page with the gradient. Do not put body copy on the wash
- Do not output only a headline plus two empty cells on a full-bleed slash
MOTION
- Flowing gradient: 8s linear loop on background-position, or transform where possible.
- Hover: gradient opacity only, 160ms. Do not re-tint the whole surface.
- Never animate two gradients at once; it muddies both.
- prefers-reduced-motion: static gradient.