Brand assets

Take what you need.

The mark, the colours and the rules. Copy or download anything here.

Still being drawn. Current, not final.

Colour

Seventeen colours, all grown from one seed.

pairs63
worst4.55:1
every pairAA

Everything here comes out of `oklch(0.255 0.0233 230.47)`

Every other colour is a formula against that one. Change the seed and all seventeen move with it, and the cells beside the title say whether they still read.

background the seed
foreground 1 − L · C ÷ 3 · H + 180°
tertiary C × 1 · H + 54°
secondary C × 2 · H + 180°
primary C × 3 · H + 72°
accent C × 4 · H = foreground

Surfaces 7

Seven shades of the same deep blue-grey. Any of them works as a background. Three at a time is plenty.

Content 1

For everything you read.

Brand 4

Four colours at the same brightness, so none of them shouts. Give them a little space and they get along.

Identity 1

The brightest thing here, named after the flash of a rabbit's tail. It has exactly one job: the mark on a primary badge. Never text.

States 4

The familiar four. Here for reference, not decoration.

cottontail

The brightest thing in the system, named after the flash of a rabbit’s tail. The ring around this panel is it.

Save changes Focus ring 9.58–17.20 on the seven shades
The mark on a primary badge 1.96: a logotype allowance, never text
New A loud callout, sparingly 13.80 with the page shade as its text

Never text. On a primary fill it is a logotype allowance and nothing more.

Modifiers

Need something quieter, or a hover state? Turn one of these down rather than reaching for a new colour.

Aa hover 85% a pointer resting on it
Aa active 70% held down
Aa muted 65% captions and metadata, nothing you need to read
Aa disabled 38% exempt from contrast, so never informational
Aa border 76% the lowest alpha still clearing 3:1 on every shade

Muted is the one place the contract does not hold: AA-large at best. Captions and metadata only, and keep it off the lightest two shades.

One seed, in order

Every colour, and the move that made it, drawn as it happens.

Watch it build

Status colours: the hue is a convention, not a derivation

success
warning
error
info

Surfaces: the seed, lightened and darkened

background_lightest #2a404a
background_lighter #243740
background_light #1d2e36
background #17252c
background_dark #111d23
background_darker #0b1519
background_darkest #060d11

Seven colours, six moves. The only real decision was the first one.

The idea

It is a rabbit nose, not a rabbit head.

The Y of a rabbit's philtrum is the whole logic. Reduce it, mirror it, thicken it into an inner curve, then let a lower curl carry the whisker pad.

Design from the nose first. The ears are only ever a hint.

1 Rabbit nose The Y of the philtrum.
2 Reduce Down to a bare Y.
3 Mirror Two halves, thickened.
4 Curl A lower curl for the whisker pad.
5 Abstract Ears only hinted at.

Logo

Most of the time it is just the mark, one colour, on whatever it sits on.

primary on background

background on a light ground

Mark

Work in progress

Two mirrored strokes. Single-colour, so its ink follows whatever it sits in. No light and dark version to keep in sync.

lilbunnyrabbit.mark.v6.wip.svg

Download

Which colour

Five combinations. The first is the one you want almost every time.

background + primary 7.06:1 The default. The bare mark in primary, on the page or any other shade.

primary + background 7.06:1 Flipped into a filled badge: an avatar, an app icon, a favicon. It carries its own ground, so it goes anywhere.

primary + cottontail 1.96:1 · logo only The bright one, for when the badge should catch the eye. The ears are the fixed asset colour, pale on either disc. Low contrast in dark on purpose: a logotype, never text.

foreground + background 6.92:1 The one-colour fallback. Same two colours as body text, so it needs nothing the page does not already have.

background + foreground 6.92:1 The same pair the other way round. On the page itself the disc IS the page, so only the ears show. A knockout, not a badge.

foreground In navigation and other chrome, beside the wordmark.
primary Anywhere the mark should read as the brand.
background On a light or white ground, where primary would vanish.

Small sizes

It is a thin mark. Worth a look before it ends up in a favicon.

16px

24px

32px

48px

64px

Room and floor

How much space it needs around it, and how small it may go. Provisional: these are the defaults, not measured.

Clear space: ×0.5 of the mark’s height, all four sides. Nothing inside it.
Minimum size: 24px wide. Below this the ear strokes close up.

It holds up

In greyscale and all three kinds of colour blindness, the badge shifts by at most 0.00. The two colours differ in brightness, not hue.

Normal vision 1.96:1

Greyscale 1.95:1

Protanopia 1.96:1

Deuteranopia 1.96:1

Tritanopia 1.95:1

The name

No wordmark asset. The name is set in Hack, the face every value on this page is set in, so the lockup is a layout rule, not a drawing.

lilBunnyRabbit

