Full-bleed horizontal sections stacked floor-to-ceiling, alternating between plain surface and a diagonal-stripe band. No vertical grid — the rhythm comes from the section heights and the hard hairline between them.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
What sets a pattern apart from a system: a defined grid, divider rhythm, and section composition. Everything below uses the same tokens that power the kitchen sink — applied to a real page skeleton.
The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.
1---2name: "Stacked Hero Bands"3description: "Full-bleed horizontal sections stacked floor-to-ceiling, alternating between plain surface and a diagonal-stripe band. No vertical grid — the rhythm comes from the section heights and the hard hairline between them."4tags: [layout, hero, "full-bleed", rhythm]5type: pattern6container: "full-bleed"7content_max_width: 1200px8page_padding: 0px9grid:10 columns: 011 max_columns: 012 line_color: transparent13 line_width: 0px14 line_style: solid15 edge_lines: false16sections:17 padding_y: 160px18 divider_color: "rgba(15, 15, 15, 0.12)"19 divider_width: 1px20 divider_style: solid21 band_fill: "repeating-linear-gradient(135deg, rgba(15,15,15,0.045) 0 1px, transparent 1px 10px)"22intersections:23 style: none24 color: transparent25 size: 0px26design:27 colors:28 ink: "#1a1817"29 surface: "#ede9e3"30 accent: "#d94a2b"31 muted: "#7a746e"32 hairline: "#cfc8be"33 fonts:34 display: Archivo35 body: Archivo36 mono: "JetBrains Mono"37 radius: 4px38 google_fonts_url: "https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800;900&family=JetBrains+Mono:wght@400;500&display=swap"39---40 41# Stacked Hero Bands42 43## AI Build Instructions44 45> **Read this section before writing any code.** The rules below46> are non-negotiable. Every value used in the UI must come from this47> file's frontmatter — never substitute, approximate, or invent new48> colors, fonts, radii, or shadows. If a value is missing, ask the49> user before adding one.50 51### 1 · Your role52 53You are building UI for a project that has adopted **Stacked Hero Bands** as its54design system. Treat `PATTERN.md` as the single source of truth.55Your job is to translate the user's product requirements into56components and pages that look like they were designed by the same57person who authored this file.58 59### 2 · Token compliance60 61- Pull every color, font family, radius, shadow, and spacing value62 from the frontmatter at the top of this file.63- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never64 hard-code hex values that bypass the system.65- When a token can be expressed as a CSS variable, declare it once66 in your global stylesheet and reference it everywhere downstream.67- The Google Fonts `<link>` is provided in the Typography section.68 Add it to `<head>` before any component renders.69 70### 3 · Build recipes71 72#### Page skeleton (the layout contract)73 74- Container: `full-bleed`75- Content max-width: `1200px` (typography respects this even when the page is full-bleed).76- Vertical grid: **0 column hairlines**, drawn with `0px solid transparent`.77- Section padding: `160px` top + bottom inside every section.78- Section divider: `1px solid rgba(15, 15, 15, 0.12)` between sections.79- Use the diagonal-stripe band fill **at most once per page** as a section opener.80 81#### Primary CTA82 83Exactly **one** primary CTA per page or section. The pattern's discipline depends on this.84 85- Background: `#1a1817` · Color: `#ede9e3`86- Padding: `13px 24px` · Weight: `700`87- Shape: `sharp` (radius: `0px`)88- Uppercase, tracking: `0.06em`89 90#### Headlines91 92- Family: `Archivo` · Size: `clamp(2.75rem, 5vw, 4.25rem)` · Leading: `0.95` · Weight: `800`93- Tracking: `-0.04em`94 95#### Body copy96 97- Family: `Archivo` · Size: `1rem` · Leading: `1.55` · Color: `#7a746e`98- Max line length: 60–66 characters. Never let prose stretch the full content width.99 100#### Eyebrows / metadata101 102- Family: `JetBrains Mono` · Size: `0.6875rem` · Letter-spacing: `0.18em`103- Uppercased. Color: `#d94a2b`.104 105### 4 · Hard constraints106 107Never do any of the following without explicit instruction from the user:108 109- Introduce a new color, font, radius, or shadow that isn't declared above.110- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).111- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.112- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.113- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.114- Break the layout contract: the column count, divider rhythm, and content max-width are part of the pattern.115 116### 5 · Before you finish — verify117 118Run through this checklist for every screen you produce:119 120- [ ] Every color used appears in the Colors table above.121- [ ] Headlines use the display font; body copy uses the body font.122- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).123- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.124- [ ] Cards and dividers use the declared border + shadow tokens.125- [ ] The page respects the pattern's grid (column count + content max-width).126- [ ] Section dividers use the declared color, width, and style.127- [ ] Exactly one primary CTA per section — never duplicate.128- [ ] No values were invented; if you needed something missing, you stopped and asked.129 130---131 132## Overview133 134Stacked Hero Bands is the inverse of a vertical-grid layout. There is no135column hairline anywhere on the page. Instead the entire visual rhythm comes136from full-bleed horizontal sections stacked floor-to-ceiling, alternating137between a plain surface and a band filled with a diagonal stripe pattern. A138single hairline divides each band from the next.139 140Each band is tall — 160px+ vertical padding — so it reads as a "floor" of the141page rather than a section. Content lives inside a centered max-width column142within each band, but the band itself bleeds to the viewport edges. The143diagonal-stripe fill on alternating bands gives the page a steady "ledger" or144"engineered surface" texture without ever crowding the content.145 146## When to use it147 148- Marketing homepages where each section is a discrete idea.149- Product pages where features stack as parallel arguments.150- Brand pages and case studies that benefit from a strong horizontal rhythm.151- Anywhere "calibrated instrument" is the desired feel but the system already152 has a complex column structure that would clash with vertical hairlines.153 154## When to avoid it155 156- Long documentation or article pages — the tall bands waste vertical space157 and break reading rhythm.158- Dashboards and app surfaces — the alternating fills compete with data.159- Pages with full-bleed photography, since the photo wants to be the band.160 161## Do162 163- Hold the diagonal-stripe alpha at 4–5% foreground. Past that the texture164 becomes graph paper and overpowers the content.165- Use the same diagonal angle (135°) throughout. Mixing angles destroys the166 rhythm.167- Keep the divider hairline at 10–14% foreground alpha so the band-to-band168 transition reads as architecture.169- Alternate strictly: plain → band → plain → band. Two plain bands in a row170 read as a layout mistake.171 172## Don't173 174- Don't introduce a vertical column hairline — the whole point of this pattern175 is horizontal-only rhythm.176- Don't change the stripe angle, spacing, or alpha between bands. Consistency177 is the entire device.178- Don't shrink the section padding below 96px. The bands need height to read179 as floors rather than rows.180- Don't stack three or more bands in a row without a plain surface between181 them. The texture loses meaning.182 183## Notes184 185- The diagonal-stripe band can be replaced with any subtle texture (cross-hatch,186 dot grid, halftone) as long as it stays at 4–5% foreground alpha and uses a187 single repeating angle.188- The pattern composes with any color system. The hairline divider and stripe189 fill should be derived from the system foreground so the rhythm carries the190 system tone.191- Pair with bold display type — the bands give large headlines room to breathe.192 193---194 195## Tokens196 197> Generated from the same source the live preview renders from.198> Treat the values below as the contract — never substitute approximations.199 200### Container201 202| Property | Value |203|----------|-------|204| container | `full-bleed` |205| contentMaxWidth | `1200px` |206| pagePadding | `0px` |207 208### Vertical Grid209 210| Property | Value |211|----------|-------|212| columns | `0` |213| maxColumns | `0` |214| lineColor | `transparent` |215| lineWidth | `0px` |216| lineStyle | `solid` |217| edgeLines | `false` |218 219### Section Dividers220 221| Property | Value |222|----------|-------|223| paddingY | `160px` |224| dividerColor | `rgba(15, 15, 15, 0.12)` |225| dividerWidth | `1px` |226| dividerStyle | `solid` |227| bandFill | `repeating-linear-gradient(135deg, rgba(15,15,15,0.045) 0 1px, transparent 1px 10px)` |228 229### Intersections230 231| Property | Value |232|----------|-------|233| style | `none` |234| color | `transparent` |235| size | `0px` |236 237## Design Identity238 239> This pattern ships with its own typography, color, and CTA tokens.240> Use the values below verbatim — they are the system, not a starting point.241 242### Colors243 244| Token | Value |245|-------|-------|246| ink (primary text) | `#1a1817` |247| surface (page background) | `#ede9e3` |248| accent (single moment per page) | `#d94a2b` |249| muted (metadata, captions) | `#7a746e` |250| hairline (rules and dividers) | `#cfc8be` |251 252### Typography253 254Load via Google Fonts:255 256```html257<link rel="preconnect" href="https://fonts.googleapis.com">258<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>259<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">260```261 262| Role | Family |263|------|--------|264| display (headlines) | `Archivo` |265| body (prose) | `Archivo` |266| mono (metadata, numerals) | `JetBrains Mono` |267 268### Type Scale269 270| Role | Size | Leading | Weight | Tracking |271|------|------|---------|--------|----------|272| Hero / H1 | `clamp(2.75rem, 5vw, 4.25rem)` | `0.95` | `800` | `-0.04em` |273| Body | `1rem` | `1.55` | `400` | — |274| Eyebrow | `0.6875rem` | — | `600` | `0.18em` |275 276### Primary CTA277 278| Property | Value |279|----------|-------|280| shape | `sharp` |281| background | `#1a1817` |282| color | `#ede9e3` |283| padding | `13px 24px` |284| fontWeight | `700` |285| uppercase | `true` |286| tracking | `0.06em` |287| radius | `0px` |288 289> One CTA per page. The pattern's discipline depends on this — never duplicate.290 291---292 293## Reference Implementation294 295Copy-paste-ready HTML + CSS that renders this pattern with the exact token296values declared above. Theme the colors against your system's hairline tone.297 298### HTML299 300```html301<div class="page">302 <section class="band band--plain">303 <div class="content">304 <h1>Hero headline lives here.</h1>305 <p>The first band is plain — bleed-to-bleed surface with no texture.</p>306 </div>307 </section>308 309 <section class="band band--stripe">310 <div class="content">311 <h2>Second band carries the diagonal texture.</h2>312 <p>Alternating bands give the page its rhythm.</p>313 </div>314 </section>315 316 <section class="band band--plain">317 <div class="content">318 <h2>Third band returns to plain surface.</h2>319 </div>320 </section>321 322 <section class="band band--stripe">323 <div class="content">324 <h2>Fourth band carries the texture again.</h2>325 </div>326 </section>327</div>328```329 330### CSS331 332```css333:root {334 --content-max: 1200px;335 --section-y: 160px;336 --divider: rgba(15, 15, 15, 0.12);337 --stripe-fill: repeating-linear-gradient(338 135deg,339 rgba(15, 15, 15, 0.045) 0 1px,340 transparent 1px 10px341 );342}343 344.page { position: relative; }345 346/* Each band is full-bleed and tall. Hairline divider on the bottom. */347.band {348 width: 100%;349 padding: var(--section-y) 0;350 border-bottom: 1px solid var(--divider);351}352 353/* Alternating fill — plain surface vs diagonal-stripe texture. */354.band--plain { background: transparent; }355.band--stripe { background-image: var(--stripe-fill); }356 357/* Content stays inside a centered max-width column. */358.content {359 max-width: var(--content-max);360 margin: 0 auto;361 padding: 0 32px;362}363 364.content h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.05; }365.content h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; }366.content p { max-width: 60ch; line-height: 1.65; margin-top: 16px; }367 368/* Mobile: shorter bands, narrower padding. The alternation still reads. */369@media (max-width: 768px) {370 .band { padding: 96px 0; }371 .content { padding: 0 24px; }372}373```374 <div class="page"> <section class="band band--plain"> <div class="content"> <h1>Hero headline lives here.</h1> <p>The first band is plain — bleed-to-bleed surface with no texture.</p> </div> </section> <section class="band band--stripe"> <div class="content"> <h2>Second band carries the diagonal texture.</h2> <p>Alternating bands give the page its rhythm.</p> </div> </section> <section class="band band--plain"> <div class="content"> <h2>Third band returns to plain surface.</h2> </div> </section> <section class="band band--stripe"> <div class="content"> <h2>Fourth band carries the texture again.</h2> </div> </section></div>A 12-column bento grid where every module shares the same radius, the same hairline, and the same surface tone. Variation comes only from module size and content — never from styling. The discipline is the design.
The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.
Vertical column hairlines that span the entire viewport height, paired with horizontal section dividers. Content sits inside a centered max-width while the grid lives in the page background.
The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.