Skip to content
SloplessTry the picker

Base style · contemporary · airy

Japanese Minimal

Ma made visible: wide washi-paper space, a few small elements pinned to the far edges of the grid, vertical headings, sumi ink and a single vermilion seal.

Moods
calm, minimal, organic, elegant
Suits
wellness, architecture, hospitality, crafts, food, portfolio
Type
Shippori Mincho + Zen Kaku Gothic New

Principles

  • Leave at least half of the 12 columns empty in every section; space is the material
  • Pin few, small elements to the far edges of the grid and keep the centre open
  • Set titles vertically, top to bottom, wherever a pattern places them in a single column
  • Use one small vermilion seal square as the only saturated colour on a screen
  • Keep type small and light: headlines at step 2–5, weight 300–400, loose leading

Hard rules

  • No full-width headlines, no display type above step 5, no bold (700+) headings.
  • No centred hero with a headline over an image, no image wider than six columns.
  • No cards, boxes with four borders, shadows, rounded corners or gradients.
  • No icons, illustrations of cherry blossoms, torii, kanji decoration or "oriental" clichés; the style is restraint, not costume.
  • No more than one accent element per screen and no accent-filled buttons — buttons are ghost or text links.
  • No dense grids: never more than three items per row, never more than two images side by side.

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 Japanese Minimal 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

  • Leave at least half of the 12 columns empty in every row; place blocks exactly on the spans in `layout.json` and do not stretch them to fill.
  • Pin elements to the far edges (columns 1–3 and 9–12) and keep the middle of the page open; the hero's centre is always empty paper.
  • Set single-column titles vertically with `writing-mode: vertical-rl` (top to bottom, columns read right to left) wherever a pattern gives a title one column; at phone width they turn horizontal.
  • Keep type small and light: hero headlines at step 3–5, weight 300–400; body at base size with loose leading (1.8–2.0).
  • Use one vermilion seal (a small accent square, 12–24 px) as the only saturated colour on a screen; links use the `link` ink, never a bright blue.
  • Use 1 px hairlines in the `border` colour, sparingly — at most one rule per section.
  • Use muted, low-saturation photographs or grayscale, small (two to five columns), square-cornered, with a small muted caption.
  • Space sections far apart (`space.section` 192 px) and items within a list far apart (5–10 units).
  • At 375 px keep the emptiness: stack in source order with wide gaps, keep images narrow (at most 70% of the screen width), keep the seal.

Don't

  • No full-width headlines, no display type above step 5, no bold (700+) headings.
  • No centred hero with a headline over an image, no image wider than six columns.
  • No cards, boxes with four borders, shadows, rounded corners or gradients.
  • No icons, illustrations of cherry blossoms, torii, kanji decoration or "oriental" clichés; the style is restraint, not costume.
  • No more than one accent element per screen and no accent-filled buttons — buttons are ghost or text links.
  • No dense grids: never more than three items per row, never more than two images side by side.
  • No marquees, tickers, carousels or attention-seeking motion; transitions are slow fades (700 ms).
  • No justified text and no centred paragraphs.

Heroes (5)

Vertical column

hero.japanese-vertical-column · hero

Rule
The headline runs vertically (top to bottom) in columns 11–12 from the top edge; a small vermilion seal sits in column 10; the subhead and a text link are pinned bottom-left in 2–5. Columns 6–9 stay empty.
Slots
headline, eyebrow, subhead, cta
Grid
headline 11-12 · seal 10-10 · text 2-5
Notes
Set the headline with writing-mode: vertical-rl (not a rotated horizontal line) so it reads top to bottom; at phone width it becomes a horizontal h1 at step 4 above the text.

The headline stands vertically (`writing-mode: vertical-rl`, step 5, weight 400) in columns 11–12, starting at the top edge of the hero. A small vermilion seal sits at the top of column 10, touching the headline's left side. The eyebrow (small, muted), the subhead (body, loose leading, max 34 ch) and a text link with an arrow are pinned to the bottom of columns 2–5. Columns 6–9 stay empty. At phone width the headline turns horizontal at step 4 and the text follows it.