Horizontal. Mark, gap, name, centred on the mark. The name at 42% of the mark's height, Hack 700, tracked -0.02em. Both parts are the foreground, so it goes on every shade unchanged.

How small it goes

The horizontal lockup at four sizes. Below about 32px the name stops being readable before the mark stops being recognisable, so that is where the mark goes on alone.

lilBunnyRabbit

What it was judged against

11 other arrangements of the same two objects. The only difference between any two is the thing being compared.

Show them

lilBunnyRabbit

Quiet prefix `lil` steps back so the two humps read as one word instead of three.

lilBunnyRabbit

Brand hump One segment in primary. Loud, and it fixes the lockup to a colour the mark does not need.

lilBunnyRabbit

Regular weight The same arrangement at 400. Quieter. Good in a footer.

lilBunnyRabbit

All lowercase Loses the humps, so tracking has to carry the rhythm. Reads like a handle.

lilBunnyRabbit

All caps Smaller and tracked out. The most formal of these, and the least like the name.

lilBunnyRabbit

Baseline sat The mark sits on the name’s baseline rather than on its optical centre. Tighter, less even.

lilBunnyRabbit

Mark trailing Name first. Reads as a signature, and the mark stops being the first thing you see.

lilBunnyRabbit

Stacked, centred For a square-ish space: an avatar frame, or the middle of a card.

lilBunnyRabbit

Stacked, left Same object on a left margin. Lines up with body copy underneath it.

lilBunny
Rabbit

Two lines Breaks at the second hump, so the lockup is as tall as the mark and half as wide.

lil
Bunny
Rabbit

Three lines A block of name beside the mark. Tall, and hard to use small.

Type

Two faces. One for reading, one for values.

Inter

Everything you read. Headings, body, labels.

Dark is the brand.

Light is what you reach for when a product surface needs it.

--font-sans rsms/inter v4.1, the variable file SIL Open Font License 1.1

Hack

Every value: hexes, formulas, ratios, token names. And the wordmark.

lilBunnyRabbit

1 − L · C ÷ 3 · H + 180°

--font-mono source-foundry/Hack v3.003 MIT, plus Bitstream Vera for the inherited DejaVu work

Business card

Front and back. Nothing fancy.

CW 1 Stock

lilBunnyRabbit

Andraž

Your job here

hello@example.com
+1 415 555 0128
example.com

CW 2 Brand

lilBunnyRabbit

Andraž

Your job here

hello@example.com
+1 415 555 0128
example.com

CW 3 Reverse

lilBunnyRabbit

Andraž

Your job here

hello@example.com
+1 415 555 0128
example.com

85 × 55 mm with 3 mm bleed. Contact details are placeholders.

Don't

A short list. Most of it comes down to one thing: the brand colours are all the same brightness, so they disappear against each other.

primaryaccentsecondary

Don't. Brand colours touching. Roughly 1:1, so the edges vanish.

primaryaccentsecondary

Do. Separated by a gap of the page shade.

Light mode is UI only.

Use it when a product surface needs it. Never for brand recognition, marketing, the app icon or social cards. Those are always dark.
Nothing brand-coloured on white.

Dark’s colours on white vanish: primary is 2.23:1 and cottontail 1.14:1. White is the top rung of the LIGHT ladder — that is where the tint runs out — and the light palette is what goes on it. Nothing from the dark palette ever does.
No two brand colours adjacent or layered.

They are all the same brightness, so side by side they blur into one shape. A gap or a border fixes it.
No gradients between brand colours.

Same brightness means the gradient has nowhere to travel, and it comes out muddy. Between two shades is lovely.
No white text on a brand fill.

White on primary is 2.23:1. Use background #17252c and you get 6.55 to 7.06 instead.
Do not add colours.

Whatever seems to be missing is either a shade or an existing colour turned down.
Do not re-tint the greys.

The backgrounds are blue and the brand is green on purpose. Leave them be.
No more than three shades per viewport.

Neighbours are only about 1.1:1 apart, so a fourth one stops reading as structure.
Muted text is for captions, not content.

At 65% it is 3.75:1 on the page and 2.94 on the lightest shade. Fine for a caption, not for anything important.
Do not “fix” the logo’s contrast.

The bright badge is 1.96:1 on purpose. Logos are exempt (WCAG 1.4.3, 1.4.11). No stroke, no shadow, no lighter green.

Not to the mark

Every tile below is the real SVG with one CSS declaration on it. No broken copy of the logo exists in this repo, so none of these can go stale when the mark changes.

Stretched The ear strokes are one weight. Scaling one axis makes them two.

Squashed Same fault the other way. Set width and height together or set neither.

Rotated It is a nose. It reads as one at 0°.

Off-palette colour The ink is one of the seventeen. Hue-shifting it invents an eighteenth.

Drop shadow It sits on the surface, not above it. Nothing here has depth.

