Visual guidelines. Everything ODD looks like, written down.

ODD is the masterbrand. All Things ODD is the house it lives in.

Source of truth

The website’s design tokens (src/styles/). If this book and the site ever disagree, the site is right and the book is out of date.

For designers

Chapters 02–16, and the files in Downloads.

For code and AI

brand/BRAND-GUIDE.md and brand/tokens/brand-tokens.json in the repository — the same rules, written to be followed.

For decks

Chapter 17: an editable PowerPoint template and an example.

Version

1.0 · September 2026

ODD does not make the culture. It builds what is around it.

Frame

Ink ground

Frame

Hairlines

Frame

Numbered cells

Frame

Five sizes

Frame

Small labels

Frame

Square corners

Frame

Gabarito

Frame

Paper

Tension, held in one system

The working test. When a layout feels flat, add life inside the frame: a real photograph, a statement, heat. When it feels chaotic, strengthen the frame: align it to the grid, rule it, number it. Never fix either one with decoration.

Seven rules a designer can actually use.

1. 01

   Build around, do not decorate.

   What it means

   Every structure holds something real. A grid holds photographs, a cell holds a number or a name, a rule separates two things that are different.

   How it shows

   Hairline grids with numbered cells. One photograph in a grid of labelled cells. A centred section title over a hairline.

   Avoid

   Ornament, borders around nothing, pattern backgrounds, a grid drawn for its own sake.

2. 02

   Evidence, not illustration.

   What it means

   Show that it happened. Real photographs, real names, real counts — the archive is the brand’s best asset.

   How it shows

   The archive mosaic. A credits roll of every name. Figures with labels. Captions that name the venue.

   Avoid

   Stock photography, generated people, icons standing in for photographs, numbers without a source, “world-class”.

3. 03

   Two lights on one ground.

   What it means

   Ink is the room with the lights down; Paper is the house lights. Ember and Signal are light, not paint.

   How it shows

   An accent only as label text, a keyline, a wash over a photograph, or the heat something warms to when touched.

   Avoid

   Accent-coloured sections, gradients, a third accent, Ember and Signal side by side for decoration.

4. 04

   Say it loud, explain it quietly.

   What it means

   Forta states, Gabarito explains. One statement per surface, written as a sentence.

   How it shows

   A short Forta sentence ending in a full stop. The premise in quiet grey, the point in full. A small tracked label above, Body below.

   Avoid

   Forta paragraphs, typed capitals, a sixth type size, two statements competing.

5. 05

   Round is for what you touch.

   What it means

   The pill comes from the mark’s three lobes. Things you press or that label something small are round; everything that holds content is square.

   How it shows

   Buttons, tags and badges are pills. Photographs, cards, cells, tables and bands are square. Floating panels take 10px.

   Avoid

   Rounded photographs or cards, circles as decoration, square buttons.

6. 06

   Alive, in small doses.

   What it means

   A living layer moves over the structure: steam on the mark, film grain, drifting rails, warping type, the hand-drawn cursor, heat.

   How it shows

   One living thing per view, always with a still version for reduced motion.

   Avoid

   Animation that hides content, scroll-jacking, parallax text, effects on everything.

7. 07

   Creative first, business invited.

   What it means

   ODD is a creative organisation that business is invited into — never the reverse.

   How it shows

   The creative column first (left, or above), business second. Ember before Signal. ODDfest before ODDference.

   Avoid

   Corporate-first ordering; business language setting the tone of a creative page.

Three lobes that read ODD. The only drawn thing in the whole system.

Clear space and minimum size

Mark, minimum 12px tall (4mm in print)

Lockup, minimum 16px tall (6mm in print)

The lockup, constructed

Suffix cap height

0.484 × the mark’s height

Baseline

0.7398 × the mark’s height, from the top

Mark to suffix

0.2709 × the mark’s height, measured origin to origin — the sidebearings do the optical work

Tracking

0.09em, with Forta’s own kerning left on

Generated by

python3 brand/logos/build.py — add a name to LOCKUPS and it exists

Backgrounds

Misuse

FEST

ODD Fest · Oddfest · ODDFEST

The living mark, and the small mark

One mark, one suffix. No sub-brand ever gets a logo of its own.

All Things ODD — the umbrella. Operated by New Nordic Way rf, Helsinki.

Helsinki’s creative week of independently made events.

Ink

A business conference powered by creative expertise.

Ink

