The website as a friendly operating system: a menu bar, labelled desktop icons on a warm sage wallpaper, content inside app windows with title bars, tabbed panels on a bright strip and raised bevel buttons.
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 Desktop OS 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.
Treat the page background (`bg`) as the desktop wallpaper: a flat warm sage (or the variant's desktop colour). Icons, section heads and a mascot may sit straight on it; everything else sits in windows.
Build every window the same way: `surface` fill, 1 px `border` rule, 8 px radius (`radius` token), no padding on the frame itself, then a title bar row (padding 8 × 16 px, 1 px rule under it) with the window title in the mono face on the left (`heading` colour) and a muted mono meta on the right, then the body padded 32–40 px.
Draw window controls on the right of every title bar: three 12 px squares or circles in `border` colour (minimise, maximise, close; a `×` glyph on the last), and give media windows (`frame: window`) the same bar.
Give windows and raised panels the bevel: a solid bottom edge 3–4 px deep in a darker shade of the panel's border (`box-shadow: 0 4px 0 0 <border-dark>`), no blur. Nested cards inside a window keep the rule and the edge but no second title bar.
Make buttons raised keys: primary = `accent` fill (amber) with `onAccent` text, secondary = `surface` fill with `heading` text and a 1 px rule; both 6–8 px radius with a 4 px darker bottom edge (`0 4px 0 0` in the fill darkened ~25 %). On hover move the button down 2 px and halve the edge; on active remove it. 140 ms.
Set the menu bar as one slim `surface` strip (40–48 px tall, 1 px rule, radius 8) across the grid: boxed logo, plain text menu links, a mono clock-style meta and a small primary key on the right.
Show desktop icons as a vertical column in grid column 1 of the hero (and as a 3 × 2 field in the icon-wallpaper hero): a 56–64 px pixel-art glyph over a short centred label (step −1, weight 600). Hide the column below 640 px.
Use one tabbed panel per page: a strip of tabs on an `accent2` frame (8 px padding round the pane), the active tab first as a raised `surface` chip with `heading` text, the others as plain text in `onAccent2`, then a `surface` pane inside. Tabs are real tabs (`role="tablist"`, arrow-key navigation).
Mark the two or three key phrases of a hero or section paragraph with a highlighter: a `color-mix(in srgb, var(--accent) 35%, transparent)` band behind the lower 60 % of the words (`background: linear-gradient(transparent 40%, <mark> 40%)`), never more than one mark per sentence.
Write dense, docs-like content: numbered checklists with mono `01` indices in `link`, ruled tables, changelog rows with mono date chips on `surfaceAlt`, mono paths in title bars (`~/home/readme.md`), and a short status bar under big windows (three mono readouts).
Headlines inside a hero window at step 6 (weight 700, tight, max 18–20 ch), a hero headline straight on the wallpaper at step 7; section titles at step 5; numbers at step 5–6 in weight 700. Body copy is generous (lead step 1, body 16–17 px, line height 1.55). Confident, not shouting: the window is the hero, not the type.
Keep the motion OS-like and quick: windows open by scaling from 0.98 with a 140 ms fade; button presses translate 2 px. Nothing loops. Respect `prefers-reduced-motion` by dropping both.
At 375 px: the icon column and title-bar metas hide, windows go full width with 20 px body padding, the tab strip scrolls sideways, button rows wrap, and every window keeps its title bar.
Don't
No floating cards on a soft gradient, no glassmorphism, no blurred drop shadows: depth is only the 1 px rule and the solid bottom edge.
No three equal feature cards in a row; features are a tabbed panel, a file-explorer list or a docs checklist.
No centred hero over the wallpaper; the hero message is flush left inside a window.
No window without a title bar, and no title bar without its mono title.
No stock photos of people; imagery is product screenshots in windows, pixel-art icons and one cheeky pixel or cartoon mascot.
No second bright colour beyond the amber key and the tab-strip `accent2`; status meters use the accent.
No thin weights (under 400), no all-caps paragraphs, no serif or display faces (the classic variant's pixel headline face is the one exception).
Don't copy any real OS or product brand: no real logos, wallpapers, mascots or system icons.
Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.
Strategy and design for companies that make things
Introducing
01
Positioning
02
Identity systems
03
Websites
Start a projectRead case studies
140+
launches shipped
12
years independent
9 of 10
clients return
Desktop, 1440 px
Corvid Robotics — identity
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.
Strategy and design for companies that make things
Introducing
01
Positioning
02
Identity systems
03
Websites
Start a projectRead case studies
140+
launches shipped
12
years independent
9 of 10
clients return
Phone, 390 px
Rule
The hero is a desktop: a column of labelled pixel icons in column 1 and one big app window across 2–12 with a title bar, the message, a setup checklist card and a status bar.
Icons sit straight on the wallpaper (bg), never in a panel. The window is the only surface; the setup card inside it is a nested panel with the bevel edge.
The default hero. Grid column 1 holds five or six desktop icons stacked straight on the wallpaper (pixel glyph 1:1 over a centred small label, 24 px apart). Columns 2–12 hold one app window: title bar (mono window title left, mono meta right), then a body padded 40 × 32 px split 1–7 / 8–12. Left: mono eyebrow in `link`, the headline at step 6 (700, tight, ≤20 ch), the lead (≤52 ch) and a muted line. Right: a nested setup card (surface panel with the bevel edge, 24 px padding) with a mono label in `link`, a three-row checklist (mono `01` index in `link` + the item at weight 600) and a primary + secondary key. Under the body a status bar row (1 px rule above) with three mono readouts (number in `link`, muted label). Phone: icons hidden, window full width, columns stack.
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
Introducing
Positioning
Identity systems
Websites
Northfold — Home
Brands built from the product out
Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.
01
Discovery sprint
02
Positioning workshop
03
Identity design
Desktop, 1440 px
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
Introducing
Positioning
Identity systems
Websites
Northfold — Home
Brands built from the product out
Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.
01
Discovery sprint
02
Positioning workshop
03
Identity design
Phone, 390 px
Rule
Headline and subhead on the wallpaper, then a full-width app panel framed in accent2: a strip of tabs on the colour and a surface pane with a windowed screenshot beside a checklist.
The headline (step 7, ≤16 ch) with a mono eyebrow on 1–7 bottom-aligned with the lead and two keys on 8–12, straight on the wallpaper. Under them, across the grid, the tabbed panel: an `accent2` frame (8 px padding) with the raised active tab and three more tabs on the strip, and a surface pane (32 px padding) holding a 16:9 screenshot in a window frame on 1–7 and, on 8–12, an h2 at step 4, a paragraph and a ruled three-row checklist.
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
Hours
Studio open Mon–Thu, 9:30–18:00
Where
Rua da Boavista 72, 1200-066 Lisboa
Contact
+351 21 340 5512
Northfold — Home
Introducing
Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.
140+
launches shipped
12
years independent
Our process
Desktop, 1440 px
Corvid Robotics — identity
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
Hours
Studio open Mon–Thu, 9:30–18:00
Where
Rua da Boavista 72, 1200-066 Lisboa
Contact
+351 21 340 5512
Northfold — Home
Introducing
Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.
140+
launches shipped
12
years independent
Our process
Phone, 390 px
Rule
Cascaded windows: the message window on 1–7 over two rows (with a status bar) sits on top of a windowed illustration on 6–12, with a small dialog window under the illustration on 8–12.
The message window overlaps the illustration window by two columns, like cascaded app windows; copy always paints above imagery.
Cascaded windows. The message window on 1–7 spans both rows and stretches to their height (title bar at the top; eyebrow, headline at step 6, lead, two keys; a status bar of three mono key / value readouts at the bottom) and paints over the left edge of a 16:9 illustration window on 6–12 in row 1, like an app opened on top of another. A small dialog window on 8–12 in row 2 (title bar with a mono title, a short line, two figures in a 2-up grid, a small secondary key) completes the stack. Copy always paints above imagery. Phone: message, illustration, dialog, in that order.
A readme window on 1–7 (title bar with a file name, then the headline at step 6, the lead, a three-row ruled fact list with mono keys in `link`, two keys) and on 8–12 a 3 × 2 field of desktop icons (pixel glyph + label) straight on the wallpaper, vertically centred against the window. Keep the icons three per row on phones.
A slim OS menu bar across the page: boxed logo and plain menu links left, a mono clock-style meta and a small bevel primary button right.
Slots
siteName, pages, hours, cta
One slim surface strip (8 × 16 px padding, radius 8, 1 px rule, bevel edge): boxed logo and plain menu links on the left, a mono clock-style meta such as opening hours (hidden on phones) and a small primary key on the right.
A taskbar: a bevel primary start button and wordmark left, pill links like open-window tabs in the middle, a mono tray meta right, all on one surfaceAlt bar.
Slots
cta, siteName, pages, hours
A taskbar on `surfaceAlt`: a small primary "start" key and the wordmark on the left, pill links in the middle styled as open-window tabs (current page as the raised one), a mono tray meta (hours) on the right. Links and the tray hide on phones.
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.
What you get
Positioning
Identity systems
Websites
Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.
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.
Start a project
Northfold — Home
Desktop, 1440 px
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.
What you get
Positioning
Identity systems
Websites
Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.
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.
Start a project
Northfold — Home
Phone, 390 px
Rule
Section head on the wallpaper, then one tabbed panel framed in accent2: four tabs on the colour strip over a surface pane with a ruled feature list beside a windowed screenshot.
Section head on the wallpaper: h2 at step 5 (≤24 ch) on the left, a muted paragraph bottom-aligned on the right. Then the tabbed panel: `accent2` frame, the raised active tab (the section's label) and three more tabs on the strip, and a surface pane (32 px padding) with, on 1–5, an h3 statement, a ruled list of three or four items (title at 600, muted small line) and a primary key; on 6–12 a 16:9 screenshot in a window frame.
Two weeks of interviews, audits and competitor teardown.
2 weeks
Positioning workshop
A day with your leadership to agree on one story.
1 day
Identity design
Logo, type, colour, motion and a working toolkit.
8 weeks
Website
Strategy, copy, design and build in Webflow or Next.js.
10 weeks
Launch support
Training, templates and a month of on-call design.
4 weeks
Retainer
A senior designer embedded two days a week.
Ongoing
Studio open Mon–Thu, 9:30–18:00
Apr 3, 2026
Desktop, 1440 px
Corvid Robotics — identity
Services
Start a project
Discovery sprint
Two weeks of interviews, audits and competitor teardown.
Positioning workshop
A day with your leadership to agree on one story.
Identity design
Logo, type, colour, motion and a working toolkit.
Website
Strategy, copy, design and build in Webflow or Next.js.
Launch support
Training, templates and a month of on-call design.
Retainer
A senior designer embedded two days a week.
Studio open Mon–Thu, 9:30–18:00
Apr 3, 2026
Phone, 390 px
Rule
A file-explorer window: title bar with a mono path, a toolbar row with the title and a button, a sidebar of places on 1–3 and the files as ruled rows (icon, name + line, mono meta) on 4–12, then a status bar.
Slots
caption, index, title, cta, sectionLabel, pages, items[5..7], hours, date
Grid
sidebar 1-3 · files 4-12
One file-explorer window: title bar with a mono path, a toolbar row (h2 at step 3 and a small secondary key, 1 px rule under), then a sidebar of places on 1–3 (muted mono label, plain links in a column; hidden on phones) and the files on 4–12 as ruled rows: a 40 px `accent2` square file icon, the name at 600 over a muted line, and a mono meta on the right. A status bar (mono hours and a date) closes the window.
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.
Since 2014
140+
launches shipped
2025
12
years independent
Audited
9 of 10
clients return
Last 12 months
31%
average lift in demo requests
Desktop, 1440 px
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.
Since 2014
140+
launches shipped
2025
12
years independent
Audited
9 of 10
clients return
Last 12 months
31%
average lift in demo requests
Phone, 390 px
Rule
A system-monitor window: title, line and four raised readout tiles (mono label, big number, an 8 px accent meter bar, caption) in a 4-up grid.
Slots
sectionLabel, date, title, body, stats[4..4]
A system-monitor window: title bar with a mono title, then the h2 at step 5 (≤22 ch) with a muted line bottom-aligned on the right, and four raised readout tiles (surfaceAlt, bevel edge) in a 4-up grid (2-up on phones): mono label, the number at step 6 (700, tight), an 8 px accent meter bar, a small caption.
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.
About
Booking projects from June 2026
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.
Our team is eleven people: strategists, writers, designers and two engineers who ship what the others draw.
Desktop, 1440 px
Corvid Robotics — identity
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.
About
Booking projects from June 2026
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.
Our team is eleven people: strategists, writers, designers and two engineers who ship what the others draw.
Phone, 390 px
Rule
Docs as a document window: a mono contents list on 1–3, and on 4–12 a window with the title, lead, body, a left-ruled note callout, a numbered checklist and a second paragraph.
Docs as a document. A mono "contents" label and numbered links on 1–3 (hidden on phones), and on 4–12 a window (title bar with a file path) holding the h2 at step 5, a lead, a paragraph (≤70 ch), a note callout (surfaceAlt, 1 px left rule, mono label in `link`, one paragraph), a numbered checklist (mono index, bold title, muted line) and a closing paragraph. Use the highlighter on two key phrases.
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 — identity
hello@northfold.com
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
The first agency that asked to talk to our engineers before our marketers.
Clara Mendes
COO, Tidewater Labs
Desktop, 1440 px
Kind words
From our 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 — identity
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
The first agency that asked to talk to our engineers before our marketers.
Clara Mendes
COO, Tidewater Labs
Phone, 390 px
Rule
Intro on 1–4; on 5–12 a messenger window where each quote is a chat bubble (surfaceAlt panel) beside a round accent2 avatar dot, name and mono role under the words.
Intro on 1–4 (mono label, h2 at step 5, muted paragraph). On 5–12 a messenger window: three chat rows, each a 40 px round `accent2` avatar dot beside a surfaceAlt bubble (the quote at body size, then the name at 700 and a mono role on one baseline).
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 — identity
06
Sprint
For starting out
€18k
Two-week positioning sprint with a written brand platform.
Choose Sprint
Rebrand
Most popular
€85k
Positioning, identity and a launch toolkit over 12 weeks.
Most popular — choose
Partner
For larger teams
€14k/mo
A standing team for product launches and campaigns.
Choose Partner
Booking projects from June 2026
Read case studies
Desktop, 1440 px
Pricing
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.
Corvid Robotics — identity
Sprint
For starting out
€18k
Two-week positioning sprint with a written brand platform.
Choose Sprint
Rebrand
Most popular
€85k
Positioning, identity and a launch toolkit over 12 weeks.
Most popular — choose
Partner
For larger teams
€14k/mo
A standing team for product launches and campaigns.
Choose Partner
Booking projects from June 2026
Read case studies
Phone, 390 px
Rule
Section head, then a spreadsheet-like window: each plan a ruled row (name + mono tag in 1–3, price in 4–5, what is included in 6–9, a bevel button in 10–12) and a footer row with a note and a primary button.
Section head (mono label, h2 at step 5; muted line right). Then a spreadsheet window: each plan a ruled row on the 12-column grid — name (h3, 700) over a mono tag in `link` on 1–3, the price at step 5 on 4–5, what is included (muted) on 6–9, a secondary key on 10–12 — and a footer row with a small muted note and a small primary key. Never three equal plan cards.
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
Corvid Robotics — identity
06
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, 1440 px
Journal
Field notes
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
Corvid Robotics — identity
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
Rule
Intro and a secondary button on 1–4; on 5–12 a changelog window listing releases as ruled rows: a mono date chip on surfaceAlt, then the title and a muted line.
Intro on 1–4 (mono label, h2 at step 5, muted paragraph, secondary key). On 5–12 a changelog window: four to six ruled rows, each a mono date chip on surfaceAlt, then the title (h4, 700) over a muted line (≤70 ch).
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
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, 1440 px
FAQ
Working together
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
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
Rule
A help window: title, line and a secondary button on 1–4; questions with their answers in two top-ruled columns on 5–12. All answers visible.
Slots
sectionLabel, email, title, body, cta, faqs[4..6]
Grid
intro 1-4 · faqs 5-12
One help window: title bar, then the h2 at step 5, a muted paragraph and a secondary key on 1–4, and the questions on 5–12 in two top-ruled columns (one on phones): question as h4 at 700, answer as a muted small paragraph. All answers visible.
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.
Booking projects from June 2026
Start a projectRead case studies
Desktop, 1440 px
Corvid Robotics — identity
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.
Booking projects from June 2026
Start a projectRead case studies
Phone, 390 px
Rule
An installer dialog window on 1–8 (headline, line, an 8 px accent progress bar with a mono status, two bevel buttons) beside a pixel-art mascot on 9–12.
An installer dialog window on 1–8 (title bar; h2 at step 6, ≤22 ch; a lead; an 8 px accent progress bar; a mono status line; primary and secondary keys) beside a 1:1 pixel-art mascot on 9–12, straight on the wallpaper.
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
Desktop, 1440 px
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
Phone, 390 px
Rule
Intro on 1–4; on 5–12 the client names as raised surface chips (a small accent2 square icon and the name) in a four-column grid, two on phones.
Slots
sectionLabel, title, body, clients[8..12]
Grid
intro 1-4 · chips 5-12
Intro on 1–4 (mono label, h2 at step 4, small muted line). On 5–12 eight to twelve client names as raised surface chips (40 px `accent2` square icon + name at 600) in a four-column grid, two on phones. Names only, never real logos.
Section head with a secondary button; people as user-account cards four per row: a pixel-art avatar, a top-ruled name and mono role.
Slots
sectionLabel, title, cta, team[4..8]
Section head (mono label, h2 at step 5) with a secondary key on the right. People as user-account cards four per row (two on phones): a raised surface card with a 1:1 pixel-art avatar, then a top-ruled footer with the name at 700 and a mono role.
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
Email
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, 1440 px
Corvid Robotics — identity
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
Email
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
Rule
A new-message window on 1–8 with the title, a line and the name / email / message form; on 9–12 two raised info panels (email, phone + hours) above a pixel mascot.
A new-message window on 1–8 (title bar, h2 at step 5, muted line, name / email / message form). On 9–12 two raised surface panels — a mono label over the email at h4, then the phone at 600 over the hours — above a 4:3 pixel mascot (hidden on phones).
Screens as app windows: a large windowed screenshot on 1–7 over two rows, the label, title and caption on 8–12 above a second window, then two 16:9 windows side by side.
big 1-7 · copy 8-12 · second 8-12 · third 1-6 · fourth 7-12
Screens as app windows: a 4:3 screenshot window on 1–7 over two rows; on 8–12 a mono label, an h2 at step 5 and a muted caption above a 16:9 window; then two 16:9 windows side by side on 1–6 and 7–12. Every image has the window title bar.
A start-menu panel on 1–5 (wordmark, tagline, inline newsletter form), the sitemap as a plain column on 6–8 and a mono status line over the legal line on 9–12.
A start-menu panel on 1–5 (surface, bevel edge: wordmark, muted tagline, inline newsletter form), a mono label over plain sitemap links on 6–8, and a mono status line in `link` over the muted legal line on 9–12.
The page ends on a taskbar: a bevel primary button and wordmark left, plain links in the middle, the mono legal line right, on one surface bar.
Slots
cta, siteName, pages, legal
The page ends on a taskbar: one surface strip with a small primary key and the wordmark left, plain links in the middle (hidden on phones) and the mono legal line right.