Slopless Design

cta.midcentury-half-sun · Half sun

A cta pattern from Mid-Century Modern, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 7. Give the section root data-pattern="cta.midcentury-half-sun". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

A full-bleed orange band with a cream half-sun rising from the bottom of 1–4; the headline (step 5) and a secondary button sit on 6–12.

Slots

headline, cta

Grid areas

sun 1-4 · text 6-12 (12-column grid, 1-based inclusive spans)

Tokens

bg #F3E9D6 · text #2B231B · heading #2B231B · accent #C9552A · accent2 #0099BE · League Spartan / Jost · radius 20px · space unit 8px (full list in design/tokens.json)

Section

background accent · full-bleed · vertical padding step 10

Pattern notes

A full-bleed orange (`accent`) band: a cream (`bg`) half-sun rises from the bottom edge of 1–4; the headline (step 6, heaviest weight, `onAccent`, max 16 ch) and a large secondary pill button sit on 6–12.

Have a hard thing to explain?

Start a project