Faded out Below full strength it stops being the logo and becomes decoration.

Washed out Greyed and low contrast. There is a one-colour fallback for this, and it is not this.

Blurred What a raster copy looks like scaled up. The SVG is the asset.

You’ve reached the end,

but you’re still in the dark.

Keep going

Light mode

It exists because interfaces need it. It is not the brand.

Every dark token has a twin here: same name, same job, same position. Nothing rebinds and no component gets a variant. That does not make them interchangeable. Dark is the brand. Light is what you reach for when a product surface needs it. If someone will recognise the mark from it, it should be dark.

Product UI: an app, a dashboard, a settings screen.
Anywhere a user has asked for a light interface.
Documents and print, where paper is the ground anyway.

Brand recognition. The mark anywhere it introduces itself.
Marketing, landing pages, decks.
The app icon and the favicon.
Social cards and share images.

Seventeen twins

Same names, same groups, same order. Only the guarantee splits on paper: text clears AA on every shade, brand and states clear AA on the page and the surface and 3:1 on the rungs below.

text4.54:1
page + surface4.54:1
below3.08:1

Surfaces 7

Seven shades of warm paper, white down to soft sand. The top rung is white because that is where the tint runs out, not because anyone picked it; the page is the fourth. Same job as the dark seven: pick one and build on it.

Content 1

For everything you read. Solved to an 8:1 body ratio, a step darker than the dark text on purpose: on paper the text alone decides how deep the ladder goes.

Brand 4

The same four ranks, re-solved for a warm ground and sat a step above the text. The loud one turned orange on the way over. That story is further down.

Identity 1

The one token that changed job. Here it is a UI colour: a focus ring, a marker, a chart highlight. Never text, and never the logo.

States 4

The familiar four, darkened until they sit on paper.

cottontail

The same token on paper. It pops by chroma here rather than brightness, and it lost one job on the way over. The ring around this panel is it.

Save changes Focus ring 3.08–6.31 on the seven shades
The mark on a primary badge 1.09: the ears stay the fixed colour instead not on paper
New A loud callout, sparingly 5.44 with the page shade as its text

A UI colour only. Never text, and never the mark.

The orange one

Everything else is a twin. The primary changed hue. That was measured, not chosen.

Aa the quick brown fox

12.8 ΔE Dark’s green hue: sinks into the paper

Aa the quick brown fox

14.2 ΔE Orange: sits on it

Distance from the page’s own darkened form. Further is better: the colour reads as ink on the paper instead of a tint of it.

So the light mode is fitted to its own ground rather than inheriting dark's wheel. Of dark's four brand relationships, one came along unchanged. Three could not.

accent primary − 72° kept

Dark’s own offset, on the other side of primary. Still legal here.

tertiary primary + 54° moved

Dark’s tertiary is the midpoint of primary and the ground. On a warm page that arc is spoken for, so it takes the one arc paper leaves open: the midpoint of the text and accent hues, 302°, 36° from each.

secondary primary + 180° moved

The complement of orange is blue, and blue is already info. Moved to the midpoint of success and info, 190°, 50° clear of both.

warning hue 70° moved

70° sits 16° from the page hue. Moved to the midpoint of the page and success, 113°, 27° clear of both. A green-gold, forced rather than chosen.

The mark on paper

The same five combinations, in the light palette.

background + primary 5.94:1 The default. The bare mark in primary, on the page or any other shade.

primary + background 5.94:1 Flipped into a filled badge: an avatar, an app icon, a favicon. It carries its own ground, so it goes anywhere.

primary + cottontail 6.06:1 · logo only The bright one, for when the badge should catch the eye. The ears are the fixed asset colour, pale on either disc. Low contrast in dark on purpose: a logotype, never text.

foreground + background 8.01:1 The one-colour fallback. Same two colours as body text, so it needs nothing the page does not already have.

background + foreground 8.01:1 The same pair the other way round. On the page itself the disc IS the page, so only the ears show. A knockout, not a badge.

The bright badge is the one that reads better here: the same pale ears measure 6.06:1 on the orange disc against 1.96:1 in dark, so on paper it needs no exemption. Do not swap the ears for the light cottontail — that pair is invisible. When you cannot control the reproduction, use the neutral pair.

Live

Every number above is transcribed from a Chromatics scheme. This is that scheme, running.

Open the scheme in Chromatics

Assets

Grab the palette however you need it. Every format carries both modes.

CSS Tailwind JSON Markdown

palette.css 47 lines

