Skip to content
SloplessTry the picker

Base style · 1900s-1930s · balanced

Art Deco

Jazz-age luxury on a central axis: gold display capitals on near-black, stepped double-ruled frames, sunbursts, arches and diamond ornaments.

Moods
luxurious, elegant, retro, bold
Suits
hospitality, food, events, fashion, real-estate, finance
Type
Limelight + Josefin Sans

Principles

  • Compose every section on the central axis: centre the type and mirror elements left and right
  • Gold on near-black: one metallic accent for type, rules and ornaments, never as a large flat page fill except one CTA band
  • Set headings in uppercase display type with wide letter-spacing, at the face's regular weight
  • Frame content in stepped, ruled borders and mark breaks with a diamond ornament between two hairlines
  • Build height in setbacks: stack bars, chevrons and arches in widening tiers like a skyscraper crown

Hard rules

  • 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.

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.

Do

  • 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).

Heroes (4)

Sunburst portal

hero.deco-sunburst-portal · hero

Rule
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.
Slots
eyebrow, headline, subhead, cta, cta2
Grid
sun 4-9 · eyebrow 3-10 · headline 2-11 · ornament 4-9 · subhead 4-9 · actions 4-9
Notes
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.

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Phone, 390 px

Stepped frame

hero.deco-stepped-frame · hero

Rule
Three nested frames (each 1px rule, stepped inwards) hold a centred headline on columns 3–10; vertical pilaster rules stand in columns 2 and 11.
Slots
eyebrow, headline, subhead, cta
Grid
pilasterLeft 2-2 · frame 3-10 · pilasterRight 11-11
Notes
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.

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project
Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project
Phone, 390 px

Triptych of arches

hero.deco-triptych-arches · hero

Rule
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.

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project
Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project
Phone, 390 px

Ziggurat setback

hero.deco-ziggurat-setback · hero

Rule
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.
Slots
headline, facts[3..3], cta
Grid
crown 3-10 · headline 2-11 · facts 3-10 · action 4-9
Notes
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.

We make complicated companies simple to choose

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Start a project
Desktop

We make complicated companies simple to choose

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Start a project
Phone, 390 px

Navigation (2)

Content blocks (13)

Framed pairs

features.deco-framed-pairs · features

Rule
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.

What you get

What we do

Positioning

Find the one sentence your best customers already believe.

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

Websites

Fast, editable sites built on the CMS your team already knows.

Sales enablement

Decks, one-pagers and demos your reps actually use.

Product naming

Names that survive trademark search and a noisy trade show.

Brand governance

Guidelines as a living site, not a forgotten PDF.

Desktop

What you get

What we do

Positioning

Find the one sentence your best customers already believe.

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

Websites

Fast, editable sites built on the CMS your team already knows.

Sales enablement

Decks, one-pagers and demos your reps actually use.

Product naming

Names that survive trademark search and a noisy trade show.

Brand governance

Guidelines as a living site, not a forgotten PDF.

Phone, 390 px

Monument statement

content.deco-monument-statement · content

Rule
An inverted accent chevron on 6–7, the statement in spaced capitals across 2–11 at step 4, an ornament on 5–8 and a centred paragraph on 4–9.
Slots
statement, body, cta
Grid
chevron 6-7 · statement 2-11 · ornament 5-8 · body 4-9

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.

Start a project
Phone, 390 px

Arcade

gallery.deco-arcade · gallery

Rule
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.
Slots
sectionLabel, title, gallery1, gallery2, gallery3, caption
Grid
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.

Gallery

Selected work

Corvid Robotics — identity

Desktop

Gallery

Selected work

Corvid Robotics — identity

Phone, 390 px

Gilt figures

stats.deco-gilt-figures · stats

Rule
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.

By the numbers

140+

launches shipped

Counted since we opened, updated every quarter.

12

years independent

Measured across every project, not our best ones.

9 of 10

clients return

From our own records, checked each year.

Desktop

By the numbers

140+

launches shipped

Counted since we opened, updated every quarter.

12

years independent

Measured across every project, not our best ones.

9 of 10

clients return

From our own records, checked each year.

Phone, 390 px

Cartouche

testimonial.deco-cartouche · testimonial

Rule
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.

“They understood our product faster than our own sales team did.”

Hanna Lindqvist

CEO, Corvid Robotics

Desktop
“They understood our product faster than our own sales team did.”

Hanna Lindqvist

CEO, Corvid Robotics

Phone, 390 px

Gilded band

cta.deco-gilded-band · cta

Rule
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.
Slots
headline, body, cta
Grid
diamond 6-7 · headline 2-11 · body 4-9 · action 4-9

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.

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.

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.

Start a project
Phone, 390 px

Colonnade FAQ

faq.deco-colonnade · faq

Rule
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.

FAQ

Working together

How big are your projects?

Most run 8–16 weeks with a team of three to five people.

Do you work with startups?

Yes, from Series A onwards, when there's a product and paying customers.

Do you build the website too?

We design and build, then train your team to run it.

Where are you based?

Lisbon and London, working with clients across Europe and North America.

Can we hire you for a single deliverable?

Occasionally — a naming project or a sales deck. Ask us.

Desktop

FAQ

Working together

How big are your projects?

Most run 8–16 weeks with a team of three to five people.

Do you work with startups?

Yes, from Series A onwards, when there's a product and paying customers.

Do you build the website too?

We design and build, then train your team to run it.

Where are you based?

Lisbon and London, working with clients across Europe and North America.

Can we hire you for a single deliverable?

Occasionally — a naming project or a sales deck. Ask us.

Phone, 390 px

Tiered plaques

pricing.deco-tiered-plaques · pricing

Rule
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.

Pricing

Engagements

Sprint

€18k

