01 — themes

Five presets, one source of truth.

Every surface, text and accent value is driven by CSS custom properties on the root. Each preview below labels the exact token (Y-, K-, W-) it pulls from the palette ramps further down — pick one to retheme the entire page live.

02 — palette

Three dominants, four accents.

Each tile shows the HEX, RGB and CMYK values. Tones are tuned so the screen and press output sit visually next to each other — minimal drift between web and print.

Yellow

10 stops · base 500

Black

10 stops · K-only for press parity

White

10 stops · warm cream progression

Semantic accents

light / base / dark

03 — radius scale

Seven steps, from sharp to round.

Each step has a job. Click a tile to set it as the UI radius — buttons, cards, inputs and tagged surfaces in the mocks adopt it instantly. Pill and avatar shapes stay fixed to their semantic radii.

04 — typography

One sans, one mono, two weights.

A neutral sans for everything readable, a monospace for codes, specs and metadata. Regular (400) for prose, semibold (600) for emphasis — no other weights live in the system.

Display sans · 600 · 64 / 64 tracking −3%

Form holds the field.

Heading 01 sans · 600 · 40 / 44 tracking −2.5%

A brand book is a working document.

Heading 02 sans · 600 · 28 / 34 tracking −1.5%

It changes when the work changes.

Body sans · 400 · 16 / 26 tracking 0

The point of a brand book is not to freeze a system but to keep it honest. The palette, the radii, the type stack — they exist so that two people working on a Tuesday afternoon, in different rooms, on different files, can produce work that looks like it came from the same place.

Caption sans · 400 · 12 / 18 muted

Use captions for image credits, footnotes and ancillary metadata. Avoid for primary content.

Mono mono · 400 · 13 / 20 tracking 0

PMS 109 C · #FFD500 · C0 M16 Y100 K0 · R255 G213 B0

The system, applied digitally.

marketing surface · light

web mock · marketing surface1240 × auto · light

formandfield.studio/work

a brand studio · est. 2019

Identity systems that hold up on paper and on screen.

We design wordmarks, packaging and digital surfaces for studios who care about the gap between the swatch and the print.

Identity

Wordmarks, monograms, full systems. Built to flex across sizes and substrates without losing the centre.

12 projects · 2024

Packaging

Flat, structural, honest. We design what the shelf sees first and what the hand finds second.

07 projects · 2024

Digital

Component libraries, marketing surfaces, editorial templates. Live design systems, not static decks.

19 projects · 2024

Default Solid Featured In review Approved Pending Blocked

AT MR SL JD

AB CD EF GH

Design phase

92%

Press review

64%

QA passed

100%

Budget used

78%

The same system, on paper.

CMYK · matched to screen

Business card 85 × 55 mm · front + back · 4/0

Mara Olsen

Creative director

mara@formandfield.studio
+47 22 14 00 18
Storgata 12, Oslo

Identity, packaging, digital.

formandfield.studio

Letterhead A4 · 210 × 297 mm · 1/0

Form & Field

Storgata 12, 0155 Oslo
formandfield.studio

NO 922 014 188 MVA page 01 / 02

A4 poster 210 × 297 mm · full bleed · 4/0

open studio fri 14 jun · 18:00

Form and Field.

Storgata 12, Oslo nº 04

Packaging — box face 120 × 120 mm · matte uncoated · 4/0

Form & Field

Bright tin nº 04 · 200 g · made in Oslo

batch 24-04-118 best before 26.04

Sticker sheet die-cut · 6 placements · 4/0

Form & Field

nº 04

Identity · packaging · digital

Oslo