Brand guide

Radical Fanatics.
The visual rulebook.

One page that puts the entire brand on screen - logo, color, typography, signature details. Built for designers, partners and colleagues working with our visual identity. Every value here is pulled straight from our design tokens, so this page stays in sync with the live site automatically.

To the component library

02 - Color

Color palette

Four primary families (navy, orange, teal, cream) plus an ink scale for neutral text. Every stop is a design token. Prefer the semantic name (--color-action-primary) over the raw stop (--color-orange-500) - that way the whole system shifts together if we ever revisit the choice.

Navy #044a91 --color-navy-500
Orange #ff6e1d --color-orange-500
Teal #69c4c4 --color-teal-400
Cream #f4f4ed --color-cream-500

Navy

Primary brand: headings, links, navy surfaces
50 #f0f5fb
100 #d9e3f3
200 #b3c7e7
300 #6088c0
400 #2966a8
500 #044a91
600 #033b75
700 #033672
800 #022a59
900 #012552
950 #001a3a

Orange

Action: primary CTAs, eyebrows, accents on cream
50 #fff5ec
100 #fde4d4
200 #fcc4a3
300 #fa9d6b
400 #fa823f
500 #ff6e1d
600 #e15813
700 #b34108
800 #8a3309
900 #6e2a0c

Teal

Accent: brand shadow, tertiary buttons, badges
50 #eef9f9
100 #d4eded
200 #aedede
300 #87cece
400 #69c4c4
500 #4ea5a5
600 #3d8585
700 #316969
800 #2a5454
900 #244545

Cream

Page backgrounds: cream-500 is the default page bg
50 #fefefb
100 #fdfcf7
200 #faf8ef
300 #f7f5e6
400 #f4f4ed
500 #f4f4ed
600 #ebe9d8
700 #d8d6c5
800 #b8b5a0

Ink

Neutral text, for places where navy would dominate
50 #f6f6f5
100 #e8e8e6
200 #c8c8c4
300 #a0a098
400 #6b6b65
500 #2a2a26
600 #1a1a1a
700 #111111
900 #0a0a0a

03 - Typography

Typography

Two families. Helvetica Neue for everything that gets read (headings and body alike). IBM Plex Mono for labels, eyebrows, badges and code - anywhere we want a system-meta feel.

Sans

Aa Bb 123

Helvetica Neue

Roman 400 · Medium 500 · Bold 700 · self-hosted woff2

Mono

Aa Bb 123

IBM Plex Mono

Regular 400 · Bold 700 · open source · self-hosted woff2

Scale

Aa
--text-7xl 96px
Aa
--text-5xl 56px
Aa
--text-3xl 32px
Aa
--text-2xl 24px
Aa
--text-xl 20px
Aa
--text-lg 18px
Aa
--text-base 16px
Aa
--text-sm 14px
Aa
--text-xs 12px

04 - Signatures

Brand signatures

Visual tells that make a page feel like Fanatics, even with the logo removed.

Pill buttons with stroked outline

Every button sits on top of an offset stroke, our signature.

Brand shadow: 12px offset

Solid teal or orange shadow, no blur. Gives cards a tactile, slightly-off-the-page feel.

Teal shadow
Orange shadow

Orange chevron as bullet

Lists use an orange chevron-right instead of a dot. Direct, forward-pointing.

  • Odoo without detours
  • Standard where it works
  • People who stay until it runs

Mono eyebrow in orange

Section intros set in IBM Plex Mono, uppercase, with wide letter-spacing. Signals "this section belongs here".

Free Quickscan

Are you paying more for software than it’s worth to you?

Badges

Short status labels in mono - navy, orange, teal or outline.

Odoo Gold New Live Beta

Grid pattern on dark surfaces

Subtle 40px grid in 4% navy. Texture, not decoration - only used on cream or inverse navy.

Keep exploring

The full component library

Buttons in every variant and size, forms, cards, badges, inputs, video embeds - everything we ship on the site, on one page, ready to copy.

To /dev/components