A year-round workspace, studios and event space in Vallila.

Paper — the whole page inverts

The recording studio inside ODDspace.

Project work with organisations, under Work with ODD.

Generated, not yet used — proof the system takes the next name without a redesign.

What never changes, what a product may choose

Writing the names

Correct

ODD · ODDfest · ODDference · ODDspace · ODDstudio · ODDagency · Work with ODD · All Things ODD

Never

Oddfest · ODD Fest · ODDFest · odd fest · “the ODD Festival”. One word, ODD in capitals, the suffix lowercase.

In Forta

The face is unicase, so it capitalises for you. Write sentence case; never type in capitals.

All Things ODD

The site and publisher name — og:site_name, this book, the back page of a deck. Not a replacement for ODD in a sentence.

New name

ODD + one lowercase word, ideally under eight letters, that says what the thing is.

Adding the next one

1. Name it: ODD + one lowercase word.
2. Add it to LOCKUPS in brand/logos/build.py and run it. The lockup exists, in both colours, correct by construction.
3. Choose the ground: Ink unless the thing is daylight and physical, like ODDspace.
4. Choose at most one accent — or none.
5. Give it rail words: the product, the city, the year.
6. Find its photographs. If it has none yet, borrow the archive; never buy stock.
7. Design nothing else. Everything it needs already exists.

Two lights on one ground. Measured from 1,478 photographs, not chosen from a swatch book.

The two lights, and the quiet ones

How much of a surface each one gets

Roles

Pairings that are safe, and pairings that are not

Ratios are measured on the composited colour against its real background, not on the token’s face value — a translucent step reads differently on Ink than on a raised card. Compute it before shipping a new one.

Where colour does not go

• No coloured page or section backgrounds. Ground is Ink or Paper.
• No gradient except the Ink scrim that makes a photograph readable.
• No colour-coded categories, tags or charts by hue alone.
• No Ember on Paper as text, no Signal under Paper text — use the reading value of each.
• Ultraviolet is a wash on ODDfest, at most a 16% mix. It never becomes a fill.
• No heat as text on a raised card — 3.75:1 on Backstage. There the text goes to full figure and the underline or border carries the heat.

Twelve jobs. Five sizes.

The ladder

Twelve jobs, on five sizes

Premise, then point

Good and bad

Big words, and small screens

• Headlines are sentences and end with a full stop. Questions are welcome; fragments stacked into a slogan are not.
• Three lines is the ceiling for Hero, four for Display. Cut words rather than shrink the size.
• Break lines at a clause, never after a preposition or article. text-wrap: balance does the rest and never changes the line count.
• Never hyphenate Forta, never track it looser to fill a line, never condense it.
• On a phone, Hero’s floor (3.25rem) is wider than a column for a long single word — a component with one long word steps down a role rather than inventing a size.
• Running prose holds to 52ch. A centred intro may sit narrower; nothing meant to be read sits wider.

Two widths, twelve columns. One hairline is the only line on the page.

Contained

--width-contained · 73.75rem (1180px) · gutter 1.75rem. Reading pages, forms, most sections.

Wide

--width-wide · 80rem (1280px) · gutter clamp(2.5rem, 8vw, 7.5rem). Navigation, footer, grids of cards, galleries.

Full bleed

.bleed — a contained element escapes to the viewport: heroes, photo breaks, the filmstrip, the four-card band.

Columns

12 on desktop, 6 on tablet, 1 for reading and 2–4 for image mosaics on a phone.

Breakpoints

480 · 640 · 820 · 1024 · 1440. A component may add its own where its content breaks — with a comment saying why — but never to change a type size.

Rails

68px fixed vertical tickers at both edges of a product page, from 821px up.

One system, two registers

Alignment, and when to break it

• Everything aligns to the column grid. The hairline between cells is the grid made visible — 1px, the ground showing through.
• Photographs may leave the grid entirely (full bleed) but never sit at an arbitrary inset.
• Rails, tickers and the mosaic are allowed to run past the edge of the viewport: they are motion, not layout.
• Where two audiences are shown together, the columns mirror — creative flush right, business flush left, meeting in the middle.
• Do not rotate, tilt or overlap content blocks. The only rotation in the system is the vertical rail.

Dense enough to have energy. Every gap has exactly one owner.

Rhythm

Values at 390px, 1024px and 1440px. No component needs a mobile override.

What sits how far from what

Ownership

