foxdirectories

Visual identity

Brand

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

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

Small mark

24 edges · up to 48 px

At actual size

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

In each pair: detail version left, small mark 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 six directories

Accountants #3F5E82
Vets #4F7A6B
Care #8A4A5C
Lawyers #4A5568
Dentists #4A7A88
Daycare #C0623A

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.

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.