Brand guidelines

Using the Kalea brand.

For partners, integrators and anyone writing about Kalea: which logo to use, which colors and fonts to apply, and the few rules that keep the brand recognizable.

Every logo and element on this page links to its SVG and PNG files. Download the file you need instead of redrawing it, or take the whole kit.

Download guide (PDF)

PDF · 288 kB

Download brand kit (ZIP)

ZIP · 839 kB

Logos and elements in SVG and PNG, tokens.json and this guide as PDF in English, Spanish and Portuguese.

The idea

The street with a hidden crown.

Name: Kalea is Basque for “the street”: kale, “street”, plus the article -a.
Mark: A road running between two buildings: money moving through the city.
Hidden crown: The whole silhouette forms a three-point crown: the user's money, treated with respect.

Basque is the only origin story for the name.

Logo

Mark and lockup.

The lockup pairs the mark with the outlined wordmark, so no font is needed. Use the mark alone where space is tight.

½ mark height

Clear space: Half the mark height on every side. Nothing else enters this area.
Minimum size, mark: 16 px tall.
Minimum size, lockup: 80 px wide.

Variants

Default
White and light neutral backgrounds.
- LockupSVG PNG
- MarkSVG PNG
On dark
Ocean, Deep or dark photos.
- LockupSVG PNG
- MarkSVG PNG
Mono ink
One-color print, embossing and other low-fidelity contexts.
- LockupSVG PNG
- MarkSVG PNG
Mono white
One-color contexts on dark backgrounds, such as a “Powered by Kalea” footer.
- MarkSVG PNG
App icon
App stores, home screens and social avatars (512 × 512).
- App iconSVG PNG

Color

Six brand colors.

About 60% neutrals, 30% Ocean (or Deep on dark pages) and 10% accents, Apricot first. One Apricot moment per view is usually enough.

Ocean#1E578F
Primary
Buildings in the mark, primary actions, links and headings on light backgrounds.
Text on white: yes.vs white 7.46:1
Apricot#EE9E4F
Accent
The street in the mark, highlights and one detail per icon.
Text on white: never.vs white 2.18:1
Violet#8F62BC
Support accent
Illustrations, charts and secondary highlights.
Text on white: barely passes; prefer Ocean.vs white 4.52:1
Lime#80B946
Support accent
Illustrations and charts. Not a success color.
Text on white: no.vs white 2.35:1
Deep#102941
Dark surface
Dark covers, hero backgrounds and dark-mode surfaces.
Text on white: yes.vs white 14.84:1
Ink#121A21
Text
Body text and the mono logo on light backgrounds.
Text on white: yes.vs white 17.57:1

Apricot is never used for text on white: it reaches only 2.18:1. Use it for the street, highlights and accents, or as text on Deep (6.81:1) or Ink (8.06:1).

Contrast is the WCAG 2.x ratio. Body text needs at least 4.5:1; large text and UI shapes need at least 3:1.

Neutrals, tints and semantic colors are in tokens.json. Take values from there instead of copying them by hand.

Typography

Three families, self-hosted.

All three are open-source families from Fontsource. Kalea serves them itself, with no calls to font CDNs.

Display
Funnel Display
Headlines, hero numbers and the wordmark.
Weights: 700
The street with a hidden crown.
Text
Golos Text
UI labels, buttons and paragraphs.
Weights: 400 · 500 · 600
Clear, calm text for labels, buttons and paragraphs.
Mono
Sometype Mono
Data, rates, code, transaction IDs and uppercase eyebrows.
Weights: 400 · 500
#1E578F · 0123456789

Use tabular numbers for amounts and rates so columns align.

Graphic elements

Support the logo, never replace it.

These elements come from the geometry of the mark. Use them to frame and pace content; the logo still signs the page.

Street perspective
Covers, Open Graph images and hero backgrounds.
DownloadSVG PNG
Crown pattern
A quiet texture on Ocean or Deep. Never behind text.
DownloadSVG PNG
Street plate
Coverage maps and country lists. Build production plates in HTML so they can be translated.
DownloadSVG PNG
City grid
A quiet background texture that suggests city blocks.
Skyline band
Building silhouettes cut from the mark, for section dividers and footers.
Road-marking arrows
Bold directional arrows for steps and calls to action.
Street highlight and lanes
An Apricot bar or a dashed lane under one key word. The word keeps its own color.

Do and don't

Keep the mark recognizable.

Do

Pick the logo file that matches your background.
Keep clear space of half the mark height on every side.
Take colors, fonts and radii from tokens.json.
In a “Kalea × Partner” lockup, set both logos at the same optical height.
Inside a white-label widget, show Kalea only in the “Powered by Kalea” footer, in the host's muted text color.

Don't

Recolor the street. It stays Apricot, except in the mono versions.
Stretch, skew, rotate or re-space the mark and wordmark.
Add effects: shadows, glows, outlines, gradients or bevels.
Place the logo on busy areas of patterns or photos.
Use Apricot for text on white.
Alter the crown or the street geometry, or redraw the mark.
Make the Kalea logo larger than partner logos on co-branding walls.

Misuse examples

Recolored
Stretched
Rotated
Shadow added

Questions

Co-branding, or something not covered here?

Open an issue on GitHub and tell us where and how you plan to use the brand. For co-branding, use only files from each partner's official press kit, and never redraw or recolor a partner logo.

Open a GitHub issue