• Section to section is owned by the layout: each section pads half the gap, so two neighbours add up to exactly one and neither needs to know what is next to it.
• Inside a section, the parent owns the space between its children (.flow). Children carry no outer margin.
• A block that belongs to the one above it replaces the step with a tighter one — a replacement, never an addition.
• A negative margin that claws back someone else’s space is always a bug.
• A reusable component never carries outer block margin. Its caller places it.

Photographs are the evidence. Everything ODD shows actually happened.

Treatment

Ratios

16:9 film · 2:1 photo break · 4:3 cards · 1:1 mosaic cells · 4:5 and 3:4 portraits. Nothing else.

Grade

contrast(1.05) saturate(1.15) — a nudge, not a look. Add brightness(0.8–0.92) only where text sits on the image.

Crop

To the action: faces, hands, instruments, the crowd. Never letterbox; fill the cell and let the grid crop.

Corners

Square. Always.

Captions

Small, muted, under the image: what it was, where. ODDfest 2026 · Vanha Ylioppilastalo.

Credits

Name the photographer where the archive names them: Photo: Name. Editorial use is credited “ODDfest / photographer’s name”.

Other people’s logos

Monochrome in the figure colour, one height, never their brand colours.

Text on a photograph

ODDfest 2026 · Vanha Ylioppilastalo

ODDtheatre

Club, theatre and immersive space in one night, with more than ten collectives.

Not ODD

• Stock photography of any kind. Smiling teams at laptops, handshakes, “creative process” flat-lays.
• Generated or composited people, and generated “event” imagery.
• Renders or mock-ups presented as something that happened.
• Heavy filters, duotones, fake film burn, vignettes, drop shadows on photographs.
• Rounded corners, tilted frames, polaroid borders, collage overlays.
• Stage shots with an empty room, unless the emptiness is the subject.

Almost nothing is drawn. The devices are all made of type, rule and photograph.

5,000+Participants

500+Collaborators

100+Partners

ODDFESTHELSINKI2027

The whole vocabulary

Devices ODD does not have

No icon set (only the social glyphs and a chevron), no illustration, no patterns, no badges with coloured fills, no cards with rounded corners or shadows, no dividers with ornaments, no “brand shapes”. If a new device seems necessary, it needs a job that none of the thirteen above can do — and it goes in this table when it ships.

One button. Three variants, and that is the entire vocabulary.

The site has one more component family worth knowing: the band — a raised, square, full-width block with one keyline in heat, used once per page for the single biggest ask. Everything else (grids, lists, tables, FAQs, pricing) is the numbered cell or the hairline row again, at a different size.

Responsive, not animated. Everything that moves has a still version.

Behaviours

Hover

Text and rows warm to heat in 0.2s. Outline controls brighten their border. Nothing grows, nothing bounces.

Press

On touch, a Pill scales to 0.96 — the only place the system uses a transform on a control.

Magnetic

A primary CTA leans a few pixels towards the cursor. One per view, desktop only.

Cursor

The hand-drawn arrow's tip never lags. Its wood grain turns with distance travelled and stops when the hand stops; it leans with speed, presses on click, and warms with heat over anything you can act on. Text fields, disabled controls and embeds keep their native cursor.

Reveal

A block fades up 14px over 0.7s as it enters. Once, never on exit, never staggered beyond a grid’s own cards.

Navigation

The strike draws from the centre out. Panels fade and rise 12px with --ease-out-expo.

Image

Archive cells pan slowly and swap on a randomised loop; video fades in over its poster only once playback is confirmed.

Reduced motion

Everything above stops. The reveal never attaches, the grain holds still, video is not even downloaded, and the page is identical in content.

Never

• Scroll-jacking, pinned sections, horizontal scroll hijacks, parallax on text.
• Counters that animate a number the reader is trying to read.
• Entrances that depend on JavaScript to make content visible.
• Loops longer than a second on anything a visitor is reading.
• Motion in print, in a PDF, or baked into a deck.

Direct, warm, a little odd. If another festival could have written it, rewrite it.

Rules

Headlines

Sentences, ending in a full stop. Questions are welcome. Never a slogan made of fragments, never a pun on “odd” that has to be explained.

Section titles

Say what the section is, in the reader’s words: “What ODDfest is”, “How to join”, “Ways to take part.”

Descriptions

One idea a sentence. Concrete nouns. Say what a person actually does: work from ODDspace, bring an event, buy a ticket, send a brief.