We make complicated companies simple to choose

Brand & product studio

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

We make complicated companies simple to choose

Brand & product studio

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

Ma with a single image

hero.japanese-ma-single-image · hero

Rule
One small 3:4 image in 8–10 near the top with its caption under it; a quiet h1 (step 3) and subhead pinned bottom-left in 2–5; a ghost button bottom-right in 11–12. Everything else is empty paper.
Slots
heroImage, caption, headline, subhead, cta
Grid
image 8-10 · text 2-5 · action 11-12
Notes
The image never grows past three columns at desktop; the empty space around it is the composition. Muted, low-saturation photograph, square corners.

One small 3:4 photograph in 8–10, top-aligned, with its small muted caption directly under it. A quiet h1 (step 3, weight 400, max 14 ch) and a small subhead are pinned to the bottom of 2–5; a small ghost button sits at the bottom of 11–12. The image never grows beyond three columns.

Corvid Robotics — identity

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

Corvid Robotics — identity

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

Horizon line

hero.japanese-horizon-line · hero

Rule
A light-weight headline (step 4, weight 300) sits in 7–12 at the top; a single hairline crosses the page like a horizon; a muted meta in 1–3, the subhead in 7–10 and a text link in 11–12 sit below it.
Slots
eyebrow, headline, meta, subhead, cta
Grid
eyebrow 1-2 · headline 7-12 · meta 1-3 · subhead 7-10 · cta 11-12
Notes
The hairline sits about 60% down the hero; nothing crosses it. The headline is the only large text and it is light, not bold.

Top row: a small muted eyebrow in 1–2 and the headline in 7–12 (step 4, weight 300). A single hairline crosses the full width about 60% down the hero. Under it: a muted meta line in 1–3, the subhead in 7–10 and an underlined text link in 11–12. Nothing crosses the line.

Brand & product studio

We make complicated companies simple to choose

Booking projects from June 2026

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

Booking projects from June 2026

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

Ensō

hero.japanese-enso · hero

Rule
A thin brush-like ring (ensō) occupies 2–6; the headline and subhead hang in 8–11 bottom-aligned to the ring's centre, with a small seal and a text link under them.
Slots
headline, subhead, cta
Grid
enso 2-6 · text 8-11
Notes
Draw the ring as an open, slightly uneven circle (a single SVG brush stroke with a gap at the top right), 2–3 px, in the heading ink. Never filled.

An ensō — an open, slightly uneven brush ring, 2–3 px, in the heading ink, never filled — fills columns 2–6. The h1 (step 4, weight 400, max 12 ch) and subhead hang in 8–11, bottom-aligned with the ring's centre; under them, a small seal and a text link on one line.

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

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

Hanging scroll

hero.japanese-kakejiku-scroll · hero

Rule
A tall, narrow 9:16 image hangs in 2–4 like a kakejiku; the vertical headline stands alone in 6–7; the subhead and a text link sit bottom-right in 9–12.
Slots
heroImage, headline, subhead, cta
Grid
scroll 2-4 · headline 6-7 · text 9-12
Notes
The headline uses writing-mode: vertical-rl. At phone width the image runs the full width, then the headline turns horizontal.

A tall 9:16 grayscale image hangs in columns 2–4 like a hanging scroll. The headline stands alone, vertical, in columns 6–7 (two columns, so it keeps its full size). The subhead and a text link sit at the bottom of 9–12. Columns 5 and 8 stay empty.

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

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

Navigation (2)

Content blocks (13)

Stepping stones

features.japanese-stepping-stones · features

Rule
A small label in 1–2 and a quiet title in 4–7; features follow as widely spaced rows: small number in 4, title in 5–7, a short paragraph in 8–10. Columns 1–3 and 11–12 stay empty.
Slots
sectionLabel, title, features[3..5]
Grid
label 1-2 · title 4-7 · number 4-4 · item 5-7 · body 8-10

