Base style · contemporary · dense

Bento Tech

A modular product page built like a bento box: tiles of different sizes locked into a tight grid, dense with numbers, product UI screenshots and mono details, set in one crisp sans.

Use this style Designs in this style

Moods: technical, cool, minimal, futuristic
Suits: saas, devtools, ai, fintech, ecommerce, science
Type: Geist

Principles

Build every major section as a bento: tiles of at least three different sizes locked into the 12-column grid with explicit rows
Never set three equal cards in a row; one tile is always dominant (2× area or more) and one carries the accent fill
Show the product: real UI screenshots inside tiles, cropped to the tile, instead of illustrations or icons
Pack information densely: numbers, deltas, versions and commands in a mono face; tight 12 px gaps
One crisp sans at weights 500–600 with tight tracking; colour comes from one accent tile per section

Hard rules

No three equal cards in a row, no icon-title-text card grids, no feature list with check icons.
No gradients, glows, glassmorphism or drop shadows; depth comes from the border and surface fill only.
No illustrations, 3D blobs or stock photos of people at laptops; screenshots or nothing.
No more than one accent-filled tile per section, and never accent-coloured body text.
No tile without a job: every tile holds exactly one message, number, screenshot or action.
No centred long-form text; inside tiles text is flush left (a single short label may centre in a small tile).

7 options

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 Bento Tech 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.

Reference render of the default design llms.txt

Do

Build heroes and feature sections as bentos: place tiles exactly on the `span` / `rowSpan` values in `layout.json` using CSS grid with explicit rows (`grid-template-rows` or `grid-auto-rows: minmax(160px, auto)`), and stretch tiles to fill their cells.
Make every tile the same material: `surface` fill (or `surfaceAlt` where the tree says), a 1 px border in the `border` colour, the `radius` token (20 px), 24 px padding, no shadow.
Keep tile gaps at the `gutter` token (12 px) both ways, so the grid reads as one object.
Give each bento one dominant tile (at least twice the area of the others) and at most one accent-filled tile.
Fill media tiles with real product UI screenshots (`treatment: product`), cropped to the tile with `object-fit: cover`, inner radius = tile radius − padding.
Set numbers big and tight (weight 600, `tracking: tight`, tabular figures) and pair them with a mono delta or unit in the link colour (+12 %, v2.4, 38 ms).
Use the mono face for versions, commands, dates, keyboard shortcuts and labels; everything else in the one sans at 500–600 for headings, 400 for text.
Animate tiles subtly on hover: border colour to `link`, 2 px lift, 220 ms; nothing auto-plays.
At 375 px: tiles stack in source order at full width, keep their radius and padding; tiles that were side by side in a 2×2 stay two per row only for KPI numbers.

Don't

No three equal cards in a row, no icon-title-text card grids, no feature list with check icons.
No gradients, glows, glassmorphism or drop shadows; depth comes from the border and surface fill only.
No illustrations, 3D blobs or stock photos of people at laptops; screenshots or nothing.
No more than one accent-filled tile per section, and never accent-coloured body text.
No tile without a job: every tile holds exactly one message, number, screenshot or action.
No centred long-form text; inside tiles text is flush left (a single short label may centre in a small tile).
No serif or display faces; no weights above 600; no all-caps paragraphs.
No uneven gutters: never mix 12 px and 24 px gaps inside one bento.

Heroes (4)

Launch grid

hero.bento-launch-grid · hero

Rule: The hero is a bento: a big message tile in 1–7 over two rows, a product-shot tile in 8–12, an accent stat tile in 8–9, a feature tile in 10–12, and a mono logo strip under all of them.
Slots: eyebrow, headline, subhead, cta, cta2, caption, heroImage, index, meta, tagline, body, logos[4..6]
Grid: message 1-7 · shot 8-12 · stat 8-9 · feature 10-12 · logos 1-12
Notes: Every tile has the surface fill, a 1 px border and the style radius; gaps between tiles are 12 px. The accent tile is the only filled colour.