CTAs

Verb first, no more than four words: Submit an event idea, Become a member, Start a conversation. Links that go somewhere take a trailing arrow.

Events

Name the venue, the date and who made it. Credit everyone by name, and alphabetically — nobody is a “special guest”.

Business

Same voice, different subject. Explain what a company gets in the same plain words: “Connect with people outside your usual circuit.” No case-study jargon, no ROI theatre.

Honesty

Say what is not decided: “before the dates are fixed”, “a pilot”, “not on sale yet”. Never publish a figure the site cannot stand behind.

Spelling

British English — organisation, centre, colour, programme. Finnish and Swedish names keep their own spelling and diacritics.

Same system. Different light, different room.

Helsinki’s creative week, bringing cultural and creative scenes together.

Helsinki · 2027

Where creative expertise meets business and society.

For business

A year-round home for creative work.

Vallila · Helsinki

The system leaves the screen. A poster, a post, an invitation, a wall.

One week. Many hosts.

Helsinki · June 2027allthingsodd.co

Creative work needs more than moments.

ODDspace · Vallila

You are invited. ODDference 2027.

Date

Place

Doors

To be announced

Helsinki

09:00

Teollisuuskatu 9D

AuditorioFloor 2

GalleriaFloor 1

ODDstudioFloor 1

When the thing is not announced yet

The ask

No form and no route yet? The ask is hello@oddfest.co, with a label that says what happens: “Ask us about ODDcity.” Never a button that goes nowhere, never “Coming soon”.

The photograph

If it has not happened, there is no photograph of it. Borrow a real archive photograph of something adjacent and credit it honestly, or leave the cells empty with their hairlines showing and say in the caption that they are empty on purpose.

The copy

Say what is undecided, plainly, in the same voice as everything else.

Rules that travel

Print type

Set Small first (9–11pt on A3–A2), then scale the whole ladder by the same ratios. Never enlarge one step alone.

Margins

A poster’s margin is the mark’s clear space, at poster scale: half the mark’s height, on every side.

Print colour

Ink and Paper are the only grounds. No grain in print — it is a screen texture.

Social

4:5 for feed, 9:16 for stories. Type never sits on the photograph unless a scrim is under it; the caption block carries it instead.

Physical

Signage is Forta at whatever size the room needs, with Gabarito for the practical half. One hairline per division.

Email and documents

Arial stands in for Gabarito where the font cannot be installed. Forta has no substitute: set the statement as an image or leave it out.

The proof that this is a system. Not a website that happens to look nice.

Template

21 archetypes — covers, statements, dividers, text and image, quotes, columns, figures, timeline, ecosystem, partners, people, programme, case study, two sides, closing, contact, and a blank frame. Speaker notes say when to use each.

Example

A 12-slide All Things ODD deck built only from real site content, to show the archetypes working together.

Rebuild

cd brand/deck/src && npm install && npm run build, then npm run preview for JPEG previews of every slide.

Fonts

Install brand/fonts/*.ttf before opening a deck, or PowerPoint will substitute Arial for Forta.

Making a new deck

Start from the template, delete what you do not need, and keep the archetypes intact. One statement a slide; a slide with two competing headlines is two slides.

One canonical file per thing.

In the repository

brand/BRAND-GUIDE.md

The instruction manual: how to build a new page, campaign, sub-brand or deck so it comes out ODD. Written for a person or an AI agent.

brand/AUDIT.md

What the audit found, what was standardised, and what was deliberately left alone.

brand/CHANGELOG.md

Every change this system made to the site, and why.

brand/logos/build.py

The lockup generator. The only correct way to make a new one.

Ten decisions that keep it ODD.

When a rule here and a live page disagree, the page wins and this line is a bug — but check the page against chapters 02 and 03 first. The system is allowed to change; it is not allowed to drift.

The book is documentation. The tokens are the system.

Using them

.card {
  background: var(--color-backstage);   /* raised surface  */
  border: 1px solid var(--color-paper-12); /* hairline     */
  padding: var(--space-6);
}
.card h3 {
  font: var(--text-heading);            /* one of five     */
  letter-spacing: var(--tracking-heading);
}
.card p {
  margin-block-start: var(--space-3);   /* title -> body   */
  color: var(--color-paper-60);
}
.card a:hover {
  color: var(--color-heat);             /* warms on touch  */
}

Every token