FRAAI
Brand Guide

2026 · fraai.agency

01 — The mark

Beeldmerk

Primary · dark backgrounds
Reversed · light backgrounds
Strong · blue backgrounds
Beeldmerk + wordmark: always pair the F mark with the FRAAI wordmark in Pangram Sans. Keep a minimum clear space of 1× the mark height on all sides. Never distort, rotate, recolour, or place the mark on a patterned background.
02 — Colour system

Palette

Ink
#1A1A1C · RGB 26 26 28
Authority base. Headlines, footers, primary text.
Brand Blue
#3D52D5 · RGB 61 82 213
Primary brand accent. CTAs, links, marks, highlights.
Cream
#F4F3EF · RGB 244 243 239
Warm page surface. Section backgrounds, cards.
Terra
#EA9571 · RGB 234 149 113
Human warmth accent. Illustrations, callouts, team.
Blue Light
#7B92E8
Blue Tint
#C5CDF5
03 — Typography

Pangram Sans

Online oplossingen
die presteren.
Display Pangram Sans · 700 · −3% tracking
Foundry pangrampangram.com
Web substitute Space Grotesk (Google Fonts)
Display
64px / 700 / −3%
Fraai
H1
40px / 700 / −2%
Werkt echt.
H2
28px / 700 / −1.5%
Services & Cases
H3
20px / 600 / −1%
Digitale strategie
Body
16px / 400 / 0%
Wij bouwen websites die presteren.
Small
14px / 400 / 0%
Aalst · fraai.agency · Frederik & Stefanie
Label
11px / 600 / +12% · UC
01 — the mark
04 — Baseline

Tagline

Built to perform.
Aanbevolen
Digital that works.
Alternatief
Your digital partner.
Alternatief

"Built to perform." is the recommended baseline. Short, confident, and measurable — it replaces "Creative Web Studio" and aligns with the performance-first brand pillar. Use in combination with the F mark or full FRAAI wordmark. Never shrink the baseline below 12px in any application.

05 — Voice & tone

Hoe Fraai klinkt

Confident
State results and capabilities directly. No hedging or qualifiers. Own the claim.
Wij bouwen websites die presteren.
Wij proberen websites te leveren die zo goed mogelijk presteren.
Direct
Short sentences. No agency jargon. Say exactly what you mean in the simplest terms.
Snel, veilig, en klaar binnen budget.
Wij bieden een holistische, synergetische aanpak voor uw digitale transformatie.
Warm
First names, real stories, genuine care. Never corporate-cold. You are still you — just louder.
Frederik en Stefanie staan zelf garant voor het resultaat.
Ons toegewijd team van experts begeleidt u door het volledige proces.
Witty
Occasional dry humour is a Fraai signature. Use it sparingly — one well-placed line beats five forced ones.
Onze website laadt zo snel dat bezoekers niet eens van tabblad wisselen.
Wij zijn trots op onze vliegensvlugge laadtijden en state-of-the-art technologie.
06 — Usage

Do's & don'ts

Do
Use the F beeldmerk and FRAAI wordmark together
Use Ink or Blue as primary text colours
Lead with results — use real metrics in copy
Keep type scale consistent; use section labels in uppercase
Show Colruyt, DPG Media and mateco logos high on the page
Use Terra sparingly as a warm, human accent
Write in sentence case, always
Don't
Don't place the mark on patterned or low-contrast backgrounds
Don't use the old green mark as a primary colour variant
Don't use "Creative Web Studio" — that baseline is retired
Don't use more than 2 font weights on a single page section
Don't use agency jargon: holistic, synergy, transformatie
Don't use Terra as a background colour — accent only
Don't use ALL CAPS for body text or headings
07 — Logo Do's & Don'ts

Correct mark usage

Do
Use the primary blue mark on light or white backgrounds with sufficient contrast.
Don't
Never rotate, skew, or distort the mark in any way. Keep it upright and proportioned.
Don't
Never place the transparent/reversed mark on busy or patterned backgrounds.
08 — Photography

Imagery direction

High contrast,
dynamic angles.
Team & Culture: Authentic, unstaged moments. High contrast, sharp focus, with slight cool undertones. Avoid generic stock smiles.
Clean mockups,
breathing room.
Work & Cases: Showcase digital products on clean, neutral backgrounds (Cream or white). Allow generous padding around devices.
09 — UI Elements

Component styles

Buttons

Buttons have a height of 48px, an 8px border radius, and use 14px Semibold type.

Form Inputs

Inputs match button heights. They use a 1px border that turns Brand Blue on focus.