Brand
Zo klinkt en zo ziet Skillmigo eruit. Voor iedereen die iets maakt met het merk: tekst, ontwerp of code.
Ben je een AI-agent of bouw je iets?Lees alles als MarkdownDesign tokens als JSON
Migo
Migo is je maatje in de wereld van techniek. Hij moedigt aan en maakt leren lichter.
Gebruik
- Migo moedigt aan, ook na een fout. Hij lacht niemand uit.
- Migo is ook het app-icoon. Hij blijft herkenbaar tot 32 px.
Zo klinkt Skillmigo
Nieuwsgierig, helder en aanmoedigend. We helpen iemand één stap verder.
Nodig uit
Maak beginnen klein. Spreek de lezer direct aan, met je en nooit met u.
Probeer maar. Je hoeft het nog niet te kunnen.
Maak het duidelijk
Zeg wat er gebeurt en waarom, in gewone woorden. Leg een vakwoord uit als het voor het eerst langskomt.
De hoofdkraan is dicht. Nu kun je de leiding veilig losdraaien.
Laat groei voelen
Benoem wat iemand nu snapt. Laat ruimte voor een fout: een fout antwoord is een stap, geen mislukking.
Nu snap je waarom een muur in het lood moet. Op naar de volgende stap.
Eén merk. Meerdere talen.
Schrijf in elke taal natuurlijk: betekenis en gevoel gaan voor een letterlijke vertaling. Skillmigo en Migo blijven in elke taal hetzelfde.
Meer info
De volledige tone of voice, met meer voorbeelden per vak, staat in /brand.md.
Logo
Een rustig woordmerk in Nunito, met Migo als herkenningspunt.
Logo, blauw 
Logo, wit 
Logo, navy 
Woordmerk, blauw 
Woordmerk, wit 
Woordmerk, navy
Gebruik
- Op donker: het witte logo.
- Op lichtblauw: het blauwe logo.
- Op wit: het blauwe of het navy logo.
Kleuren
Skill Blue en Migo Teal dragen het merk. Navy en de zachte tinten geven rust.
Merkkleuren
- Skill Blue
#0065F4 - Migo Teal
#00B9A4 - Deep Navy
#0E2C4F - Dark Navy
#0A1632 - Blue Grey
#D2DFED - Blue Grey (dark)
#5B7DA5 - Soft Teal
#E0FAF4 - Soft Blue
#E6F2FF - Off-white
#F1F2F3 - White
#FFFFFF
Systeemkleuren
Voor status en feedback, waar geen merkkleur genoeg contrast heeft.
- Deep Blue
#054AABVoorstel - Slate
#4A6380 - Mist
#A9BCD3 - Steel
#7996B7Voorstel - Sky Blue
#6FA8FF - Deep Teal
#00796B - Dim Teal
#A8DDD3 - Red
#C4320A - Soft Red
#FDECE8 - Coral
#FF8A70 - Dim Red
#EBB8AC - Amber
#9A5B00 - Soft Amber
#FFF4D6 - Sun
#FFC857 - Dim Amber
#E9D29A - Heart
#E8344F
Voorstel: deze kleur vult een gat in de brandkit en wacht nog op bevestiging.
Gebruik
- Gebruik een kleurrol, geen losse kleur. Een rol kiest zelf de kleur voor licht en donker.
- Systeemkleuren zijn alleen voor status en feedback, nooit voor het merk zelf.
- Gewone tekst heeft minstens 4,5:1 contrast nodig. Grote of vette tekst minstens 3:1.
Meer info
| Rol | Licht | Donker |
|---|---|---|
--color-background | White #FFFFFF | Dark Navy #0A1632 |
--color-background-calm | Off-white #F1F2F3 | Deep Navy #0E2C4F |
--color-surface | Soft Blue #E6F2FF | Deep Navy #0E2C4F |
--color-text | Deep Navy #0E2C4F | White #FFFFFF |
--color-text-muted | Slate #4A6380 | Mist #A9BCD3 |
--color-text-brand | Skill Blue #0065F4 | Sky Blue #6FA8FF |
--color-text-brand-on-surface | Deep Blue #054AAB | Sky Blue #6FA8FF |
--color-primary | Skill Blue #0065F4 | Skill Blue #0065F4 |
--color-primary-edge | Deep Blue #054AAB | Deep Blue #054AAB |
--color-on-primary | White #FFFFFF | White #FFFFFF |
--color-link | Skill Blue #0065F4 | Sky Blue #6FA8FF |
--color-accent | Migo Teal #00B9A4 | Migo Teal #00B9A4 |
--color-on-accent | Deep Navy #0E2C4F | Deep Navy #0E2C4F |
--color-border | Blue Grey #D2DFED | Blue Grey (dark) #5B7DA5 |
--color-border-control | Steel #7996B7 | Blue Grey (dark) #5B7DA5 |
--color-positive | Deep Teal #00796B | Migo Teal #00B9A4 |
--color-positive-surface | Soft Teal #E0FAF4 | Dim Teal #A8DDD3 |
--color-on-positive-surface | Deep Navy #0E2C4F | Deep Navy #0E2C4F |
--color-negative | Red #C4320A | Coral #FF8A70 |
--color-negative-surface | Soft Red #FDECE8 | Dim Red #EBB8AC |
--color-on-negative-surface | Red #C4320A | Deep Navy #0E2C4F |
--color-warning | Amber #9A5B00 | Sun #FFC857 |
--color-warning-surface | Soft Amber #FFF4D6 | Dim Amber #E9D29A |
--color-on-warning-surface | Amber #9A5B00 | Deep Navy #0E2C4F |
--color-health | Heart #E8344F | Heart #E8344F |
--color-glow | Sun #FFC857 | Sun #FFC857 |
| Tekst op achtergrond | Licht | Donker |
|---|---|---|
text / background | 14.08:1 AA | 17.89:1 AA |
text-muted / background | 6.20:1 AA | 9.22:1 AA |
text-brand / background | 5.04:1 AA | 7.43:1 AA |
link / background | 5.04:1 AA | 7.43:1 AA |
text / surface | 12.41:1 AA | 14.08:1 AA |
text-muted / surface | 5.46:1 AA | 7.25:1 AA |
text-brand-on-surface / surface | 7.19:1 AA | 5.85:1 AA |
on-primary / primary | 5.04:1 AA | 5.04:1 AA |
on-accent / accent | 5.68:1 AA | 5.68:1 AA |
positive / background | 5.32:1 AA | 7.22:1 AA |
on-positive-surface / positive-surface | 12.84:1 AA | 9.35:1 AA |
negative / background | 5.52:1 AA | 7.77:1 AA |
on-negative-surface / negative-surface | 4.82:1 AA | 8.03:1 AA |
warning / background | 5.43:1 AA | 11.63:1 AA |
on-warning-surface / warning-surface | 4.95:1 AA | 9.48:1 AA |
| Token | Naam |
|---|---|
--brand-skill-blue | Skill Blue #0065F4 |
--brand-migo-teal | Migo Teal #00B9A4 |
--brand-deep-navy | Deep Navy #0E2C4F |
--brand-dark-navy | Dark Navy #0A1632 |
--brand-blue-grey-light | Blue Grey #D2DFED |
--brand-blue-grey-dark | Blue Grey (dark) #5B7DA5 |
--brand-soft-teal | Soft Teal #E0FAF4 |
--brand-soft-blue | Soft Blue #E6F2FF |
--brand-off-white | Off-white #F1F2F3 |
--brand-white | White #FFFFFF |
| Token | Naam |
|---|---|
--system-deep-blue | Deep Blue #054AAB |
--system-slate | Slate #4A6380 |
--system-mist | Mist #A9BCD3 |
--system-steel | Steel #7996B7 |
--system-sky-blue | Sky Blue #6FA8FF |
--system-deep-teal | Deep Teal #00796B |
--system-dim-teal | Dim Teal #A8DDD3 |
--system-red | Red #C4320A |
--system-soft-red | Soft Red #FDECE8 |
--system-coral | Coral #FF8A70 |
--system-dim-red | Dim Red #EBB8AC |
--system-amber | Amber #9A5B00 |
--system-soft-amber | Soft Amber #FFF4D6 |
--system-sun | Sun #FFC857 |
--system-dim-amber | Dim Amber #E9D29A |
--system-heart | Heart #E8344F |
Typografie
Eén lettertype: Nunito, in drie gewichten.
- Logo · 900
- skillmigo
- Titels · 800
- Leer elke dag een stukje meer.
- Lopende tekst · 500
- Leer elke dag een stukje meer.
Gebruik
- Titels in 800, lopende tekst in 500.
- Gewicht 900 is alleen voor het logo.
- Kies een maat uit de schaal, nooit een eigen maat.
Meer info
| Token | Waarde |
|---|---|
--font-size-xs | 0.75rem · 12 px |
--font-size-sm | 0.875rem · 14 px |
--font-size-md | 1rem · 16 px |
--font-size-lg | 1.125rem · 18 px |
--font-size-xl | 1.25rem · 20 px |
--font-size-2xl | 1.5rem · 24 px |
--font-size-3xl | 1.875rem · 30 px |
--font-size-4xl | 2.25rem · 36 px |
--font-size-5xl | 3rem · 48 px |
--font-size-6xl | 3.75rem · 60 px |
--font-size-7xl | 4.5rem · 72 px |
| Token | Waarde |
|---|---|
--font-weight-body | 500 |
--font-weight-bold | 700 |
--font-weight-heading | 800 |
--font-weight-logo | 900 |
| Token | Waarde |
|---|---|
--line-height-display | 0.9 |
--line-height-tight | 1.1 |
--line-height-snug | 1.3 |
--line-height-normal | 1.5 |
Ruimte en vormen
Zachte hoeken, lichte schaduwen en genoeg ruimte.
- 0
- 2
- 4
- 8
- 12
- 16
- 24
- full
- sm
- md
- lg
Gebruik
- Ruimte, hoeken en lijnen komen altijd uit de schaal.
- Schaduwen zijn licht en navy getint, nooit zwart.
Meer info
| Token | Waarde |
|---|---|
--space-0 | 0rem · 0 px |
--space-4 | 0.25rem · 4 px |
--space-8 | 0.5rem · 8 px |
--space-12 | 0.75rem · 12 px |
--space-16 | 1rem · 16 px |
--space-24 | 1.5rem · 24 px |
--space-32 | 2rem · 32 px |
--space-48 | 3rem · 48 px |
--space-64 | 4rem · 64 px |
--space-96 | 6rem · 96 px |
--space-128 | 8rem · 128 px |
| Token | Waarde |
|---|---|
--radius-0 | 0rem · 0 px |
--radius-2 | 0.125rem · 2 px |
--radius-4 | 0.25rem · 4 px |
--radius-8 | 0.5rem · 8 px |
--radius-12 | 0.75rem · 12 px |
--radius-16 | 1rem · 16 px |
--radius-24 | 1.5rem · 24 px |
--radius-full | 9999px |
| Token | Waarde |
|---|---|
--shadow-sm | 0 1px 2px rgb(14 44 79 / 0.08) |
--shadow-md | 0 4px 12px rgb(14 44 79 / 0.1) |
--shadow-lg | 0 12px 32px rgb(14 44 79 / 0.14) |
| Token | Waarde |
|---|---|
--stroke-0 | 0px |
--stroke-1 | 1px |
--stroke-2 | 2px |
--stroke-3 | 3px |
--stroke-4 | 4px |
| Token | Waarde |
|---|---|
--width-xxs | 20rem · 320 px |
--width-xs | 24rem · 384 px |
--width-s | 30rem · 480 px |
--width-m | 48rem · 768 px |
--width-l | 64rem · 1024 px |
--width-xl | 90rem · 1440 px |
Vormtaal
Zo voelt Skillmigo als een spel, zonder druk te worden. Deze regels komen van de homepage.
Ik ben erbij
kunnen
Gebruik
- Vooral wit, met af en toe een Skill Blue-band over de hele breedte. Wissel wit en Soft Blue af, zodat elke sectie een duidelijke rand heeft.
- Teal is alleen een accent: een vinkje, een stip of een getekende streep. Nooit een vlak of een band.
- Een dikke onderrand betekent: hier kun je op drukken. Platte kaarten zijn niet klikbaar. Meng ze nooit in één rij.
- Het spraakwolkje is Migo die praat: alleen in de hero en bij aanmelden. Andere secties krijgen een gewone eyebrow, of geen.
- Schuin staat alleen een lesvoorbeeld of een spraakwolkje, met een kleine hoek.
- Migo is Skill Blue. Op een blauwe achtergrond staat Migo in een witte cirkel.
- Blauwe tekst op Soft Blue gebruikt --color-text-brand-on-surface: Skill Blue haalt daar AA niet.
Meer info
| Onderdeel | Gebruik |
|---|---|
section | Band over de hele breedte: wit, Soft Blue of Skill Blue. |
section-header | Eyebrow, kop en intro. |
game-button | Knop met een dikke onderrand, als link of als knop. |
hand-underline | Getekende streep onder één woord van een kop. |
lesson-card | Plaatje van een les in de app. |
step-list | Genummerde stappen. |
faq | Vragen die één voor één opengaan. |
join-teaser | Aanmelden, aan het eind van elke pagina. |
Voor AI en code
Deze pagina is er ook voor AI-agents en ontwikkelaars. Alles staat ook in een bestand.
brand.mdAlles op deze pagina als Markdown, met de volledige tone of voice.tokens.jsonDesign tokens als JSON (DTCG-formaat), ook om in Figma te importeren.
Gebruik
- Gebruik in code een token, nooit een hexcode of een losse maat.
- Schrijf elke tekst in de tone of voice.
- Deze pagina is leidend.