Brand & design system

How CALLAE looks, sounds and is built.

One reference for anyone creating for CALLAE: the logo, colour, type, voice and components behind the website, so everything we make reads as the same, deliberate whole.

Essence

CALLAE builds the foundations organisations need to govern well, run their platforms and adopt AI on solid ground. Everything in the brand, from the stepped mark to the calm palette, comes back to that one idea.

Tagline

We build the foundations for what comes next.

Build and govern with confidence on ServiceNow.

Attributes

Structured
Senior
Calm
Honest
Forward-looking

Logo

The wordmark pairs CALLAE in tracked Inter with a stepped mark: three layers narrowing upward, each resting on the one below. The accent top step is the part that's still being built.

CALLAE

App icon

Download SVG Download PNG

Usage

Keep clear space around the wordmark equal to the height of the mark's base step.
Use the full-colour mark on paper, and the white mark on blue-deep or ink.
The top step is always accent periwinkle. Never recolour it.
Don't stretch, rotate, outline or add effects to the wordmark.
Don't set CALLAE in another typeface. Use the supplied artwork.

Colour

A restrained palette of deep navy, a confident mid blue and a single periwinkle accent, on near-white paper. Use the accent sparingly: it marks the one thing that matters on a surface.

Core

blue-deep

#0a1128

Hero and dark surfaces, theme colour

On paper: 17.9:1 · AAA
On blue-deep: 1.0:1 · Decorative

blue

#35509e

Primary actions, eyebrows, focus and links

On paper: 7.2:1 · AAA
On blue-deep: 2.5:1 · Decorative

accent

#8ab4f8

Highlights on dark, the top step of the mark

On paper: 2.0:1 · Decorative
On blue-deep: 8.9:1 · AAA

ink

#0d1526

Headings, body on light, footer surface

On paper: 17.5:1 · AAA
On blue-deep: 1.0:1 · Decorative

Neutrals

ink-soft

#47536b

Body copy and descriptions

On paper: 7.4:1 · AAA
On blue-deep: 2.4:1 · Decorative

ink-faint

#8993a8

Meta text, kickers and captions only

On paper: 3.0:1 · Decorative
On blue-deep: 6.1:1 · AA

line

#dbe2ec

Borders and dividers on light

On paper: 1.2:1 · Decorative
On blue-deep: 14.3:1 · AAA

blue-soft

#e9eefa

Icon tiles and tinted fills

On paper: 1.1:1 · Decorative
On blue-deep: 16.1:1 · AAA

paper-deep

#eef1f8

Alternate section background

On paper: 1.1:1 · Decorative
On blue-deep: 16.5:1 · AAA

paper

#fafafa

Default page background

On paper: 1.0:1 · Decorative
On blue-deep: 17.9:1 · AAA

On dark

Dark sections re-scope the ink tokens rather than introduce new classes, so text-ink, text-ink-soft and border-line keep working unchanged.

ink (on dark)

#f5f7fb · Headings on dark

ink-soft (on dark)

#b7c0d6 · Body copy on dark

ink-faint (on dark)

#8894b3 · Meta text on dark

Typography

Fraunces, a warm optical-size serif, carries headlines and numbers. Inter handles everything that needs to be read quickly: body copy, navigation, labels and the wordmark itself.

Display

Fraunces

Headings, titles, kickers and numerals

Text

Inter

Body, UI, labels and the wordmark

Display XL

Fraunces 500 · 60 / 1.1 · tight

Foundations first.

Heading

Fraunces 500 · 36 · tight

Built for governance. Ready for AI.

Title

Fraunces 500 · 20

Design the foundations

Lead

Inter 400 · 18 / relaxed

Senior governance expertise and hands-on ServiceNow delivery, together.

Body

Inter 400 · 16 / relaxed

Solutions are built to be maintainable: clear, documented and no more complex than the problem requires.

Eyebrow

Inter 500 · 14 · uppercase · 0.18em

What we do

Voice

We sound like a senior advisor you'd trust with a hard problem: clear, measured and specific. Confidence comes from substance, never from superlatives.

Senior, not salesy

Write like an experienced advisor talking to a peer. No hype, no urgency tricks, no sales process.

Say: We're glad to talk it through: no obligation, no sales process.
Avoid: Unlock game-changing value with our cutting-edge solutions!

Honest by default

Never invent a client, quote, badge or result. If something isn't true yet, it doesn't go on the page.

Say: Multi-year ServiceNow MVP.
Avoid: Trusted by hundreds of leading enterprises.

Foundations before features

Lead with governance, structure and ownership. Technology, including AI, follows from them, not the other way round.

Say: AI adoption is a governance decision first.
Avoid: Deploy AI across your business in weeks.

Plain British English

Short sentences, British spelling (organisation, prioritise), sentence case headings and the Oxford comma left out.

Say: Design the foundations
Avoid: Designing Your Optimized Foundation Strategy

Components

A small set of building blocks, reused everywhere. Rounded-full buttons, 2xl-radius cards with hairline borders, and thin line icons at 1.5px stroke.

Buttons on light

Let’s talkSecondaryText link

Buttons on dark

Let’s talkExplore our expertise

Card

Advisory

Clear thinking before resources are committed.

Icons

24px grid, 1.5px stroke, round caps and joins. Always in currentColor, usually blue on a blue-soft tile.

Motion

Motion is slow and settling, like something being placed rather than thrown. Content animates once; only background texture loops. Everything respects reduced-motion preferences.

Ease out

cubic-bezier(0.16, 1, 0.3, 1)

Reveals, lifts and underlines: quick to start, gentle to settle

Reveal

0.7s · translateY(22px) → 0

Sections entering the viewport, once

Lift

0.25s · translateY(-2px) + blue shadow

Primary buttons on hover

Ambient

5–8s · ease-in-out · infinite

Background texture only, never content

Need artwork or have a question about using the brand?

hello@callae.eu