Haralt

Brand

Everything you need to show Haralt correctly — the logo, the colours, the type, and the few rules that keep it recognisable. Press and partners are welcome to use these.

Logo

The wordmark is the default. Reach for the symbol only where the wordmark would be illegible.

Wordmark

Use this everywhere by default.

Symbol

App icons, avatars, favicons — anywhere small and square.

Wordmark (SVG)Symbol (SVG)

Clear space

Keep free space around the logo equal to the height of the mark itself. Nothing — text, images, page edges — comes inside it.

What not to do

These are the ones that actually come up. If something is not listed here, use your judgement and keep the mark legible.

Don't recolour the logo. It is yellow on light, white on dark.
Don't stretch, squash or rotate it.
Don't add shadows, outlines or gradients.
Don't place it on a busy photo without a solid panel behind it.
Don't rebuild the wordmark by typing 'Haralt' in another font.
Don't crop the symbol or use it in place of the wordmark at large sizes.

Colour

Yellow is the brand. Green is the supporting action colour. Everything else is a neutral that stays out of the way.

Brand

#F8CE44

--color-brand-primary

#E6B105

--color-brand-primary-hover

#339966

--color-brand-secondary

#2A7E54

--color-brand-secondary-hover

Neutrals

#15181E

--color-text-default

#6B7280

--color-text-muted

#FFFFFF

--color-bg-canvas

#FDFCFC

--color-bg-section-base

#F5F2F0

--color-bg-section-alt

#F5F3EF

--color-bg-muted

#DAE0E7

--color-border-default

#EF4343

--color-danger

Values are defined in src/styles/globals.css as HSL triples, which is what the app reads. The hex codes here are for design tools.

Typography

Two families. Fraunces sets the tone, Open Sans does the work.

Share more, own less.

Fraunces

Headings and short statements.

--font-display

Rent the stuff you need from smart lockers near you, and give it back when you're done.

Open Sans

Body copy, UI labels, everything else.

--font-sans

Shape

Corner radii come from one scale. Medium is the default for cards and buttons.

4px

8px

12px

16px

24px

Voice

How Haralt sounds, in three words.

Plain

Say the thing. No jargon, no filler, no exclamation marks doing the work of a good sentence.

Warm

Helpful and human. We are lending people a vacuum, not underwriting a mortgage.

Honest

Prices, timings and problems stated straight, including when the answer is inconvenient.

Need something else?

For other formats, a print-ready file, or anything not covered here, get in touch.

hei@haralt.co

What not to do

These are the ones that actually come up. If something is not listed here, use your judgement and keep the mark legible.

Don't recolour the logo. It is yellow on light, white on dark.
Don't stretch, squash or rotate it.
Don't add shadows, outlines or gradients.
Don't place it on a busy photo without a solid panel behind it.
Don't rebuild the wordmark by typing 'Haralt' in another font.
Don't crop the symbol or use it in place of the wordmark at large sizes.

Colour

Yellow is the brand. Green is the supporting action colour. Everything else is a neutral that stays out of the way.

Brand

#F8CE44

--color-brand-primary

#E6B105

--color-brand-primary-hover

#339966

--color-brand-secondary

#2A7E54

--color-brand-secondary-hover

Neutrals

#15181E

--color-text-default

#6B7280

--color-text-muted

#FFFFFF

--color-bg-canvas

#FDFCFC

--color-bg-section-base

#F5F2F0

--color-bg-section-alt

#F5F3EF

--color-bg-muted

#DAE0E7

--color-border-default

#EF4343

--color-danger

Values are defined in src/styles/globals.css as HSL triples, which is what the app reads. The hex codes here are for design tools.

Voice

How Haralt sounds, in three words.

Plain

Say the thing. No jargon, no filler, no exclamation marks doing the work of a good sentence.

Warm

Helpful and human. We are lending people a vacuum, not underwriting a mortgage.

Honest

Prices, timings and problems stated straight, including when the answer is inconvenient.