Brand guidelines
Made to be seen.Built to be trusted.
The Kuvra mark, colour, type, motifs, interface and voice, with the files and the rules for using them.
- Name
- Kuvra
- Always one word, capital K.
- Primary colour
- #8262FF
- Kuvra Violet.
- Typefaces
- Instrument Sans · Inter
- Display and text.
- Icons
- Phosphor
- One family, three weights.
01
What the brand stands for
Support software that doesn't bluff. Everything below, from the colour to the copy, should feel like that sentence.
Honest
Say what it does, and what it doesn't yet.
Calm
Quiet surfaces, one accent, nothing shouting.
Fast
Keyboard-first. Fewer steps, never more.
Human
A person is always one step away.
We are
A careful colleague. Precise, quietly confident, a little dry. We explain trade-offs and admit gaps.
We are not
A hype machine. No “revolutionary”, no fake urgency, no logos of customers we don’t have.
02
The mark
Four nested arcs on a base line: a conversation widening out from one point, settling on solid ground. It works alone, or beside the wordmark.
On light
On night
On violet
Mark · Violet
Mark · Ink
Mark · White
Mark · Night
Clear space
Keep clear space of at least xon every side, where x is half the mark’s height. Nothing else enters that box: text, edges, other logos.
Minimum size
The mark alone never goes below 16 px tall (favicons, avatars). The full lockup never goes below 80 px wide. Smaller than that, use the mark on its own.
Please don’t
Stretch it
Rotate it
Recolour it
Add effects
Outline it
Use low contrast
03
Colour
Mostly cool neutrals, a deep night for emphasis, and one violet that means “this matters”. Contrast figures are calculated from the values shown.
A rough balance for any page or screen: violet is the exception, not the theme.
Primary
Kuvra Violet
The one action that matters on a surface. Links, focus, the mark.
Night
Dark bands, hero sections, the product's icon rail.
Ink
Headlines and body copy on light surfaces.
Supporting
Violet hover
Hover and pressed states; accent on dark.
Violet light
Tinted pills and selected rows.
Night raised
Cards on dark bands.
Night line
Hairlines on dark bands.
Muted
Secondary text.
Faint
Captions, placeholders, meta.
Line
Borders and dividers on light.
Mist
Recessed panels and wells.
Page
The page behind white surfaces.
Surface
Cards, panels, inputs.
Status
Resolved
Success, handed over, online.
Waiting
Warnings, waiting on someone.
Breach
Errors, SLA breaches, destructive actions.
✓Use violet for the single most important action or highlight in view.
✓Set long text in Ink on white or white on Night.
✕Use violet as a large background behind body text.
✕Add gradients, glows or coloured shadows to brand colours.
04
Typography
Two families. Instrument Sans for large, editorial moments at a regular weight. Inter for everything you read, from body copy to the smallest label.
Display
Aa
Instrument Sans
Regular weight, tight tracking (−2% to −4.5%). Headlines 30 px and up.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Text
Aa
Inter
Regular, medium and semibold. Body, interface, labels, numbers.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Display XL
Instrument Sans · 112 / 0.98 · −4.5%
Support that doesn't bluff.
Display
Instrument Sans · 68 / 1.02 · −4%
Answers from your docs
Title
Instrument Sans · 30 / 1.15 · −2%
A person is one step away
Body L
Inter · 18 / 1.6
The agent answers only from what you've written, and hands over the moment it can't.
Body
Inter · 15 / 1.65
Every workspace is isolated at the database level, and hosted in the EU.
Label
Inter · 12.5 semibold · +12% caps
What we believe
Mono
System mono · 12
0 passages above the bar · #57
05
Motifs and icons
A small, consistent kit: pixel fire for big moments, hatching and grids for texture, and one icon family for everything else.
Pixel fire
Crisp square pixels rising through a silhouette, only on Night. One per section, never behind text. No blur, no glow.
Hatching
For empty states and placeholders.
Grid
A faint 56 px grid behind heroes.
Icons · Phosphor
Regular in copy, bold in interfaces, fill for the active state.
✓One family only. Match the icon’s stroke to the text weight beside it.
✕Mix icon sets, or colour icons for decoration.
06
Pixel fire, step by step
Our signature motif is plain maths drawn as squares. Here is the whole recipe, so anyone can build a new one that matches.
01Grid
Split the canvas into square cells, 4–8 px, with a 1 px gap between them.
02Heat
Give every cell a heat from 0 to 1: hot at the base, fading upwards, broken up by noise.
03Colour
Map heat through the six-stop ramp. Skip the coldest cells so the night shows through.
04Motion
Scroll the noise upwards over time. The tongues rise, flicker and never repeat.
The heat ramp
Six stops, from cold to white-hot. Nothing outside this ramp burns.
heat 0–.30
Ember
heat .30–.50
Coal
heat .50–.66
Flame
heat .66–.80
Heat
heat .80–.92
Flare
heat .92–1
Core
Burning a shape
- 1Draw the silhouetteFill the shape (an icon, the mark, a glyph) once on a hidden canvas.
- 2Sample it per cellA cell burns only if the shape covers its centre. Cells on the outline run hotter.
- 3Lick the topAdd a few rows of short flames above the top edge so the shape looks alight, not filled.
- 4Keep the darkLeave holes and cut-outs (the mark's gaps, a keyhole) empty. Contrast makes it read.
fire.ts
the core of every variant
// 1 · heat for one cell: hot at the base, ragged at the tip
const height = rows * (0.3 + 0.6 * noise(col * 0.02, time * 0.2));
const base = 1 - fromBottom / height; // 1 → 0
const flick = noise(col * 0.2, (row + time * 20) * 0.2, time);
let heat = base * 0.95 + (flick - 0.5) * 0.55;
if (base < 0.25) heat -= (0.25 - base) * 1.4; // break the tips
// 2 · heat → colour (skip the coldest so night shows through)
if (heat > 0.06) {
ctx.fillStyle = ramp(heat); // six stops
ctx.fillRect(col * CELL, row * CELL, CELL - 1, CELL - 1);
}
// 3 · ~30fps, pause off-screen, one still frame for reduced motionRules
✓Square cells only, with a 1 px gap. The grid is part of the look.
✓Only on Night. One fire per section, never behind text.
✓About 30 frames a second, paused when off-screen.
✓Show a single still frame when the visitor prefers reduced motion.
✕Blur, glow, bloom or soft gradients. Crisp edges or nothing.
✕Colours outside the ramp, or fire on a light background.
07
Interface details
Things you can press feel like keys: a darker bottom edge, a hairline highlight on top, and a small press. Everything else stays flat: fills, not shadows.
Buttons
One primary per view. Press any of them to feel the travel.
Radius
Sharp, but never harsh. Bigger surfaces get slightly rounder corners.
Surfaces
White
Sections and the inside of cards.
Mist card
Cards sit on white as a flat fill.
Night
Dark bands and dark cards.
Night raised
Cards on a dark band.
Depth comes from fill, not shadow. No drop shadows, no borders around cards, never a glow.
08
How we write
Sentence case, short paragraphs, real numbers. If a sentence would make a support lead roll their eyes, cut it.
Plain over clever
Support people are busy. Say the thing.
✓Write
“The agent hands over when your docs don't cover the question.”
✕Not
“Our revolutionary AI seamlessly elevates every customer journey.”
True over impressive
If it isn't built, it doesn't go on the page.
✓Write
“Kuvra is a young product. What's listed here is built and working.”
✕Not
“Trusted by thousands of the world's leading teams.”
Specific over vague
Numbers, names and keys beat adjectives.
✓Write
“J and K through the queue, A to assign, C to close.”
✕Not
“Lightning-fast workflows that supercharge productivity.”
Calm over urgent
We don't manufacture pressure.
✓Write
“Start free. Upgrade when you need more seats.”
✕Not
“Hurry! Limited-time offer ends tonight!!”
Mechanics
✓“Kuvra”, one word, capital K. Never KUVRA or kuvra in running text.
✓Sentence case for headings and buttons: “Start free”, not “Start Free”.
✓Label AI as AI. Name the person when a teammate joins.
✓British or American spelling, but one per page.
✕Exclamation marks in product copy.
✕Claims you can’t point at in the product.
09
Assets
Vector files of the mark, ready to use. If you need something that isn't here, ask and a person will reply.
Mark · Violet
SVG · #8262FF
Mark · Ink
SVG · #16161A
Mark · White
SVG · #FFFFFF
Mark · Night
SVG · #0F0E14
Writing about Kuvra?
For press, partnerships or a file we don’t list, get in touch.
