# Brand — Skillmigo

Zo klinkt en zo ziet Skillmigo eruit. Voor iedereen die iets maakt met het merk: tekst, ontwerp of code.

- https://skillmigo.com/brand/
- [brand.md](https://skillmigo.com/brand.md): Alles op deze pagina als Markdown, met de volledige tone of voice.
- [tokens.json](https://skillmigo.com/brand/tokens.json): Design tokens als JSON (DTCG-formaat), ook om in Figma te importeren.

## Voor AI en code

Deze pagina is er ook voor AI-agents en ontwikkelaars. Alles staat ook in een bestand.

### 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.

## 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.

### Meer info

**Downloads**

| Bestand | SVG | PNG |
| --- | --- | --- |
| Migo zwaait | [SVG](https://skillmigo.com/_astro/migo-welkom.p4RJLfWG.svg) | [PNG](https://skillmigo.com/_astro/migo-welkom.DbKeDrmQ.png) |
| App-icoon | [SVG](https://skillmigo.com/_astro/skillmigo-app-icon.BeE2FGgT.svg) | [PNG](https://skillmigo.com/_astro/skillmigo-app-icon.DR9v7TCo.png) |
| App-icoon, afgerond | [SVG](https://skillmigo.com/_astro/skillmigo-app-icon-rounded.De_FM4eX.svg) | [PNG](https://skillmigo.com/_astro/skillmigo-app-icon-rounded.C_NYJZQZ.png) |

## Tone of voice

How Skillmigo sounds in every text: the site, the app, emails and notifications. Read this before you write or change user-facing text. The short version is on [`/brand`](https://skillmigo.com/brand/), in the section "Zo klinkt Skillmigo". [`/brand.md`](https://skillmigo.com/brand.md) includes this whole file for AI agents.

Status: first version, based on the voice of the Vakklik prototype and adapted for all trades. Mark and Barry approve changes.

### In one line

> Nieuwsgierig, helder en aanmoedigend. We helpen iemand één stap verder.

Curious, clear and encouraging. We help someone one step further.

### Principles

#### 1. Nodig uit (invite)

**Rule:** make starting small. Talk to the reader directly, with `je`, never `u`.

> Probeer maar. Je hoeft het nog niet te kunnen.

> Nog nooit een stopcontact aangesloten? Dan begin je hier.

#### 2. Maak het duidelijk (make it clear)

**Rule:** say what happens and why, in ordinary words. Explain a trade word the first time you use it.

> De hoofdkraan is dicht. Nu kun je de leiding veilig losdraaien.

> De kring is gesloten. Nu kan er stroom lopen.

#### 3. Laat groei voelen (let growth show)

**Rule:** name what someone now understands. Leave room for a mistake: a wrong answer is a step, not a failure.

> Nu snap je waarom een muur in het lood moet. Op naar de volgende stap.

> Bijna. Laat de motor eerst afkoelen, dan pas mag de dop van het koelsysteem eraf. Nog een keer?

### Other languages

**Rule:** one brand, more languages ("Eén merk. Meerdere talen."). Write naturally in each language: meaning and feeling go before a literal translation. "Skillmigo" and "Migo" stay the same in every language.

### Avoid

- A trade word without an explanation the first time.
- Blame after a mistake, such as "Fout!" or "Dat had je moeten weten."
- More than one exclamation mark, or one in every sentence.
- Long sentences. One idea per sentence.

## Logo

Een rustig woordmerk in Nunito, met Migo als herkenningspunt.

### Gebruik

- Op donker: het witte logo.
- Op lichtblauw: het blauwe logo.
- Op wit: het blauwe of het navy logo.

### Meer info

**Downloads**

| Bestand | SVG | PNG |
| --- | --- | --- |
| Logo, blauw | [SVG](https://skillmigo.com/_astro/skillmigo-logo-blue.eih_JVHK.svg) | [PNG](https://skillmigo.com/_astro/skillmigo-logo-blue.gHdJw6dM.png) |
| Logo, wit | [SVG](https://skillmigo.com/_astro/skillmigo-logo-white.DbLJsLQL.svg) | [PNG](https://skillmigo.com/_astro/skillmigo-logo-white.Cd11Rd4Z.png) |
| Logo, navy | [SVG](https://skillmigo.com/_astro/skillmigo-logo-navy.B-XXe1Ct.svg) | [PNG](https://skillmigo.com/_astro/skillmigo-logo-navy.DSbY8r_v.png) |
| Woordmerk, blauw | [SVG](https://skillmigo.com/_astro/skillmigo-wordmark-blue.s8ERtTGK.svg) | [PNG](https://skillmigo.com/_astro/skillmigo-wordmark-blue.CiUjSTpV.png) |
| Woordmerk, wit | [SVG](https://skillmigo.com/_astro/skillmigo-wordmark-white.D4S5C9wf.svg) | [PNG](https://skillmigo.com/_astro/skillmigo-wordmark-white.D1HkBSS6.png) |
| Woordmerk, navy | [SVG](https://skillmigo.com/_astro/skillmigo-wordmark-navy.V73Unn2j.svg) | [PNG](https://skillmigo.com/_astro/skillmigo-wordmark-navy.Bl707JFY.png) |

## Kleuren

Skill Blue en Migo Teal dragen het merk. Navy en de zachte tinten geven rust.

### 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

**Kleurrollen**

| 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` |

**Contrast**

| 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` |

**Palet · Merkkleuren**

| 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` |

**Palet · Systeemkleuren**

| 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.

### 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

**Tekstgroottes**

| 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` |

**Gewichten**

| Token | Waarde |
| --- | --- |
| `--font-weight-body` | `500` |
| `--font-weight-bold` | `700` |
| `--font-weight-heading` | `800` |
| `--font-weight-logo` | `900` |

**Regelhoogtes**

| 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.

### Gebruik

- Ruimte, hoeken en lijnen komen altijd uit de schaal.
- Schaduwen zijn licht en navy getint, nooit zwart.

### Meer info

**Ruimte**

| 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` |

**Hoeken**

| 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` |

**Schaduwen**

| 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)` |

**Lijndiktes**

| Token | Waarde |
| --- | --- |
| `--stroke-0` | `0px` |
| `--stroke-1` | `1px` |
| `--stroke-2` | `2px` |
| `--stroke-3` | `3px` |
| `--stroke-4` | `4px` |

**Breedtes**

| 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.

### 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

**Onderdelen in apps/web**

| 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. |