Explicit rows. Rows 1–2, columns 1–7: the message tile (padding 40 × 32 px) with the mono release tag in the link colour at the top, the display headline at step 6 (weight 600, ≤16 ch) in the middle and the subhead plus primary and secondary buttons at the bottom. Row 1, 8–12: a product-shot tile with a mono caption and a 16:9 screenshot. Row 2: an accent tile in 8–9 with a big number and a small line (onAccent), and a surfaceAlt tile in 10–12 with a weight-600 label and a short line. Row 3: a mono logo strip (customer names, muted) across 1–12, hidden at phone width (never cut a name mid-word).

Open alone, full size (desktop, tablet, phone; layout tree included)

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

Corvid Robotics — identity

Booking projects from June 2026

Strategy and design for companies that make things

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

Corvid Robotics

Fieldstack

Tidewater Labs

Arklow Valves

Mosswood Bio

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

Corvid Robotics — identity

Booking projects from June 2026

Strategy and design for companies that make things

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

Phone, 390 px

Product console

hero.bento-product-console · hero

Rule: Headline in 1–7 bottom-aligned with subhead and buttons in 9–12; below, a product screenshot tile fills 1–9 over two rows, beside a stat tile and a mono install-command tile stacked in 10–12.
Slots: headline, subhead, cta, cta2, heroImage, index, caption, meta, body
Grid: headline 1-7 · aside 9-12 · screen 1-9 · side 10-12

Top: the display headline (step 6, ≤18 ch) in 1–7, bottom-aligned with a muted subhead and primary + ghost buttons in 9–12. Below, a bento: a 16:9 screenshot tile filling 1–9 over two rows, a stat tile (number at step 5 and caption) in 10–12 row 1, and a surfaceAlt tile in 10–12 row 2 holding a mono install command and one short line.

Open alone, full size (desktop, tablet, phone; layout tree included)

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

Corvid Robotics — identity

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.

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 projectRead case studies

Corvid Robotics — identity

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.

Phone, 390 px

Sidebar stack

hero.bento-sidebar-stack · hero

Rule: Three stacked fact tiles fill columns 1–4 at full hero height; columns 5–12 hold a message tile on top and a product image tile filling the two rows below.
Slots: facts[3..3], eyebrow, headline, subhead, cta, heroImage
Grid: facts 1-4 · message 5-12 · product 5-12

At least 85 vh. Columns 1–4: three fact tiles stacked to fill the full height (number at step 4, label, short line). Columns 5–12: a message tile on row 1 (mono eyebrow, h1 at step 5, subhead and a primary button on one row) and a product image tile filling rows 2–3 edge to edge with 12 px inset. Each fact tile pins its number to the top and its label and line to the bottom. Phone: message tile first, then the facts, then the product.

Open alone, full size (desktop, tablet, phone; layout tree included)

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

140+

launches shipped

Counted since we opened, updated every quarter.

years independent

Measured across every project, not our best ones.

9 of 10

clients return

From our own records, checked each year.

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

140+

launches shipped

Counted since we opened, updated every quarter.

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

Metric wall

hero.tech-metric-wall · hero

Rule: Message and an inline waitlist form in 1–6, vertically centred beside a 2×2 wall of metric tiles in 7–12; a full-width 21:9 product screenshot closes the hero.
Slots: eyebrow, headline, subhead, newsletter, stats[4..4], heroImage
Grid: message 1-6 · metrics 7-12 · screen 1-12

Columns 1–6, vertically centred: mono eyebrow, display headline at step 6 (≤14 ch), lead and an inline waitlist form. Columns 7–12: a 2×2 wall of metric tiles (number at step 5, caption, mono delta in the link colour). Under both, a 21:9 product screenshot across the full grid with the style radius.

Open alone, full size (desktop, tablet, phone; layout tree included)

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.

you@example.com

140+

launches shipped

