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 narrow sticky rail on the left holds a numbered section index that highlights the active section as the user scrolls. The right side of the page carries the actual content. Quiet, navigational, scholarly.
The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.
One narrow centered column on a clean canvas. No grid, no dividers, no chrome — the entire rhythm comes from generous vertical spacing between blocks. The most disciplined layout in the catalog.
The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.