Two-week positioning sprint with a written brand platform.

Choose Sprint

Rebrand

€85k

Positioning, identity and a launch toolkit over 12 weeks.

Most popular — choose
Desktop

Pricing

Engagements

Sprint

€18k

Two-week positioning sprint with a written brand platform.

Choose Sprint

Rebrand

€85k

Positioning, identity and a launch toolkit over 12 weeks.

Most popular — choose
Phone, 390 px

Portrait medallions

team.deco-medallions · team

Rule
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.

Team

The studio

Rita Carvalho

Founder, strategy

Owen Blake

Design director

Sana Qureshi

Lead developer

Mateus Lima

Copy and naming

Desktop

Team

The studio

Rita Carvalho

Founder, strategy

Owen Blake

Design director

Sana Qureshi

Lead developer

Mateus Lima

Copy and naming

Phone, 390 px

Concierge desk

contact.deco-concierge · contact

Rule
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.

Start a conversation

Rua da Boavista 72, 1200-066 Lisboa

hello@northfold.com

Studio open Mon–Thu, 9:30–18:00

Name
Your name
Email
you@example.com
Date
Fri 12 June
Message
Tell us a little about your project…
Send message
Desktop

Start a conversation

Rua da Boavista 72, 1200-066 Lisboa

hello@northfold.com

Studio open Mon–Thu, 9:30–18:00

Name
Your name
Email
you@example.com
Date
Fri 12 June
Message
Tell us a little about your project…
Send message
Phone, 390 px

Society gazette

blog.deco-gazette · blog

Rule
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.

Journal

Field notes

Apr 3, 2026 · 8 min

Your homepage is a sales call nobody attends

What lost-deal interviews reveal about B2B websites.

Read

Mar 1, 2026 · 5 min

The case against the brand book

Why guidelines belong in a website your team visits.

Read

Jan 22, 2026 · 6 min

Naming a product in 2026

Trademarks, domains and the 400-name longlist.

Read

Dec 9, 2025 · 4 min

Industrial brands deserve good type

Notes from rebranding a valve manufacturer.

Read
Desktop

Journal

Field notes

Apr 3, 2026 · 8 min

Your homepage is a sales call nobody attends

What lost-deal interviews reveal about B2B websites.

Read

Mar 1, 2026 · 5 min

The case against the brand book

Why guidelines belong in a website your team visits.

Read

Jan 22, 2026 · 6 min

Naming a product in 2026

Trademarks, domains and the 400-name longlist.

Read

Dec 9, 2025 · 4 min

Industrial brands deserve good type

Notes from rebranding a valve manufacturer.

Read
Phone, 390 px

Proscenium text

content.deco-proscenium-text · content

Rule
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).

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.

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.

Phone, 390 px

Footers (2)

Sunburst base

footer.deco-sunburst-base · footer

Rule
Centred stack: a small half-sun, the wordmark, an ornament, the links on one line, the legal line.
Slots
siteName, pages, legal

A centred stack: a small accent half-sun, the wordmark, the ornament, the page links on one line in spaced capitals, and the muted legal line.

Northfold
  • Services
  • Work
  • About
  • Contact

© 2026 Northfold. All rights reserved.

Desktop
Northfold
  • Services
  • Work
  • About
  • Contact

© 2026 Northfold. All rights reserved.

Phone, 390 px

Colonnade base

footer.deco-colonnade-base · footer

Rule
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.

Rua da Boavista 72, 1200-066 Lisboa

Northfold
  • Services
  • Work
  • About
  • Contact

© 2026 Northfold. All rights reserved.

Desktop

Rua da Boavista 72, 1200-066 Lisboa

Northfold
  • Services
  • Work
  • About
  • Contact

© 2026 Northfold. All rights reserved.

Phone, 390 px

Hero library heroes that suit Art Deco

Full-bleed in a mat framehero.fullbleed-framed · full-bleedThe photo fills the viewport inside an even mat of page colour (one space step 3 on all sides); four labels sit in the mat's corners: eyebrow top-left, meta top-right, headline bottom-left, CTA bottom-right.Giant wordmarkhero.giant-wordmark · oversized-typeThe site name runs edge to edge at the largest step, sitting on the bottom of the hero; a three-zone strip above it carries eyebrow (1–4), headline + subhead (5–9) and CTA (11–12).Logo onlyhero.minimal-logo-only · minimalA full-viewport hero with only the wordmark (site name at step 8) in the optical centre and the h1 as one small line under it; a footer row carries meta (1–4), a scroll cue (6–7) and a text link (10–12).Justified type stackhero.type-stack-justified · oversized-typeTwo bands of type between 2 px rules, each fitted to the full measure: the site name heavy at step 8, then the headline light at step 5 (one or two lines); a strip above (eyebrow, meta) and a strip below (subhead 1–5, CTA 10–12).Magazine coverhero.editorial-cover · editorialA masthead (site name at step 8, full width) over a dateline rule; the cover photo fills 4–12; cover lines (3–5 numbered teasers) run down 1–3; the headline overlaps the photo's lower-left on a page-colour field.Product, centred shothero.product-centered-shot · productProduct launch layout on one axis: a short product-name headline, a wide 16:9 product shot that dominates the hero, a row of 3–4 specs divided by rules, then price and one CTA.Video inset under the headlinehero.video-inset-frame · videoA full-width display headline at step 6; under it, on one row, a subhead + CTA in 1–4 and a wide 21:9 rounded video window in 5–12 that sits like part of the headline.Full-bleed duotone in an accent fieldhero.fullbleed-duotone · full-bleedThe hero is an accent-coloured field: headline at step 5 in onAccent across 1–10, subhead + CTA under it, then a duotone photo (accent × ink) running edge to edge at 21:9.