Full page preview with sample copy, rendered from the same tokens and layout the agent receives.
For coding agents
Rules and live patterns
Every pattern Art Deco owns, drawn by the same renderer as the picker with the style's default tokens and sample copy. Each has an anchor (#<pattern id>). A design's own DESIGN.md and tokens.json stay the source of truth; this page shows what the patterns look like.
Centre every section on the page axis: headings, paragraphs and buttons are `text-align: center`, and anything placed left of the axis has a mirror on the right (spans in `layout.json` are symmetric: 2–11, 3–10, 4–9, 6–7).
Set every heading in uppercase display type with wide letter-spacing (0.08–0.14em) at the face's regular weight (400); hierarchy comes from size, not weight.
Use the gold accent (`accent`, `link`, `heading`) for headings, rules, ornaments and numerals; body copy stays in `text`.
Mark breaks with the ornament: a hairline, a small diamond (a square rotated 45°, accent fill), a hairline — on one line, centred.
Frame important content (quotes, plans, menus, the stepped hero) in ruled frames: 1 px gold-toned `border` lines, nested frames stepped inwards by one space unit.
Use arches (`frame: arch`) and circles (`frame: circle`) for images, cropped tight, duotone in accent over the background.
Build crowns and setbacks with stacked bars that widen downwards, and chevrons (`triangle` rotated 180°) to point into a section.
Keep generous vertical space (`space.section` 136 px) so each section reads like a plate in a programme.
At 375 px keep the axis: everything stacks centred, vertical pilaster rules hide, ornaments and setback bars stay.
Don't
No flush-left heroes or asymmetric splits; no element sits off-axis without a mirror.
No lowercase or sentence-case headings, no bold or black weights on the display face.
No rounded corners, drop shadows, glass, blur or soft gradients; gold is a flat colour, never a gradient sheen.
No second bright colour: the palette is gold (or the variant's metal) on a dark ground plus one jewel tone from the palette rule at most.
No three plain cards in a row, no icon grids, no emoji; features are ruled frames with a diamond.
No full-colour photographs filling large areas; images are duotone, arched or circular.
No sans-serif body set in all caps for paragraphs; capitals are for headings, labels and names only.
No more than one gold-filled band per page (the CTA).
Everything on the central axis: a half-sun rises over columns 4–9, the uppercase headline spans 2–11 centred, a diamond ornament and the subhead sit on 4–9.
The half-circle is a flat sunburst (render rays as alternating accent/bg wedges if you can, else a solid half-disc). The headline is the only display-size text; mirror the two buttons around the axis.
A flat half-circle in the accent colour (the rising sun; render rays as alternating accent and background wedges if you can) sits centred on columns 4–9 at the top of the hero. Under it: the eyebrow in gold spaced capitals (3–10), the headline in uppercase display type at step 6, regular weight, wide tracking, centred on 2–11 (max ~18 characters per line), the ornament on 4–9, the subhead centred on 4–9, and two buttons mirrored around the axis (primary + ghost). At phone width everything stacks centred, the sun stays, and the headline drops to step 3 with tracking reduced to 0.05em so the longest word fits 375 px without horizontal scroll.
The three frames step in by one space unit each (outer, middle, inner); the inner frame holds the content with generous padding. Pilasters are 2px vertical rules running the full hero height.
Three nested frames centred on 3–10: each a 1 px rule in the border colour, each stepped one space unit inside the last. The innermost frame has wide padding (8 units vertical, 6 horizontal) and holds the eyebrow, headline (step 6, caps), ornament, subhead and one primary button, all centred. Columns 2 and 11 carry 2 px vertical pilaster rules running the full hero height; they hide at phone width.
A mirrored triptych: arched duotone images in 1–3 and 10–12, the centred headline block in 4–9 bottom-aligned with them.
Slots
eyebrow, headline, subhead, cta, heroImage, image
Grid
left 1-3 · centre 4-9 · right 10-12
Notes
Both arches are the same size and crop; duotone in accent over the background. At phone width the left arch hides and the right one follows the text.
A mirrored triptych: two identical arched duotone images (3:4) in 1–3 and 10–12, and the centred text block on 4–9 (eyebrow, headline at step 5 in caps, ornament, short subhead, secondary button), bottom-aligned with the arches. At phone width the left arch hides and the right arch follows the text.
Four accent bars widen downwards (6–7, 5–8, 4–9, 3–10) like a skyscraper crown; under them the headline spans 2–11 and three facts sit in a ruled row on 3–10.
The bars are the hero's only shapes; they stack one unit apart and keep their widths at phone width. Facts are separated by vertical hairlines.
A skyscraper crown: four accent bars stacked one unit apart, widening downwards — 6–7, 5–8, 4–9, 3–10. Then the headline at step 7 in caps on 2–11, three facts in one row on 3–10 separated by vertical hairlines (caps label + small muted line, centred), and one large primary button. The bars are the only shapes in the hero and keep their widths at phone width.
Links on the left (1–5), a monogram crest at the exact centre (6–7), a ghost CTA on the right (10–12); a double hairline closes the bar.
Slots
siteName, pages, cta
Grid
links 1-5 · crest 6-7 · cta 10-12
One row: page links on the left (1–5, spaced capitals), a monogram crest at the exact centre (6–7), a small ghost button flush right (10–12). Two 1 px hairlines one unit apart close the bar (a double rule). At phone width the bar stays one row: a small menu toggle on the left, the crest at the centre, the button hidden. Diamond-and-hairline ornaments stay horizontal at every width.
Wordmark centred on top, a diamond ornament under it, then the page links centred on one line in spaced capitals.
Slots
siteName, pages
A centred stack: the wordmark, the diamond ornament, then the page links on one line in spaced capitals; a bottom rule closes the bar. Use it for single-venue sites (a bar, a hotel, an event).
A centred header with ornament on 3–10, then features in two columns across 2–11, each in a fully ruled frame with a diamond and centred text.
Slots
sectionLabel, title, features[4..6]
Grid
header 3-10 · features 2-11
A centred header on 3–10 (gold eyebrow, caps h2, ornament). Features flow two per row across 2–11, each in a ruled frame: a small diamond, the title in caps (h3, regular weight), one centred paragraph (max 40 ch). Never three per row.
An inverted accent chevron (triangle rotated 180°) centred on 6–7 points into the statement: caps, step 4, wide tracking, centred on 2–11 (max ~30 ch). Then the ornament on 5–8, a centred paragraph on 4–9 and an underlined text button.
Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.
Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.
Start a project→
Desktop
Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.
Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.
Three arched images side by side: a taller 4:5 arch in the centre (4–9) flanked by two 3:4 arches (1–3, 10–12), all bottom-aligned; caption centred under the middle arch.
header 3-10 · left 1-3 · centre 4-9 · right 10-12 · caption 4-9
A centred header on 3–10, then three arches side by side, bottom-aligned: a 3:4 duotone arch on 1–3, a taller 4:5 arch in the centre on 4–9 (the one full-colour photo), a 3:4 duotone arch on 10–12. The caption sits centred under the middle arch. At phone width only the centre arch and its caption remain; the side arches hide.
A centred label, then three or four figures in one ruled row across 2–11: numeral at step 5 in the gold heading colour, caps label, small caption, vertical hairlines between.
Slots
sectionLabel, stats[3..4]
Grid
label 3-10 · figures 2-11
On the `surface` background: a centred gold label, then three or four figures in one row across 2–11 separated by vertical hairlines. Each figure: the numeral at step 5 (one size for every figure) in the heading face and gold heading colour (regular weight, tabular), a caps label, a small muted caption, all centred.
One quote in a ruled cartouche on 3–10: ornament, centred quote at step 4, ornament, then the name in spaced capitals and the role.
Slots
quote, author, role
Grid
cartouche 3-10
On `surface`: one quote in a ruled cartouche centred on 3–10 with wide padding — ornament, the quote at step 4 centred, upright (max ~36 ch), ornament, the name in spaced capitals, the role in small muted type. No avatars, no stars, never more than one quote.
A full-bleed gold band: a diamond on 6–7, the uppercase headline centred on 2–11 at step 5, a line of copy and one button centred on 4–9, all in onAccent.
The page's single gold band, full bleed, `bg: accent`, all text `onAccent`: a small diamond in `onAccent` on 6–7, the headline in caps at step 5 centred on 2–11, one line of copy on 4–9, one large secondary button centred.
Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.
Start a project
Desktop
Have a hard thing to explain?
Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.
Centred header on 3–10, then questions as a ruled, centred column on 3–10: question in spaced capitals, answer under it, every answer visible.
Slots
sectionLabel, title, faqs[4..8]
Grid
header 3-10 · list 3-10
A centred header on 3–10, then the questions as one centred column on 3–10 separated by hairlines: question in spaced capitals (h4, regular weight), answer directly under it (max 56 ch). Every answer visible; no chevrons.
Two or three plans as ruled plaques in one row across 2–11: caps name, price at step 5, a hairline, inclusions, a secondary button; all centred.
Slots
sectionLabel, title, plans[2..3]
Grid
header 3-10 · plans 2-11
A centred header, then two or three plans as ruled plaques in one row across 2–11: plan name in spaced capitals, the price at step 5 in the heading face, a hairline, inclusions in small type, a secondary button — all centred. Recommend a plan only by giving its frame the double rule.
A ruled card centred on 3–10: caps title, ornament, then dishes as rows — name in spaced capitals left, price right on the same baseline, a small muted description under each.
Slots
sectionLabel, title, menu[6..12]
Grid
card 3-10
A single ruled card centred on 3–10, like a printed supper-club menu: gold eyebrow, caps title, ornament, then each dish on its own row — name in spaced capitals on the left, the price on the right on the same baseline (dotted leader optional) and a small upright muted description under it.
Centred header on 3–10; portraits as circular duotone medallions four per row across 1–12, name in spaced capitals and role centred beneath.
Slots
sectionLabel, title, team[4..8]
Grid
header 3-10 · people 1-12
A centred header, then circular duotone portraits four per row across the full grid; under each, the name in spaced capitals and the role in small muted type, centred.
Mirrored about the centre line: details right-aligned in 2–5 against a vertical rule in 6–7, the form left-aligned in 8–11.
Slots
title, address, email, hours, contact
Grid
details 2-5 · axis 6-7 · form 8-11
Mirrored about the axis: the title, address, email and hours right-aligned in 2–5 against a vertical hairline in 6–7, and the form (name, email, date, message) left-aligned in 8–11. At phone width the rule hides and the details stack above the form.
Centred header, then posts in two columns across 2–11, each opened by a rule: caps date, centred title, short summary and a text link.
Slots
sectionLabel, title, posts[2..6]
Grid
header 3-10 · posts 2-11
A centred header, then posts in two columns across 2–11, each opened by a rule: date in small spaced capitals, the title centred (h3, regular weight), a short summary and a text link.
Title in caps centred on 2–11 at step 5, ornament 4–9, a centred lead on 3–10, then two mirrored body columns 2–6 and 7–11.
Slots
title, lead, body, body2
Grid
title 2-11 · ornament 4-9 · lead 3-10 · col1 2-6 · col2 7-11
For about and article pages: the title in caps at step 5 centred on 2–11, the ornament on 4–9, a centred lead on 3–10, then the body in two mirrored columns 2–6 and 7–11 (body copy itself is justified or left-aligned inside its column, never centred over long measures).
Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.
We hand over everything — source files, a living brand system and a website your team can edit without calling us.
Our team is eleven people: strategists, writers, designers and two engineers who ship what the others draw.
Desktop
How we think
Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.
We hand over everything — source files, a living brand system and a website your team can edit without calling us.
Our team is eleven people: strategists, writers, designers and two engineers who ship what the others draw.
A double hairline, then three mirrored zones: address right-aligned 1–4, wordmark centred 5–8, links 9–12; legal centred below.
Slots
address, siteName, pages, legal
Grid
address 1-4 · wordmark 5-8 · links 9-12
A double hairline, then three mirrored zones: the address right-aligned on 1–4, the wordmark centred on 5–8, the links stacked on 9–12; the legal line centred below.