/* dark */
:root,
[data-theme='dark'] {
	--brand-background-lightest: #2a404a; /* background.shift({ l: span, c: span_c }) */
	--brand-background-lighter : #243740; /* background.shift({ l: span * 2/3, c: span_c * 2/3 }) */
	--brand-background-light   : #1d2e36; /* background.shift({ l: span / 3, c: span_c / 3 }) */
	--brand-background         : #17252c; /* OKLCH(0.255, 0.0233, 230.47) — the seed */
	--brand-background-dark    : #111d23; /* background.shift({ l: -span / 3, c: -span_c / 3 }) */
	--brand-background-darker  : #0b1519; /* background.shift({ l: -span * 2/3, c: -span_c * 2/3 }) */
	--brand-background-darkest : #060d11; /* background.shift({ l: -span, c: -span_c }) */
	--brand-foreground         : #b1aba8; /* OKLCH(1 - bl, c / 3, (bh + 180) % 360) */
	--brand-tertiary           : #9eb1ac; /* OKLCH(foreground.l, c * 1, (primary.h + bh) / 2) — the midpoint of the legal arc */
	--brand-secondary          : #b2a6c5; /* OKLCH(foreground.l, c * 2, (primary.h + 180) % 360) */
	--brand-primary            : #a4b483; /* OKLCH(foreground.l, c * 3, (foreground.h + 72) % 360) */
	--brand-accent             : #dc9b76; /* OKLCH(foreground.l, c * 4, foreground.h) */
	--brand-cottontail         : #e3f9b2; /* primary.atLightness(top).atChroma(maxChroma(top, primary.h) * 0.60) — top = foreground.l + span * 2 */
	--brand-success            : #7ac26a; /* OKLCH(foreground.l, c * 6, 140) */
	--brand-warning            : #e49b39; /* OKLCH(foreground.l, c * 6, 70) */
	--brand-error              : #f88876; /* OKLCH(foreground.l, c * 6, 30) */
	--brand-info               : #49b7fb; /* OKLCH(foreground.l, c * 6, 240) */
}

/* light */
[data-theme='light'] {
	--brand-background-lightest: #ffffff; /* OKLCH(top + up, maxChroma * tint, light_bh) — white: at L 1 there is no chroma to hold */
	--brand-background-lighter : #fcf9f3; /* OKLCH(top + up * 2/3, maxChroma * tint, light_bh) */
	--brand-background-light   : #f9f3e7; /* OKLCH(top + up / 3, maxChroma * tint, light_bh) */
	--brand-background         : #f6eddb; /* OKLCH(foreground.l + span * 2, maxChroma * tint, (foreground.h + primary.h) / 2) — the page */
	--brand-background-dark    : #ebd9b1; /* OKLCH(top - light_span / 3, maxChroma * tint, light_bh) — the surface */
	--brand-background-darker  : #dec58e; /* OKLCH(top - light_span * 2/3, maxChroma * tint, light_bh) */
	--brand-background-darkest : #cab380; /* OKLCH(top - light_span, maxChroma * tint, light_bh) */
	--brand-foreground         : #414754; /* OKLCH(page.complement().xyy.setLuminance((page.Y + 0.05) / 8 - 0.05).ok_l, c, light_bh + 180) — an 8:1 body */
	--brand-tertiary           : #5f5968; /* OKLCH(light_bl, u * 1, (light_foreground.h + light_accent.h) / 2) */
	--brand-secondary          : #376662; /* OKLCH(light_bl, u * 2, (h_success + h_info) / 2) — +180 lands on info, so the teal arc instead */
	--brand-primary            : #7f4e32; /* OKLCH(light_bl, u * 3, foreground.h) — the seed’s complement: orange */
	--brand-accent             : #814370; /* OKLCH(light_bl, u * 4, foreground.h − 72) */
	--brand-cottontail         : #9c4800; /* light_primary.atLightness(light_foreground.l + up * 2).atChroma(maxChroma()) — pops by chroma, not lightness */
	--brand-success            : #1c6f00; /* OKLCH(light_bl, u * 6, 140).gamutMap() */
	--brand-warning            : #5d6200; /* OKLCH(light_bl, u * 6, (light_bh + h_success) / 2).gamutMap() — green-gold; 70 sits 16° from the page hue */
	--brand-error              : #a12c1f; /* OKLCH(light_bl, u * 6, 30) */
	--brand-info               : #0063a0; /* OKLCH(light_bl, u * 6, 240).gamutMap() */
}

/* Fixed asset colour. Identical in both modes. */
:root {
	--brand-mark-ears: #e3f9b2;
}

Source SVGs live in the repo: lilBunnyRabbit/brand/tree/master/src/lib/brand/logos.

Take what you need.

Everything here comes out of oklch(0.255 0.0233 230.47)

Surfaces 7

Content 1

Brand 4

Identity 1

States 4

cottontail

Modifiers

One seed, in order

Mark

Which colour

Small sizes

Room and floor

It holds up

How small it goes

What it was judged against

Inter

Hack

Not to the mark

Surfaces 7

Content 1

Brand 4

Identity 1

States 4

cottontail

Everything here comes out of `oklch(0.255 0.0233 230.47)`