Visual Identity · VIO Brand System

Logo01

One mark, held with care.

The wordmark pairs a clean display structure with the slash as its one warm note: the detail that makes the mark unmistakably VIO.

Primary · graphite on cream

Reverse · cream on graphite

On accent · for moments, not defaults

✓ Do

Give the mark clear space: at least the cap height on every side.
Use the reverse mark on photography and dark fields.
Keep the wordmark horizontal; pair it with a location name in Archivo.

✗ Don't

Recolor the mark outside the three approved lockups.
Remove, replace, or restyle the slash; it is the signature of the mark.
Stretch, outline, add shadow, or set it in another typeface.
Place it on a busy or low-contrast part of an image.

Color02

Six colors, no more.

The full system is six values. Neutrals carry roughly 90% of any layout; the two accents, slate and greige, live inside the remaining 10%, one at a time. Click any swatch to copy its hex.

Graphite

#292929

Neutral · primary dark

Greige

#BCACA1

Accent · warm neutral

Ink Slate

#3A4A52

Accent · cool

Slate Mid

#7C95A2

Accent · cool, lifted

Cream

#E8E0D0

Neutral · primary light

Alabaster

#EDEAE0

Neutral · surfaces & walls

Alabaster (#EDEAE0) is the architectural off-white: it carries walls, trim, and large interior surfaces. Greige (#BCACA1) is the warm accent mid-tone that bridges graphite and cream. Slate Mid (#7C95A2) is the cool accent mid-tone that carries the clinical note. None of these three are interchangeable.

Two accent options, one at a time

Slate and greige are both on the table as the brand accent. They set a different tone: slate reads cooler and more clinical, greige reads warmer and more personal. Pick one to lead a given surface; they do not compete on the same layout.

Option · slate

You'll know what's happening, the whole time.

Option · greige

Warm without softness.

The guardrail: if slate leads, it must stay muted. Push the saturation even slightly and it tips into sterile clinical blue, which is the one place this palette can fail. When greige leads, keep it neutral — never warm it toward tan or cool it toward gray.

Ratio

60 · 30 · 10

A neutral leads (60%), a second neutral supports (30%), the accents stay near 10%. Never split weight evenly across colors.

One accent leads

Slate or greige, not both

One accent leads a surface; the other stays off it. A clinical layout leans slate, a relationship layout leans greige. The choice holds across a piece.

Contrast

AA, always

Body copy stays graphite-on-cream or cream-on-graphite. Slate and greige are for accents and large type, never small body text. Every pairing clears WCAG AA.

✓ Do

Let one neutral carry the surface, then add a single accent.
Lead with slate when the surface should read cooler and more clinical.
Lead with greige when the surface should feel warmer and more personal.
Keep alabaster for walls and large interior surfaces.
Keep slate muted; never push it bluer or brighter.

✗ Don't

Run greige and slate at equal weight on one surface.
Push the slate toward a brighter, bluer tone.
Treat alabaster and cream as interchangeable.
Add a color outside these six.
Use an accent for small body copy.

Typography03

Two typefaces, two jobs.

Syne carries the headlines: a display sans with real character, distinctive enough to feel made rather than defaulted. Spectral, a serif, supplies the italic accent for contrast, and Archivo does the clinical work in body and labels.

Display sans · Syne

Aa Bb Cc

Headlines · emotional tone · the italic accent · taglines

Serif accent · Spectral italic · Body · Archivo

Aa Bb Cc

Body copy · captions · data · UI · clinical clarity

Display

52–120px

Syne 400–500. Tight leading. Reserve the Spectral italic for one phrase.

Heading

28–58px

Syne 500. Section titles; Spectral italic for pull quotes.

Body

16–21px

Archivo 400. Line length 50–65 characters.

Eyebrow

12px

Archivo 700. Uppercase, wide tracking, copper.

Brand standards04

What holds it together.

Consistency is the moat. Across every channel and every location, these are non-negotiable.

✓ Always

Lead with graphite or cream; keep slate or greige to a single accent.
Pair serif headlines with sans body; never the reverse.
Give layouts room to breathe; whitespace is a premium signal.
Say "clients." Specific over clever. Outcomes before mechanisms.
Keep the same voice top to bottom on every page.

✗ Never

Add accent stripes, color bars, or single-side borders.
Use stock-photo gradients, neon, or off-brand secondary colors.
Set body copy in the serif or headlines in the sans.
Use exclamation points outside brand-permitted contexts.
Center long paragraphs or crowd elements together.

The look of earned warmth.