A small muted label in 1–2 and a quiet title (step 2, weight 400) in 4–7. Features follow as rows separated by wide space (10 units), no rules: a small muted number in column 4, the title (h4, weight 400) in 5–7, a short paragraph (small, loose leading, max 36 ch) in 8–10.

What you get

What we do

01

Positioning

Find the one sentence your best customers already believe.

02

Identity systems

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

03

Websites

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

04

Sales enablement

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

Desktop

What you get

What we do

01

Positioning

Find the one sentence your best customers already believe.

02

Identity systems

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

03

Websites

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

04

Sales enablement

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

Phone, 390 px

Vertical essay

content.japanese-vertical-essay · content

Rule
Read right to left: a vertical title in columns 11–12, a thin vertical rule in 10, the first paragraph in 7–9 and the second in 3–5, both narrow with loose leading.
Slots
title, body, body2
Grid
title 11-12 · rule 10-10 · first 7-9 · second 3-5

Read right to left: a vertical title in columns 11–12, a 1 px vertical rule in column 10, the first paragraph in 7–9 (top-aligned) and the second in 3–5 (bottom-aligned), both narrow (max 30 ch) with loose leading. At phone width: title (horizontal), first paragraph, second paragraph.

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.

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.

Phone, 390 px

Asymmetric pair

gallery.japanese-asymmetric-pair · gallery

Rule
Two images only: a 4:5 photograph in 2–6 and a small square in 9–10 dropped to the bottom of the first, its caption under it in 9–11.
Slots
gallery1, gallery2, caption
Grid
large 2-6 · small 9-10 · caption 9-11

Exactly two images: a 4:5 photograph in 2–6 and a small square in 9–10, its bottom edge aligned with the large image's bottom; the caption sits under the square in 9–11. Never a grid of thumbnails.

Corvid Robotics — identity

Desktop

Corvid Robotics — identity

Phone, 390 px

Seasonal index

list.japanese-seasonal-index · list

Rule
A small label in 1–2; a long, quiet list in 5–10 split by hairlines, each row on a six-column sub-grid: muted meta 1, title 2–4, muted note 5–6.
Slots
sectionLabel, items[4..12]
Grid
label 1-2 · list 5-10

A small label in 1–2. The list runs in 5–10, rows separated by hairlines, each row on a six-column sub-grid: a muted meta (date or season) in column 1, the title (body size) in 2–4, a muted note in 5–6. It may be long (up to twelve rows); it stays quiet because the type is small.

Index

2 weeks

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

1 day

Positioning workshop

A day with your leadership to agree on one story.

8 weeks

Identity design

Logo, type, colour, motion and a working toolkit.

10 weeks

Website

Strategy, copy, design and build in Webflow or Next.js.

4 weeks

Launch support

Training, templates and a month of on-call design.

Ongoing

Retainer

A senior designer embedded two days a week.

Desktop

Index

2 weeks

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

1 day

Positioning workshop

A day with your leadership to agree on one story.

8 weeks

Identity design

Logo, type, colour, motion and a working toolkit.

10 weeks

Website

Strategy, copy, design and build in Webflow or Next.js.

4 weeks

Launch support

Training, templates and a month of on-call design.

Ongoing

Retainer

A senior designer embedded two days a week.

Phone, 390 px

Single line

testimonial.japanese-single-line · testimonial

Rule
A seal in column 3, the quote in light type (step 2, weight 300) in 4–9 with loose leading, the attribution small and muted below. Generous padding above and below.
Slots
quote, author
Grid
seal 3-3 · quote 4-9 · author 4-6

A seal in column 3, the quote in light type (step 2, weight 300, loose leading, max 40 ch) in 4–9, the author in small muted type under it. Wide padding above and below (16 units). One quote only.

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

Hanna Lindqvist

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

Hanna Lindqvist

Phone, 390 px

Quiet figures

stats.japanese-quiet-figures · stats

Rule
Label in 1–3; two or three figures as a short ruled list in 8–11: light numeral (step 3, weight 300) on the left, a muted note on the right of the same line.
Slots
sectionLabel, stats[2..3]
Grid
label 1-3 · figures 8-11

