Pattern · layout · grid · editorial · minimal

Full-bleed Grid with Dividers.

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.

01 · Preview

The kitchen sink.

Full-bleed.app

ProductPricingDocsAbout

Sign inGet started

layout · grid · editorial

Build with Full-bleed Grid with Dividers.

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.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

01 · Color

Palette

primary

#0A0A0A

secondary

#737373

tertiary

#0A0A0A

neutral

#FFFFFF

surface

#FFFFFF

02 · Typography

Type scale

display

The quick brown fox

h1

A major section heading

h2

A subsection title

body

Body copy in the system's body font.

03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →

Disabled

04 · Inputs

Form controls

Email

iris@studio.com

Password

••••••••••••

Bio

Designing for long-form publications. Based in Kyoto.

05 · Choices

Select & toggle

Plan

Starter

Free forever

Pro

$18 / month

Team

$48 / month

Toggles

Public profile

Require two-factor

Auto-accept invites

06 · Tags & badges

Labeling

NeutralAccentSolidWith dot

NEWBETAv2.0LIVE

07 · Cards

Cards

Feature

Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →

Metric

24,810

▲ +12.4% vs last week

08 · Navigation

Tabs & breadcrumb

Overview

Analytics

Members

Workspace/Projects/Heritage System

09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px

2px

5px

8px · base

10px

12px

14px

16px

18px

20px

21px

10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm

0px

md

0px

lg

0px

pill

999px

11 · Elevation

Depth & elevation

00 · Flat

Elevation 00

01 · Low

Elevation 01

02 · Medium

Elevation 02

03 · High

Elevation 03

12 · Data

Charts

Weekly revenue

$48,210

M

T

W

T

F

S

S

Active sessions

2,184

02 · Layout

The structural backbone.

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.

Full-bleed.

WorkJournalIndex

layout · grid

A clearer way to say less.

The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.

6 min · April 2026

— Foundation
— Rhythm
— Restraint

03 · The file

PATTERN.md

markdown