Since 2014

years independent

2025

9 of 10

clients return

Audited

31%

average lift in demo requests

Last 12 months

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.

you@example.com

140+

launches shipped

Since 2014

years independent

2025

9 of 10

clients return

Audited

31%

average lift in demo requests

Last 12 months

Phone, 390 px

Navigation (2)

Floating bar

nav.bento-floating-bar · nav

Rule: One bordered tile across the page: wordmark left, pill links centre, a ghost sign-in and a primary button right.
Slots: siteName, pages, cta2, cta

One bordered surface tile with the style radius: wordmark left, pill links centred (current page pill in `surfaceAlt`), a ghost "Sign in" (hidden on phones) and a small primary button right.

Open alone, full size (desktop, tablet, phone; layout tree included)

Northfold

Services
Work
About
Contact

Read case studiesStart a project

Desktop

Northfold

Services
Work
About
Contact

Start a project

Phone, 390 px

Command bar

nav.tech-command-bar · nav

Rule: Monogram in 1–2, plain links in 3–8, a mono '⌘K Search' chip on surfaceAlt in 9–10, a small primary button in 11–12.
Slots: siteName, pages, meta, cta
Grid: logo 1-2 · links 3-8 · search 9-10 · cta 11-12

Monogram in 1–2, plain links in 3–8, a mono "⌘K Search" chip on surfaceAlt in 9–10 (hidden on phones), a small primary button in 11–12.

Open alone, full size (desktop, tablet, phone; layout tree included)

NNorthfold

Services
Work
About
Contact

Booking projects from June 2026

Start a project

Desktop

Services
Work
About
Contact

Start a project

Phone, 390 px

Content blocks (12)

Bento mosaic

features.bento-mosaic · features

Rule: A real bento, never a card row: a big tile in 1–7 over two rows (title, line, product shot), a 2×2 of small feature tiles in 8–12, an accent statement tile in 1–4 and a 21:9 screenshot tile in 5–12 under them.
Slots: sectionLabel, title, body, image, features[4..4], statement, cta, gallery1
Grid: big 1-7 · small 8-12 · accent 1-4 · wide 5-12
Notes: Tile sizes must differ; if the content only fills three tiles, drop the 2×2 to two small tiles stacked rather than making three equal cards.

The signature section. Rows 1–2, columns 1–7: the big tile (mono label, h2 weight 600 ≤22 ch, a line, a 16:9 screenshot). Rows 1–2, columns 8–12: four small feature tiles in a 2×2 (mono number, h4, one line). Row 3: an accent tile in 1–4 with a short statement (h3, onAccent) and a secondary button, and a 21:9 screenshot tile in 5–12. Tile sizes must differ.

Open alone, full size (desktop, tablet, phone; layout tree included)

What you get

What we do

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.

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.

Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.

Start a project

Desktop

What you get

What we do

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.

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.

Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.

Start a project

Phone, 390 px

Spec sheet

features.tech-spec-sheet · features

Rule: Title and a mono version line on one row; eight to twelve dense spec cells in a four-column grid, each a bordered tile with a mono label, a value at step 3 and a one-line note.
Slots: title, meta, features[8..12]

Title (h2) and a mono version line on one row, space between. Eight to twelve spec cells in a four-column grid with 8 px gaps: each a bordered (no fill) tile with a mono muted label, a value at step 3 (weight 600) and a one-line note. Two columns on phones.

Open alone, full size (desktop, tablet, phone; layout tree included)

What we do

Booking projects from June 2026

Included

Find the one sentence your best customers already believe.

New

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

Built in

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

Standard

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

Optional

Names that survive trademark search and a noisy trade show.

Always on

Guidelines as a living site, not a forgotten PDF.

Included

Find the one sentence your best customers already believe.

New

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

Desktop

What we do

Booking projects from June 2026

Included

Find the one sentence your best customers already believe.

New

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

Built in

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

Standard

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

Optional