A small label in 1–3. Two or three figures in 8–11 as a ruled list: the numeral (step 3, weight 300) on the left and a muted note on the right of the same baseline, a hairline under each.

By the numbers

140+

launches shipped

12

years independent

Desktop

By the numbers

140+

launches shipped

12

years independent

Phone, 390 px

Ink seal

cta.japanese-ink-seal · cta

Rule
On the surface tone: a vermilion seal square in column 2, column 3 left empty, then the headline (step 3) and a ghost button stacked in 4–8; columns 9–12 stay empty.
Slots
headline, cta
Grid
seal 2-2 · text 4-8

On the `surface` tone: a medium vermilion seal square in column 2, the headline (step 3, weight 400, max 20 ch) and a ghost button stacked in 4–8, so one empty column separates them from the seal. Columns 9–12 stay empty.

Have a hard thing to explain?

Start a project
Desktop

Have a hard thing to explain?

Start a project
Phone, 390 px

Margin notes

faq.japanese-margin-notes · faq

Rule
A quiet title in 1–3; questions in 6–11 as widely spaced notes on a six-column sub-grid: question small and bold in 1–2, answer in 3–6.
Slots
title, faqs[3..6]
Grid
title 1-3 · list 6-11

A quiet title (h3, weight 400) in 1–3. Questions in 6–11, separated by space (no rules), each on a six-column sub-grid: the question in small type at weight 700 in 1–2, the answer (loose leading, max 40 ch) in 3–6. Every answer visible.

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.

Desktop

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.

Phone, 390 px

Small portraits

team.japanese-small-portraits · team

Rule
A quiet title in 2–4; small grayscale 3:4 portraits three per row in 7–12 with name and role in small type underneath.
Slots
title, team[3..6]
Grid
title 2-4 · people 7-12

A quiet title in 2–4; small grayscale 3:4 portraits three per row in 7–12, with the name and role in small type under each. No circles.

The studio

Rita Carvalho

Founder, strategy

Owen Blake

Design director

Sana Qureshi

Lead developer

Mateus Lima

Copy and naming

Desktop

The studio

Rita Carvalho

Founder, strategy

Owen Blake

Design director

Sana Qureshi

Lead developer

Mateus Lima

Copy and naming

Phone, 390 px

Letter

contact.japanese-letter · contact

Rule
A vertical title in column 12; address, email and hours in small type in 2–4; the form (name, email, message) in 7–11 with bottom-hairline fields.
Slots
title, address, email, hours, contact
Grid
details 2-4 · form 7-11 · title 12-12

A vertical title in column 12; the address, email and hours in small type in 2–4; the form (name, email, message) in 7–11 with fields drawn as a single bottom hairline and a ghost submit button.

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
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
Message
Tell us a little about your project…
Send message
Phone, 390 px

Journal

blog.japanese-journal · blog

Rule
A small label in 1–2; entries in a single narrow column 4–9 separated by wide space: muted date, a regular-weight h4 title, a two-line summary. No images.
Slots
sectionLabel, posts[3..8]
Grid
label 1-2 · entries 4-9

A small muted label in 1–2; entries in one narrow column 4–9 separated by wide space: muted date, an h4 title at weight 400, a two-line summary. No thumbnails, no tags.

Journal

Apr 3, 2026 · 8 min

Your homepage is a sales call nobody attends

What lost-deal interviews reveal about B2B websites.

Mar 1, 2026 · 5 min

The case against the brand book

Why guidelines belong in a website your team visits.

Jan 22, 2026 · 6 min

Naming a product in 2026

Trademarks, domains and the 400-name longlist.

Dec 9, 2025 · 4 min

Industrial brands deserve good type

Notes from rebranding a valve manufacturer.

Desktop

Journal

Apr 3, 2026 · 8 min

Your homepage is a sales call nobody attends

What lost-deal interviews reveal about B2B websites.

Mar 1, 2026 · 5 min

The case against the brand book

Why guidelines belong in a website your team visits.

Jan 22, 2026 · 6 min

Naming a product in 2026

Trademarks, domains and the 400-name longlist.

