IFKD Platform · Design concept

Typografie & kleur

Basis voor alle schermen: lettertypes, typeschaal en het kleurenpalet.

Concept v0.1

Lettertypes

Poppins geeft koppen het karakter van de IFKD-huisstijl. Inter is gebouwd voor schermen en blijft leesbaar in drukke tabellen en formulieren, met cijfers van gelijke breedte voor scores en aantallen.

Koppen · Poppins
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 â ê ô û ú

500 · 600 · 700 · 800 — koppen, edities, knoppen in de huisstijl

Tekst & interface · Inter
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 € , . : ( )

400 · 500 · 600 · 700 — lopende tekst, labels, tabellen, invoer

In het concept komen de fonts van Google Fonts. In productie hosten we ze zelf, omdat het laden via Google IP-adressen doorgeeft (AVG).

Typeschaal

Een beperkte schaal houdt de beheeromgeving rustig. Basisgrootte is 15px, en tabellen gebruiken 14px.

DisplayPoppins 800 · 52/55

Winter 2027

H1 · PaginatitelPoppins 700 · 32/38

Deelnames Winter 2027

H2 · SectiePoppins 600 · 24/30

Teams en dansers

H3 · KaarttitelPoppins 600 · 20/26

Controlelijst

H4 · SubkopPoppins 600 · 17/23

Muziek ontbreekt

LeadInter 400 · 17/27

Schrijf je teams in voor Winter, Lente en de Zomerfinale, allemaal vanuit één account.

BodyInter 400 · 15/23

Je kunt de teamnaam, het aantal dansers en de muziek aanpassen tot de deadline van de editie. Antwoorden voor de levelbepaling wijzig je via IFKD.

Small / hintInter 400 · 13/19

Gebruik het formaat dd-mm-jjjj, bijvoorbeeld 14-03-2012.

OverlinePoppins 600 · 12 · caps

Seizoen 2027 · Winter

CijfersInter 700 · tabular

€ 1.250,00   27,50   3:05

Kleur

Pruim (#8E1049) is de merkkleur voor de zijbalk, primaire knoppen en focus. Teal en amber uit de IFKD-site zijn accenten. Statuskleuren staan los van de merkkleur, zodat een waarschuwing nooit op een merkaccent lijkt.

Merk

Aa
Pruim · primary#8E1049
Zijbalk, primaire knop, links, focus
Aa
Pruim donker#6B0C3B
Hover, actief menu-item
Aa
Pruim tint#F7E7EF
Geselecteerde rij, secundaire knop
Aa
Teal · accent#4CBAB6
Grafieken, highlights (geen tekst op wit)
Aa
Amber · accent#F9B233
Tellers, aandacht, call-to-action op donker

Pruim schaal

50
100
200
300
500
600 ★
700
800
900
950

Status

Betaald
Succes#1F7A4D / #E2F2E9
Betaald, geaccepteerd, aanwezig
Te beoordelen
Waarschuwing#7A4C00 / #FEF2D9
Signaal; IFKD beslist
Ontbreekt
Fout#C03221 / #FBE6E3
Blokkeert, na deadline
Wachtlijst
Info#1D6E6A / #E2F4F3
Wachtlijst, concept, uitleg

Neutraal

25
50
100
200
300
400
500
600
800
900

Contrast: wit op pruim is ongeveer 9:1 (AAA). Teal en amber halen op wit geen AA voor tekst, dus die gebruiken we alleen als vlak of met donkere tekst erop.