Names that survive trademark search and a noisy trade show.

Always on

Guidelines as a living site, not a forgotten PDF.

Included

Find the one sentence your best customers already believe.

New

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

Phone, 390 px

KPI tiles

stats.bento-kpi-tiles · stats

Rule: An intro tile on surfaceAlt in 1–4 spanning two rows; four KPI tiles in a 2×2 across 5–12, each with a big number, a caption and a mono delta in the link colour.
Slots: sectionLabel, title, body, stats[4..4]
Grid: intro 1-4 · kpis 5-12

A surfaceAlt intro tile in 1–4 spanning two rows (mono label at top, h3 in the middle, a line at the bottom). Four KPI tiles in a 2×2 across 5–12: number at step 6, then caption and a mono delta in the link colour on one baseline.

Open alone, full size (desktop, tablet, phone; layout tree included)

By the numbers

Twelve years in numbers

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.

140+

launches shipped

Since 2014

years independent

2025

9 of 10

clients return

Audited

31%

average lift in demo requests

Last 12 months

Desktop

By the numbers

Twelve years in numbers

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.

140+

launches shipped

Since 2014

years independent

2025

9 of 10

clients return

Audited

31%

average lift in demo requests

Last 12 months

Phone, 390 px

Screens

gallery.bento-screens · gallery

Rule: Product screens on a bento: a tall screen filling 1–8 over two rows, two 4:3 screens stacked in 9–12, then a caption tile in 1–4 beside a 21:9 screen in 5–12.
Slots: gallery1, gallery2, gallery3, title, caption, gallery4
Grid: main 1-8 · side 9-12 · caption 1-4 · wide 5-12

A tall screenshot filling 1–8 over rows 1–2; two 4:3 screenshots stacked in 9–12; row 3: a caption tile in 1–4 (h3 and a line, bottom-aligned) beside a 21:9 screenshot in 5–12. All with the style radius, 12 px gaps.

Open alone, full size (desktop, tablet, phone; layout tree included)

Selected work

Corvid Robotics — identity

Desktop

Selected work

Corvid Robotics — identity

Phone, 390 px

Quote tiles

testimonial.bento-quote-tiles · testimonial

Rule: One large quote tile in 1–7 over two rows (quote at step 3, small round avatar, name and role at the bottom) beside two smaller quote tiles stacked in 8–12.
Slots: quote2, author2, role2, items[2..2]
Grid: main 1-7 · side 8-12

A large tile in 1–7 over two rows (padding 32 px): the quote at step 3 (weight 500) at the top and, at the bottom, a 40 px round avatar beside the name (600) and role. Two smaller quote tiles stacked in 8–12: quote, name, mono company.

Open alone, full size (desktop, tablet, phone; layout tree included)

“Demo requests doubled in the quarter after launch. That paid for the project.”

James Okafor

CMO, Fieldstack

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

Hanna Lindqvist

CEO, Corvid Robotics

Demo requests doubled in the quarter after launch. That paid for the project.

James Okafor

CMO, Fieldstack

Desktop

“Demo requests doubled in the quarter after launch. That paid for the project.”

James Okafor

CMO, Fieldstack

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

Hanna Lindqvist

CEO, Corvid Robotics

Demo requests doubled in the quarter after launch. That paid for the project.

James Okafor

CMO, Fieldstack

Phone, 390 px

Plan tiles

pricing.bento-plan-tiles · pricing

Rule: Title in 1–6 and a line in 8–12; two plan tiles side by side in 1–8 and a surfaceAlt enterprise tile in 9–12 — never three equal cards.
Slots: title, body, plans[2..2], statement, body2, cta2
Grid: title 1-6 · line 8-12 · plans 1-8 · enterprise 9-12

h2 in 1–6 with a muted line bottom-aligned in 8–12. Two plan tiles side by side in 1–8 (mono plan name, price at step 5, one line, primary button) and a surfaceAlt enterprise tile in 9–12 with an h4, a line and a secondary button. Never three equal plan cards.

