foxdirectories

Visual identity

Brand

One mark, one tone per directory, two typefaces. What is set out here applies to every directory.

The mark

The fox head is an edge network: the lines are drawn, not the faces. Stroke weight therefore no longer sits in the geometry and can be set per size.

Paper white
Deep ink

The mark has no colour of its own. It follows the text colour and so takes on the tone of whichever page it sits on.

Two versions

Detail version

180 edges · from 56 px

Badge

solid · down to 16 px

At actual size

96 px
64 px
48 px
32 px
24 px
20 px

In each pair: detail version left, badge right. Below roughly 48 px the full network stops working — thin it vanishes, thick it clogs. Below that, the small mark applies.

Colours

Colour is information, not decoration. The umbrella brand carries Clay; each directory carries exactly one tone — not five.

Umbrella brand

Clay

#B8543A

The directories

Accountants #3F5E82
Vets #4F7A6B
Care #8A4A5C
Lawyers #4A5568
Dentists #4A7A88
Daycare #C0623A
Physiotherapy #6A5A8C
Electrical inspection #6B7546
Landscaping #2D5636
Private schools #2E4A7A
Aesthetic medicine #7A4A7A
Driving schools #1D5AA6
Electricians #A8322D
Garages #1F5A66
Real estate #7A5A45
Event venues #8A6A2E

Neutrals

Ground #FAF9F5
Surface #F2F0EA
Line #E5E1D8
Muted text #8A837A
Text #5C564E
Ink #1A1815

Type

Two typefaces, plus one for technical data.

Fuchs

Source Serif 4

Headings

Chosen against serifs with high stroke contrast: at 52 px the line has to carry, not shimmer.

Fuchs

Inter

Body text and interface

Everything that is read or operated.

Fuchs

IBM Plex Mono

Technical data

Figures, hex values, identifiers — wherever digits line up in columns.

The parent company

fox directories belongs to o-bi. The o-bi mark follows the same principle as the one set out here: a construction, not a drawing.

A 5×5 grid of 65-unit squares. Twenty cells filled, five open — the open ones form the glyph. The colour runs in three values as vertical bands, dark on the left to light on the right.

One tone per area

#505152
#466983
#447D54
#F08A2B
#754E94

Principles

Warm paper white, not pure white

The ground is #FAF9F5. Pure white next to warm tones reads as dirty.

Hairlines, not shadows

A one-pixel line separates. A shadow fakes a depth that is not there.

One tone per directory

No gradient, no palette — one desaturated tone from a shared family.

Serif only at display size

The serif carries headings. Body text stays Inter.