Dec 9, 2025 · 4 min

Industrial brands deserve good type

Notes from rebranding a valve manufacturer.

Phone, 390 px

Plain tiers

pricing.japanese-plain-tiers · pricing

Rule
A quiet title in 1–3; plans in 6–11 as ruled rows on a six-column sub-grid: name 1–2, light price 3–4, text link 5–6, and a muted note under the name.
Slots
title, plans[2..3]
Grid
title 1-3 · plans 6-11

A quiet title in 1–3. Plans in 6–11 as ruled rows on a six-column sub-grid: plan name in 1–2, the price in light type (h3, weight 300) in 3–4, a text link in 5–6, and a muted one-line note under the name. No highlighted plan.

Engagements

Sprint

€18k

Choose Sprint

Two-week positioning sprint with a written brand platform.

Rebrand

€85k

Most popular — choose

Positioning, identity and a launch toolkit over 12 weeks.

Desktop

Engagements

Sprint

€18k

Choose Sprint

Two-week positioning sprint with a written brand platform.

Rebrand

€85k

Most popular — choose

Positioning, identity and a launch toolkit over 12 weeks.

Phone, 390 px

Footers (2)

Colophon corner

footer.japanese-colophon-corner · footer

Rule
One quiet line: wordmark 1–2, seal 3, page links 7–10, muted legal 11–12. Small type only, no rule.
Slots
siteName, pages, legal
Grid
logo 1-2 · seal 3-3 · links 7-10 · legal 11-12

One quiet line in small type: wordmark 1–2, the seal in column 3, page links 7–10, muted legal 11–12. No rule above it — the space is the separator.

Northfold
  • Services
  • Work
  • About
  • Contact

© 2026 Northfold. All rights reserved.

Desktop
Northfold
  • Services
  • Work
  • About
  • Contact

© 2026 Northfold. All rights reserved.

Phone, 390 px

Vertical sign-off

footer.japanese-vertical-signoff · footer

Rule
The site name set vertically in column 12 as a signature; links stacked in 2–3 and the muted legal line under them.
Slots
siteName, pages, legal
Grid
links 2-3 · legal 2-5 · signature 12-12

The site name set vertically in column 12 like a signature; the page links stacked in 2–3 and the muted legal line at the bottom of 2–5.

Northfold

  • Services
  • Work
  • About
  • Contact

© 2026 Northfold. All rights reserved.

Desktop

Northfold

  • Services
  • Work
  • About
  • Contact

© 2026 Northfold. All rights reserved.

Phone, 390 px

Hero library heroes that suit Japanese Minimal

Statement, bottom-lefthero.minimal-statement-left · minimalA tall, quiet hero: a mono index top-left and meta top-right on one row, and a two-to-three-line statement as the h1 at step 5 sitting on the bottom-left (1–9), with one underline link under it.Vertical headlinehero.type-vertical · oversized-typeThe headline runs vertically up the left edge (columns 1–4) for the full hero height; the image fills 5–9; eyebrow sits top-right and subhead, CTA and meta sit bottom-right in 10–12.Whitespace with a single actionhero.minimal-whitespace-cta · minimalColumns 1–7 are left empty on purpose; a small block in 8–11 sits on the bottom edge: eyebrow, a short h1 at step 3 and one large primary button. Column 12 stays empty.Single linehero.minimal-single-line · minimalOne sentence as the h1 at step 4, flush left across 1–10 and vertically centred in a 60vh hero; one text link with an arrow in 11–12 on the same line. Nothing else.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).Split, offset stackhero.split-offset-stack · splitThree blocks step down the grid and overlap: the image in 5–12 (rows 1–2), a solid headline panel in 1–7 that covers the image's lower-left corner (rows 2–3), and a ruled subhead + link in 9–12 (row 3).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.Editorial columnshero.editorial-columns · editorialA ruled kicker bar spans the page; the headline runs 1–8 at step 7; below it a deck in 1–4 and a ruled text column in 5–8 start the story; a captioned 3:4 photo fills 9–12 beside both.