Open alone, full size (desktop, tablet, phone; layout tree included)

Engagements

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.

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 rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.

We hand over everything — source files, a living brand system and a website your team can edit without calling us.

Read case studies

Desktop

Engagements

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.

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 rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.

We hand over everything — source files, a living brand system and a website your team can edit without calling us.

Read case studies

Phone, 390 px

Integrations

logos.bento-integrations · logos

Rule: Label, h3 and a line in 1–4; eight to twelve integration names as small centred tiles in a four-column grid across 5–12.
Slots: sectionLabel, title, body, logos[8..12]
Grid: intro 1-4 · tiles 5-12

Mono label, h3 and a muted line in 1–4. Eight to twelve integration names as small bordered surface tiles, centred label, in a four-column grid across 5–12 (three columns on phones).

Open alone, full size (desktop, tablet, phone; layout tree included)

Trusted by

Clients

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.

Corvid Robotics

Fieldstack

Tidewater Labs

Arklow Valves

Mosswood Bio

Kestrel Freight

Corvid Robotics

Fieldstack

Desktop

Trusted by

Clients

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.

Corvid Robotics

Fieldstack

Tidewater Labs

Arklow Valves

Mosswood Bio

Kestrel Freight

Corvid Robotics

Fieldstack

Phone, 390 px

Tiled FAQ

faq.bento-tiled · faq

Rule: Title and a support link on one row; four to eight answers as tiles, two per row, every answer visible.
Slots: title, cta, faqs[4..8]

h2 and an arrow link to support on one row. Four to eight question tiles, two per row: h4 question, small answer. All answers visible.

Open alone, full size (desktop, tablet, phone; layout tree included)

Working together

Start a project

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

Working together

Start a project

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

Terminal tile

cta.bento-terminal-tile · cta

Rule: An accent tile in 1–8 with headline, line and an inline email form, beside a surfaceAlt tile in 9–12 showing the mono install command, a caption and a secondary button.
Slots: headline, body, newsletter, meta, caption, cta
Grid: main 1-8 · command 9-12

An accent tile in 1–8 (padding 40 × 32 px): h2 at step 4 (onAccent), a line, an inline email form. A surfaceAlt tile in 9–12: the install command in mono (`npm i @acme/cli`) with a copy button styled as the secondary button, and a small caption.

Open alone, full size (desktop, tablet, phone; layout tree included)

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.

you@example.com

Booking projects from June 2026

Corvid Robotics — identity

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.

you@example.com

Booking projects from June 2026

Corvid Robotics — identity

Start a project

Phone, 390 px

Changelog

blog.tech-changelog · blog

Rule: Title tile pinned in 1–4; four to eight releases as a ruled list across 5–12, each on an 8-column sub-grid: mono version chip in 1–2, title and a line in 3–8.
Slots: title, cta, posts[4..8]
Grid: title 1-4 · list 5-12

A title tile in 1–4 with an arrow link to the full changelog. Releases as a ruled list across 5–12, each an 8-column sub-grid: a mono version chip on surfaceAlt in 1–2, then title (h4) and a one-line summary in 3–8.

Open alone, full size (desktop, tablet, phone; layout tree included)

Field notes

Start a project

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

Field notes

Start a project

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

Support tiles

contact.bento-support-tiles · contact

Rule: A form tile in 1–6 over two rows; an email tile in 7–12 and two small tiles (phone 7–9, hours 10–12) under it.
Slots: title, body, contact, sectionLabel, email, phone, hours
Grid: form 1-6 · email 7-12 · phone 7-9 · hours 10-12

A form tile in 1–6 over two rows (h2, a line, name/email/message form). An email tile in 7–12 (mono label, the address as an h3), then a surfaceAlt phone tile in 7–9 and an hours tile in 10–12.

Open alone, full size (desktop, tablet, phone; layout tree included)

Start a conversation

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.

