Arbitr brand guidelines
The foundation of the Arbitr brand in one place: logo files, color palette, and typefaces, with the summary you need to use them consistently.
Full Asset Library
Everything beyond what's embedded above (source files, templates, and kits) lives in Google Drive. Each folder opens in a new tab.
Logo
Keep clear space around any mark at least equal to the height of the "A", and never stretch, recolor, or add effects to the files below.
Wordmark & Logo
Primary / Reversed / Monocolour. Never reset from live text.
Never reset the wordmark from live text. The outlines are the wordmark, the typeface alone is not (the lens replaces the counter of the "b" and isn't in the font).
Naming
Capital A, lowercase the rest. The name is never reset to another case.
The Lens Device
Two concentric rings, open aperture. Never a filled circle, never an eye.
Graphics System
Device / aperture crop / sweep / state. One geometry, one member per surface.
Focus Frame
Corner-bracket viewport, the rectangle counterpart to the Lens Device's circle.
- Spell the name "Arbitr": capital A, lowercase the rest.
- Keep clear space around any mark at least equal to the height of the "A".
- Use the reversed wordmark on Midnight or other dark grounds, primary everywhere else.
- Use the monocolour wordmark when only a single ink is available (print, engraving).
- Use the reversed lens only on Arbitr Indigo fills, not any other dark background.
- Stretch, recolor, or add effects (shadows, outlines, gradients) to any mark.
- Substitute the graphic sweep for the logo. It's a supporting motif only.
- Turn the lens into a filled circle or add a pupil. It's always two open concentric rings.
- Mix the primary wordmark's cyan accent into the monocolour version.
Color
Indigo is the one primary brand color: links, primary buttons, active states. Every other color below has a fixed job; none of them are interchangeable with it.
Primary: links, buttons, active states
Primary text, dark surfaces
Secondary text
Default borders/dividers
Page background
Card surfaces
Fills only. They never carry their own text color. Pair with Midnight text on top, and use a functional color instead if you need to communicate state rather than category.
- Use Indigo for links, primary buttons, and active states, the one primary color.
- Pair a tertiary accent fill (Cyan/Soft Violet/Gold) with Midnight text on top.
- Follow the section-accent rule for category color (Use Cases → Soft Violet, Platform → Cyan, Pricing → Gold).
- Use the neutral ramp for text/surface hierarchy, lightest to darkest.
- Use a tertiary accent as text color on a light background (e.g. Soft Violet on Ice). It fails contrast.
- Use a tertiary accent to communicate state. That's what functional colors (StateChip) are for.
- Introduce a new brand color outside this palette.
- Use the neutral ramp as a substitute for the semantic surface/text aliases.
Surface Combinations
Every page is one of two grounds, light or inverse, each with its own fixed text and card pairings. Don't mix a light-ground text color onto the inverse ground, or vice versa.
Accessible Pairings
WCAG 2.1: ratios differ for normal vs large/UI text. Computed live from the real token values, not estimated.
Typography
Three families, three fixed jobs. Don't use the mono font for a headline, or the display font for body copy, even if the size looks right.
abcdefghijklmnopqrstuvwxyz0123456789
Arbitr checks every change before it publishes. When one breaks a rule, it holds the change and names the rule.
- Use Plus Jakarta Sans for headlines, big numbers, and section titles only.
- Use IBM Plex Sans for prose, descriptions, and UI labels.
- Use IBM Plex Mono for rule IDs, timestamps, and micro-labels, uppercase.
- Use the type scale tokens (var(--text-*)) rather than picking a font-size by eye.
- Use the mono font for a headline, even a short one.
- Use the display font for body copy, even if the size looks right.
- Mix families within a single line of text.
- Invent a new weight. Each family ships fixed weights (see downloads above).
Pairings In Context
How the three faces combine on a real surface, never mixed within one line.
Every hold names the rule that fired. Mono carries the identifier, body carries the explanation.
Display sets the claim. Body explains it. Mono proves it with a rule ID a reader can go check.
Section Header & CTA Bands
The eyebrow/headline/lede stack and the two CTA tones, at the live build's exact values.
Background Fields
Structure, not decoration. Indigo hairlines on Ice. One field per section.
Working surface. Heroes, section openers.
Architecture. Full-bleed statement sections.
Quiet ground. Pricing, logo strips, dense tables.
Measurement. The lens, evidence, scoring.
Container gutters, full page height. 2 to 4 tinted cells max.
Same fields on Midnight, ink switches Indigo → Cyan.
Fades & Density
Every field is masked. An unmasked field is wallpaper.
- One field per section; .bg-rules may sit under it.
- Mask toward the content, with fade-center when copy sits mid-section.
- Keep the field on its own absolute layer (the Backdrop component).
- Divide sections with a hairline, not a new canvas colour.
- Tile a field wall-to-wall unmasked.
- Stack grid + dots, or run a field behind long-form body copy.
- Put a fade class on the section itself. It masks the canvas colour and the content with it.
- Give the field its own hue. Indigo on light, Cyan on dark. Nothing else.
This page covers the foundation. For anything else (a custom asset, an edge case not covered by these guidelines, or approval on a specific use), reach out to the marketing team.