Brand kit

One system, ten skins

Blue Strata is white-label by design. The mark, the type and the form language are constant; the colour is not. Every strata picks one of ten themes and the whole interface recolours at runtime.

The mark

A ridge stack — strata layers and a coastal skyline in the same shape

The sand ridge reads as stacked strata lots from close up and as a BC mountain ridgeline from a distance. It is a single flat SVG with no gradients, so it stays crisp at a favicon’s 16px and on a printed letterhead alike.

On cream

64 · 40 · 24 · 16px. Minimum size is 20px.

Lockup

Blue Strata

Mark plus wordmark, Manrope Bold, tight tracking. Use this in headers and signatures.

On navy

Blue Strata

The mark carries its own navy tile, so it sits on the nav shell without a knockout.

Give the mark clear space equal to the height of its ridge on every side.
Place the mark on cream, white, or navy.
Use the supplied lockup, with the wordmark set in Manrope Bold at the mark's optical size.
Recolour the interface through the theme tokens.

Don’t

Crowd it against type, or set it smaller than 20px, where the ridgeline fills in.
Place it on a photograph, a gradient, or any mid-tone that kills the ridge contrast.
Re-set, condense, or re-letter the wordmark, or reach for a different typeface.
Recolour the mark itself — it stays navy and sand in every white-label theme.

Colour

A neutral base, and exactly one accent

Surfaces, borders and text are greyscale. The brand colour is reserved for primary actions, active state and genuine emphasis — never decoration. That restraint is what lets a single accent swap rebrand the entire product.

Neutral base

--color-creambg-cream

App background#f6f3ec

--color-surfacebg-surface

Cards, controls, panels#ffffff

--color-lineborder-line

Hairlines, borders, dividers#e6e0d4

--color-inktext-ink

Primary text and headings#15243a

--color-mutedtext-muted

Secondary text, labels, hints#6b7280

Brand accent

--color-brandbg-brand

Primary actions, links, active state#2563a8

--color-brand-deepbg-brand-deep

Primary hover and pressed#1d4e89

--color-navybg-navy

Sidebar and nav shell#14314f

--color-sandbg-sand

Warm secondary accent, used sparingly#c98a4b

--color-sand-softbg-sand-soft

Soft sand fill#e8dcc8

Status accents

Fixed and deliberately desaturated, so they sit calmly beside any accent — and so “paid” and “overdue” read identically in every strata’s theme. These four are not part of the white-label set.

Success

#2f7d5bSuccess pill

Warning

#9a6b1fWarning pill

Danger

#b4362fDanger pill

Info

#2563a8Info pill

White label

10 themes, one token contract

Each theme defines the same ten tokens. The tenant shell sets them as CSS custom properties, so every utility in the app re-reads them and recolours with no rebuild and no redeploy. A strata switches theme from Settings and the change is instant.

Blue Strata

Default

The default — coastal blue and warm sand.

Harbour

Deep harbour blue with an aqua breeze accent.

Evergreen

Forest greens with a warm brass accent.

Slate

Cool steel and charcoal — understated and modern.

Burgundy

Wine reds with a warm sand accent — traditional and stately.

Copper

Warm terracotta and copper — earthy and inviting.

Indigo

Deep indigo and violet — contemporary and confident.

Teal

Bright aqua and teal — fresh and coastal.

Graphite

Monochrome graphite — minimal and neutral.

Sandstone

Warm desert sandstone and ochre.

Typography

Manrope, and nothing else

One family across the whole product. Headings separate from body by weight and tracking rather than by family — a single voice suits a dense admin tool better than a display serif competing with it. Self-hosted through next/font with display: swap, so first paint is never blocked on a font.

Regular 400

Body copy

Medium 500

Labels, nav

Semibold 600

Headings, emphasis

Bold 700

Wordmark, stat values

Type scale

Ten steps, rendered here at their real sizes. Don’t invent sizes between them.

Sample	Token	Size / line	Typical use
Strata	`text-4xl`	46 / 50	Marketing and empty-state hero
Strata	`text-3xl`	36 / 40	Hero stat values
Strata	`text-2xl`	28 / 34	Page headings (desktop)
Strata	`text-xl`	22 / 30	Page headings (mobile)
Strata	`text-lg`	18 / 26	Card and section titles
Strata	`text-md`	16 / 26	Comfortable body, inputs
Strata	`text-base`	14 / 24	Default body
Strata	`text-sm`	13 / 20	Dense body, table cells
Strata	`text-xs`	12 / 18	Eyebrows, badges, hints
Strata	`text-2xs`	11 / 16	Table meta, micro labels

Form

Radius, elevation, and a 44px floor

Radius

4px

6px

8px

12px

16px

24px

Elevation

--shadow-xsControls at rest

--shadow-smCards at rest

--shadow-mdHover and raised

--shadow-lgDrawer and overlay

Touch targets

Blue Strata is iPad-first. Every control clears 44px (--spacing-tap), and the sidebar becomes a persistent rail at 1024px, a drawer below it.

Input — 44px

Want your strata’s colours on it?

Pick a theme during setup, or change it any time from Settings. Nothing rebuilds.

Request a demo See the features