Name

Your name

you@example.com

Message

Tell us a little about your project…

Send message

Contact

hello@northfold.com

+351 21 340 5512

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

Desktop

Start a conversation

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.

Name

Your name

you@example.com

Message

Tell us a little about your project…

Send message

Contact

hello@northfold.com

+351 21 340 5512

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

Phone, 390 px

Crew tiles

team.bento-crew-tiles · team

Rule: Title and a hiring link on one row; four to eight people as tiles, four per row: rounded square portrait, name, mono role.
Slots: title, cta, team[4..8]

h2 and an arrow "We're hiring" link on one row. Four to eight people as tiles, four per row: rounded 1:1 portrait, name (600), mono role. Two per row on phones.

Open alone, full size (desktop, tablet, phone; layout tree included)

The studio

Start a project

Rita Carvalho

Founder, strategy

Owen Blake

Design director

Sana Qureshi

Lead developer

Mateus Lima

Copy and naming

Desktop

The studio

Start a project

Rita Carvalho

Founder, strategy

Owen Blake

Design director

Sana Qureshi

Lead developer

Mateus Lima

Copy and naming

Phone, 390 px

Footers (2)

Tiled sitemap

footer.bento-tiled-sitemap · footer

Rule: Three tiles: wordmark, tagline and newsletter form in 1–4; stacked links in 5–8; a mono status line and the legal line in 9–12.
Slots: siteName, tagline, newsletter, pages, meta, legal
Grid: brand 1-4 · links 5-8 · status 9-12

Three tiles in one row: wordmark, a short tagline and an inline newsletter form in 1–4; stacked links in 5–8; a mono status line in the link colour ("● All systems normal") and the legal line in 9–12.

Open alone, full size (desktop, tablet, phone; layout tree included)

Desktop

Phone, 390 px

Hero library heroes that suit Bento Tech

Product bentohero.product-bento · productThe hero is a bento of five tiles: a headline tile in 1–7 (rows 1–2), a tall product tile in 8–12 (rows 1–3), two stat tiles in 1–4 and an accent CTA tile in 5–7 on row 3.Tilted app screenshothero.product-screenshot-tilt · productA two-zone intro (eyebrow + headline in 1–7, subhead + CTA in 9–12, bottom-aligned) over a large app screenshot in 3–12 that tilts back in perspective and bleeds past the right edge; a logo row closes the hero.Product with flanking specshero.product-floating-specs · productA square product shot in 4–9 is flanked by spec callouts: 2–3 feature labels in 1–3 and 2–3 numbers in 10–12, each with a top rule; the headline runs 1–8 underneath, price and CTA in 10–12.Interactive terminalhero.interactive-terminal · interactiveCopy in 1–5 (mono eyebrow, headline, subhead, CTA, install line); a tall terminal window in 6–12 on surfaceAlt: a ruled title bar with the path, 4–7 mono prompt/output rows that type themselves, and a block cursor in the accent.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.Split, media righthero.split-media-right · splitCopy in columns 1–6, vertically centred; the image fills columns 7–12 at the full hero height. A hairline and a muted meta line close the copy column.Hover tile gridhero.interactive-grid-hover · interactiveIntro in 1–5 (headline top, subhead + CTA bottom); a 3-column grid of 6–9 bordered tiles (number + label) fills 6–12 and inverts tile by tile under the cursor.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.Form firsthero.form-first · collageThe signup form is the hero's action: headline, subhead and an inline email form with a reassurance line in 1–6; a left-ruled column in 8–12 lists 3–4 numbered things you get.

Signature looks that suit it

WebGL hero scene3d · about 150 KB JS R3F floating object3d · about 210 KB JS Shader gradient backgroundshader · about 6 KB JS Generative grid patterngenerative · about 1 KB JS Magnetic buttonscursor · about 28 KB JS Text scramblekinetic-type · about 31 KB JS Pinned scroll storyscroll · about 45 KB JS