Brand System

Design Showcase

Kleuren, typografie, componenten en gradients voor de KOLI landingpage.

1 — Kleurenpalet

Primary — Signal Navy

Donker #0B1B3A
Standaard #102A56
Licht #2A4A7C

Secondary 1 — Tech Teal

Donker #0B6B66
Standaard #0FA39A
Licht #7ADBD3

Secondary 2 — Digital Violet

Donker #3A1D78
Standaard #5B38B5
Licht #B8A7F2

Secondary 3 — Steel Blue

Donker #1E3A5F
Standaard #2F5D9B
Licht #8FB2DD

Accent CTA — Conversion Amber

Donker #B45309
Standaard #F59E0B
Licht #FDE68A

2 — Neutrale basis

Background / page #F8FAFC Standaard page-bg
Surface / cards #FFFFFF Cards, forms
Text primary #0B1220 Body tekst op licht
Text secondary #334155 Subcopy, labels
Muted / borders #E2E8F0 Dividers, card borders
Muted bg #F1F5F9 Section alternation
On-dark→
On-dark text #F8FAFC Tekst op navy/violet
Disabled #94A3B8 Disabled / placeholders

3 — Gradients

Hero / premium tech 135deg, #0B1B3A → #102A56 → #5B38B5
Section highlight / data & growth 135deg, #0FA39A → #7ADBD3 → #FDE68A

4 — Typografie

Space Grotesk 700 — H1

Schaal je groei met marketing én techniek die wél samenwerkt.

Space Grotesk 600 — H2

Van strategie tot implementatie: meetbare ROI voor SaaS & e-commerce.

Space Grotesk 600 — H3

Growth Marketing · Engineering · Strategy & Ops

Inter 400 — Body

Wij combineren data-gedreven marketing met technische implementatie om predictable, schaalbare groei te realiseren. Geen losse schakels, maar één team dat levert.

Inter 500 — Subcopy / muted

Labels, timestamps, meta-informatie en bijschriften worden in deze stijl weergegeven.

Space Grotesk 600 — Eyebrow

Onze diensten

5 — Buttons & interactie

Op licht achtergrond

Op donker achtergrond

Focus ring (tab om te zien)

6 — Gebruiksscenario's

Hero

B2B Growth Agency

Schaal je groei met marketing én techniek die wél samenwerkt.

Van strategie tot implementatie: meetbare ROI voor SaaS & e-commerce.

Trust strip

Vertrouwd door groeiende B2B en e-commerce teams

Client A
Client B
Client C
Client D
Client E

"De combinatie van marketing en engineering heeft ons CAC met 18% verlaagd terwijl onze ROAS met 32% steeg."

— CMO, SaaS-bedrijf

Diensten-cards

Growth Marketing

Paid, SEO, CRO en e-mail geïntegreerd in één meetbaar groeisysteem.

Meer informatie →

Tech & Engineering

Tracking, data-infra, API-integraties en schaalbare frontend-builds.

Meer informatie →

Strategy & Ops

Roadmaps, OKR-frameworks en cross-functionele afstemming.

Meer informatie →

Case study card

+32% ROAS E-commerce

Hoe een D2C-merk zijn advertentie-efficiëntie verdubbelde

Door paid media en server-side tracking samen te brengen reduceerden we attribution-verlies met 40%.

+32% ROAS
-18% CAC
×2.4 Conversie
Lees case study

Footer

7 — WCAG contrast

Combinatie Toepassing AA (4.5:1) AAA (7:1) Noot
#0B1220 op #F8FAFC Body tekst Ja Ja
#334155 op #F8FAFC Subcopy Ja Vaak ja Bij twijfel: gebruik #0B1220
#F8FAFC op #0B1B3A Hero / footer Ja Ja
#F8FAFC op #5B38B5 Badges Ja Vaak ja
#0B1B3A op #F59E0B CTA tekst op amber Ja Vaak ja Zorg voor voldoende font-weight
#FFFFFF op #F59E0B Wit op amber Soms nee Nee Gebruik navy tekst (#0B1B3A)
#0FA39A op #FFFFFF Teal tekst op wit Soms nee Nee Gebruik voor iconen/accents; body: #0B6B66
#94A3B8 op #FFFFFF Disabled Nee Nee Alleen disabled/placeholder, niet informatief

8 — Icoon stijlen

Stroke-based op 1.75–2px. Kies één kleur per set; nooit mixen op dezelfde pagina.

Teal — Growth
Violet — Tech
Steel Blue — Strategy
Amber — CTA acties

Icon-background pills (20–30% opacity fill):

9 — Grafiek-kleurenschema

Primary line — Teal #0FA39A
Secondary — Violet #5B38B5
Benchmark — Steel Blue #2F5D9B
Highlight — Amber #F59E0B
Q1
Q2
Q3
Q4

10 — Merkrationale

Dit palet combineert navy (vertrouwen/autoriteit) met teal en violet (innovatie en technologie), terwijl amber conversie-elementen helder markeert zonder de professionele B2B-uitstraling te breken.

01

Section spacing: 80–120px vertical (desktop), 48–72px (mobile); card gaps 16–24px.

02

Overlays op hero-beelden: navy overlay rgba(11,27,58,0.72); bij druk beeld 0.80.

03

Opacity-regels: muted tekst 70–85%; borders 8–14% op dark achtergronden.

04

CTA consistentie: amber is exclusief voor primaire acties; teal/violet nooit als primaire knop.

05

Icon fill vs stroke: kies één stijl per pagina; aanbevolen: stroke + beperkte accentfills (max 10–15%).

06

Image filter: lichte "cool" grading: saturation −5% tot −10%, contrast +5%; vermijd warme/oranje cast.