1---
2name: "Full-bleed Grid with Dividers"
3description: "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."
4tags: [layout, grid, editorial, minimal]
5type: pattern
6container: "full-bleed"
7content_max_width: 1200px
8page_padding: 0px
9grid:
10  columns:     6
11  max_columns: 6
12  line_color:  "rgba(15, 15, 15, 0.06)"
13  line_width:  1px
14  line_style:  solid
15  edge_lines:  true
16sections:
17  padding_y:      96px
18  divider_color:  "rgba(15, 15, 15, 0.08)"
19  divider_width:  1px
20  divider_style:  solid
21  band_fill:      "repeating-linear-gradient(135deg, rgba(15,15,15,0.04) 0 1px, transparent 1px 8px)"
22intersections:
23  style: none
24  color: "rgba(15, 15, 15, 0.10)"
25  size:  6px
26design:
27  colors:
28    ink:      "#0a0a0a"
29    surface:  "#ffffff"
30    accent:   "#0a0a0a"
31    muted:    "#737373"
32    hairline: "#e5e5e5"
33  fonts:
34    display: Geist
35    body:    Geist
36    mono:    "Geist Mono"
37  radius: 0px
38  google_fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap"
39---
40 
41# Full-bleed Grid with Dividers
42 
43## AI Build Instructions
44 
45> **Read this section before writing any code.** The rules below
46> are non-negotiable. Every value used in the UI must come from this
47> file's frontmatter — never substitute, approximate, or invent new
48> colors, fonts, radii, or shadows. If a value is missing, ask the
49> user before adding one.
50 
51### 1 · Your role
52 
53You are building UI for a project that has adopted **Full-bleed Grid with Dividers** as its
54design system. Treat `PATTERN.md` as the single source of truth.
55Your job is to translate the user's product requirements into
56components and pages that look like they were designed by the same
57person who authored this file.
58 
59### 2 · Token compliance
60 
61- Pull every color, font family, radius, shadow, and spacing value
62  from the frontmatter at the top of this file.
63- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
64  hard-code hex values that bypass the system.
65- When a token can be expressed as a CSS variable, declare it once
66  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 recipes
71 
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: **6 column hairlines** (capped at 6 on wide viewports), drawn with `1px solid rgba(15, 15, 15, 0.06)`.
77- Draw lines on the outer left and right edges of the page.
78- Section padding: `96px` top + bottom inside every section.
79- Section divider: `1px solid rgba(15, 15, 15, 0.08)` between sections.
80- Use the diagonal-stripe band fill **at most once per page** as a section opener.
81 
82#### Primary CTA
83 
84Exactly **one** primary CTA per page or section. The pattern's discipline depends on this.
85 
86- Background: `#0a0a0a` · Color: `#ffffff`
87- Padding: `11px 22px` · Weight: `500`
88- Shape: `sharp` (radius: `0px`)
89 
90#### Headlines
91 
92- Family: `Geist` · Size: `clamp(2.25rem, 4vw, 3.25rem)` · Leading: `1` · Weight: `600`
93- Tracking: `-0.04em`
94 
95#### Body copy
96 
97- Family: `Geist` · Size: `0.9375rem` · Leading: `1.55` · Color: `#737373`
98- Max line length: 60–66 characters. Never let prose stretch the full content width.
99 
100#### Eyebrows / metadata
101 
102- Family: `Geist Mono` · Size: `0.6875rem` · Letter-spacing: `0.16em`
103- Uppercased. Color: `#0a0a0a`.
104 
105### 4 · Hard constraints
106 
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 — verify
117 
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## Overview
133 
134The full-bleed grid is a structural device, not a decoration. Vertical hairlines
135run from the top of the viewport to the footer; horizontal hairlines mark the
136boundaries between sections. Together they create a steady rhythm and a
137"calibrated instrument" feel that suits SaaS, fintech, and developer tooling.
138 
139Content stays inside a centered max-width column for readability. The grid
140itself sits behind the content, painted into the page background, and is never
141allowed to crop or break the typography.
142 
143## When to use it
144 
145- Marketing homepages where the product is technical and trust matters.
146- Long landing pages with several distinct sections that benefit from clear
147  separation.
148- Pricing, docs, and feature pages where a measured, surveyed feel is on-brand.
149 
150## When to avoid it
151 
152- Heavily illustrated pages or pages with full-bleed imagery — the lines
153  compete with the visuals.
154- Mobile-first apps where viewport width is too narrow to make the columns
155  legible. Drop to 2 columns or hide them entirely below 768px.
156 
157## Do
158 
159- Keep the lines low-contrast (4–8% opacity over the page background).
160- Use the same column count globally so the grid feels like architecture, not
161  decoration.
162- Align important hero elements (logo, CTA) to a column line for a crafted feel.
163 
164## Don't
165 
166- Don't draw the grid above z-index 0 — it must read as background, not foreground.
167- Don't mix multiple column counts on the same page.
168- Don't use the diagonal stripe band more than once per page; it loses meaning
169  if repeated.
170 
171## Notes
172 
173- The pattern works with any color system. The hairline color should be derived
174  from the system's foreground at 6–10% alpha so it sits naturally over the
175  surface tone.
176- Pair with sans-serif or mono typography for the strongest "instrument" effect.
177 
178---
179 
180## Tokens
181 
182> Generated from the same source the live preview renders from.
183> Treat the values below as the contract — never substitute approximations.
184 
185### Container
186 
187| Property | Value |
188|----------|-------|
189| container | `full-bleed` |
190| contentMaxWidth | `1200px` |
191| pagePadding | `0px` |
192 
193### Vertical Grid
194 
195| Property | Value |
196|----------|-------|
197| columns | `6` |
198| maxColumns | `6` |
199| lineColor | `rgba(15, 15, 15, 0.06)` |
200| lineWidth | `1px` |
201| lineStyle | `solid` |
202| edgeLines | `true` |
203 
204### Section Dividers
205 
206| Property | Value |
207|----------|-------|
208| paddingY | `96px` |
209| dividerColor | `rgba(15, 15, 15, 0.08)` |
210| dividerWidth | `1px` |
211| dividerStyle | `solid` |
212| bandFill | `repeating-linear-gradient(135deg, rgba(15,15,15,0.04) 0 1px, transparent 1px 8px)` |
213 
214### Intersections
215 
216| Property | Value |
217|----------|-------|
218| style | `none` |
219| color | `rgba(15, 15, 15, 0.10)` |
220| size | `6px` |
221 
222## Design Identity
223 
224> This pattern ships with its own typography, color, and CTA tokens.
225> Use the values below verbatim — they are the system, not a starting point.
226 
227### Colors
228 
229| Token | Value |
230|-------|-------|
231| ink (primary text) | `#0a0a0a` |
232| surface (page background) | `#ffffff` |
233| accent (single moment per page) | `#0a0a0a` |
234| muted (metadata, captions) | `#737373` |
235| hairline (rules and dividers) | `#e5e5e5` |
236 
237### Typography
238 
239Load via Google Fonts:
240 
241```html
242<link rel="preconnect" href="https://fonts.googleapis.com">
243<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
244<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
245```
246 
247| Role | Family |
248|------|--------|
249| display (headlines) | `Geist` |
250| body (prose) | `Geist` |
251| mono (metadata, numerals) | `Geist Mono` |
252 
253### Type Scale
254 
255| Role | Size | Leading | Weight | Tracking |
256|------|------|---------|--------|----------|
257| Hero / H1 | `clamp(2.25rem, 4vw, 3.25rem)` | `1` | `600` | `-0.04em` |
258| Body | `0.9375rem` | `1.55` | `400` | — |
259| Eyebrow | `0.6875rem` | — | `500` | `0.16em` |
260 
261### Primary CTA
262 
263| Property | Value |
264|----------|-------|
265| shape | `sharp` |
266| background | `#0a0a0a` |
267| color | `#ffffff` |
268| padding | `11px 22px` |
269| fontWeight | `500` |
270| radius | `0px` |
271 
272> One CTA per page. The pattern's discipline depends on this — never duplicate.
273 
274---
275 
276## Reference Implementation
277 
278Copy-paste-ready HTML + CSS that renders this pattern with the exact token
279values declared above. Theme the colors against your system's hairline tone.
280 
281### HTML
282 
283```html
284<div class="page">
285  <!-- Vertical column hairlines, full viewport height -->
286  <div class="grid-overlay" aria-hidden="true">
287    <span></span><span></span><span></span>
288    <span></span><span></span><span></span><span></span>
289  </div>
290 
291  <header class="section">
292    <div class="content">
293      <h1>Page title</h1>
294    </div>
295  </header>
296 
297  <section class="section">
298    <div class="content">…</div>
299  </section>
300 
301  <section class="section section--band">
302    <div class="content">…</div>
303  </section>
304</div>
305```
306 
307### CSS
308 
309```css
310:root {
311  --content-max: 1200px;
312  --grid-line: rgba(15, 15, 15, 0.06);
313  --divider:   rgba(15, 15, 15, 0.08);
314  --section-y: 96px;
315}
316 
317.page { position: relative; min-height: 100vh; }
318 
319/* Full-height vertical hairlines.
320   Drawn with a 6-column flex container that fills the viewport. */
321.grid-overlay {
322  position: absolute; inset: 0;
323  display: grid;
324  grid-template-columns: repeat(6, 1fr);
325  pointer-events: none;
326  z-index: 0;
327}
328.grid-overlay span {
329  border-right: 1px solid var(--grid-line);
330}
331.grid-overlay span:first-child { border-left: 1px solid var(--grid-line); }
332 
333/* Sections sit above the grid, with a horizontal hairline between them. */
334.section {
335  position: relative;
336  z-index: 1;
337  padding: var(--section-y) 0;
338  border-bottom: 1px solid var(--divider);
339}
340 
341/* Content stays centered, never full-bleed. */
342.content {
343  max-width: var(--content-max);
344  margin: 0 auto;
345  padding: 0 24px;
346}
347 
348/* Optional diagonal-stripe band — use sparingly. */
349.section--band {
350  background-image: repeating-linear-gradient(
351    135deg,
352    rgba(15,15,15,0.04) 0 1px,
353    transparent 1px 8px
354  );
355}
356```
357

04 · Reference implementation

Copy-paste ready.

html

<div class="page">
  <!-- Vertical column hairlines, full viewport height -->
  <div class="grid-overlay" aria-hidden="true">
    <span></span><span></span><span></span>
    <span></span><span></span><span></span><span></span>
  </div>
 
  <header class="section">
    <div class="content">
      <h1>Page title</h1>
    </div>
  </header>
 
  <section class="section">
    <div class="content">…</div>
  </section>
 
  <section class="section section--band">
    <div class="content">…</div>
  </section>
</div>

05 · Keep browsing

Try another pattern.

Pattern

Stacked Hero Bands

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.

layoutherofull-bleedrhythm

Stacked.

WorkJournalIndex

layout · hero

A clearer way to say less.

The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.

6 min · April 2026

— Foundation
— Rhythm
— Restraint

Pattern

Sticky Index Rail

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.

layoutnavigationstickylong-read

Sticky.

WorkJournalIndex

layout · navigation

A clearer way to say less.

The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.

6 min · April 2026

— Foundation
— Rhythm
— Restraint