hero.y2k-chrome-orb · Chrome orb

A hero pattern from Y2K Chrome, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.y2k-chrome-orb". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

A giant iridescent ring on 6–12 behind the text; a pixel-font eyebrow, a chrome uppercase headline at step 7 crossing into the ring on 1–9, the lead and two pill buttons on 1–6; a sparkle star sits at the ring's top-right on 11–12; ring and star hide on phones.

Slots

eyebrow, headline, subhead, cta, cta2

Grid areas

orb 6-12 · headline 1-9 · copy 1-6 · sparkle 11-12 (12-column grid, 1-based inclusive spans)

Notes

The headline gets the chrome treatment (metallic gradient fill with a 1 px light top edge) but must stay readable: solid heading colour underneath as a fallback.

Tokens

bg #F6FBFF · text #192028 · heading #091018 · accent #00B0FB · accent2 #7D9FFF · Unbounded / Sora · radius 28px · space unit 8px (full list in design/tokens.json)

Pattern notes

A huge ring (or orb) in accent2 with an iridescent gradient sheen fills 6–12 over four rows; a four-point sparkle star (accent) sits at its top-right on 11–12, rotated 12°. Row 1: the eyebrow in the pixel/mono face, uppercase, on 1–6. Row 2: the headline on 1–9 at step 7, weight 700, uppercase, tight, crossing into the ring, filled with a chrome gradient (silver → accent) with a solid heading-colour fallback. Row 3: lead paragraph on 1–5. Row 4: two pill buttons (full radius), primary with a glossy highlight and a secondary outlined one. At phone width the ring and star hide.

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies