01
Logo
Het bestaande GMTO-woordmerk blijft ongewijzigd. Er zit al een sterk idee in: de cyaan contour, de scanlijn-vulling en de rode oscilloscooplijn die er dwars doorheen loopt. Die rode lijn is het enige element dat GMTO alleen kan gebruiken — dus daar bouwen we alles omheen.
- JAOp wit, op
#F7F5F2papier, of uitgespaard op#000E1F. - JAVrije ruimte rondom minimaal gelijk aan de hoogte van de letter O.
- JAMinimale breedte 120 px op scherm; daaronder verdwijnt de scanlijn-vulling.
- NEENooit op een foto zonder een egaal vlak eronder — de scanlijnen vallen weg.
- NEENooit de rode lijn weglaten, verkleuren of los gebruiken als decoratie in het logo zelf.
- NEENooit vervormen, kantelen of van een schaduw voorzien.
02
Kleur
Vijf merkkleuren, rechtstreeks uit het logo gemonsterd en uit het huidige thema. Daarnaast semantische tokens, zodat een ontwikkelaar nooit hoeft te gokken welk grijs bedoeld wordt.
Cyaan
--cyan
Merkkleur. Vlakken, grote display-tekst, lijnen en focusringen. Op wit niet voor lopende tekst.
Inktblauw
--ink
Tekst, donkere vlakken, voettekst. De werkkleur van het merk.
Signaalrood
--red
Uitsluitend het signaalmotief en labels. Nooit als knopkleur — rood betekent hier meting, geen fout.
Dieper blauw
--link
Links en lopende tekst op wit, waar cyaan te licht is. Links altijd onderstreept.
Groen
--green
Alleen status: bevestiging, beschikbaarheid, helpdesk online. Nooit decoratief.
Papier
--paper
Warm neutraal voor de opleidingspagina. Een expliciet token, geen “bijna wit”.
| Combinatie | Voorbeeld | Ratio | Lopende tekst | Groot / UI |
|---|---|---|---|---|
| Inkt op wit | Aa | 19,4:1 | AAA | AAA |
| Rood op wit | Aa | 4,88:1 | AA | AA |
| Dieper blauw op wit | Aa | 4,60:1 | AA | AA |
| Cyaan op inkt | Aa | 6,36:1 | AA | AA |
| Inkt op cyaan | Aa | 6,36:1 | AA | AA |
| Cyaan op wit | Aa | 3,05:1 | Valt af | AA vanaf 24 px |
| Wit op cyaan | Aa | 3,05:1 | Valt af | Niet gebruiken |
De belangrijkste regel van dit document: een cyaan knop krijgt inktblauwe tekst, geen witte. Dat is het verschil tussen 6,36:1 en 3,05:1 — tussen leesbaar en niet.
03
Typografie
Twee letterfamilies, meer niet. Archivo voor alles wat schreeuwt — het houdt de smalle, industriële toon van het huidige Oswald vast, maar met een variabele breedte-as. Inter Tight voor alles wat gelezen wordt. Op de diagnosepagina komt daar IBM Plex Mono bij, uitsluitend voor meetwaarden.
Opleidingen voor uw werkplaats
Vakmanschap begint bij weten waarom
Scope Gebruik & Diagnose
De problematiek van vandaag, de oplossing voor morgen.
Onze technisch specialisten hebben beschikking over de GMTO-storingsdatabase, originele documentatie en, misschien wel het belangrijkste, de ervaring van elkaar.
Lopende tekst nooit onder 16 px. Regellengte maximaal 66 tekens. Koppen staan altijd dichter bij hun eigen sectie dan bij de vorige.
04
Het signaal
Het motief uit het logo, doorgetrokken naar de hele site. Dit is wat het merk onmiskenbaar maakt: geen enkele concurrent kan deze lijn gebruiken. Vier toepassingen, verder niets — zodra het overal opduikt, betekent het niets meer.
A · Sectiescheiding
Volle breedte tussen twee secties. Eén keer per scherm, nooit twee.
B · Rij-hover
Beweeg hierover — het signaal komt links tevoorschijn
Rode markering links bij hover en focus. Vervangt de klassieke kaartschaduw.
C · Processtappen
Meetpunten op een tijdas. Voor stap-voor-stap-verhalen zoals storing naar oplossing.
D · Interactief meetbeeld
Alleen op de diagnosepagina, en alleen náást tekst — nooit erachter.
05
Ruimte & raster
Eén schaal, 12 kolommen, 1320 px maximum. Alles wat ertussen valt, valt op.
Sectiepadding schaalt mee met het scherm:
clamp(48px, 6vw, 104px). Geen vaste breekpunten
voor tekst — die schaalt vloeiend van 360 tot 1440 px.
06
Componenten
De bouwstenen die op alle drie de toepassingen terugkomen. Rechte hoeken, geen slagschaduwen: als je alle schaduwen weghaalt, mag er niets veranderen.
Knoppen
Hoogte 52 px · raakvlak ≥44 px
Primair = cyaan vlak met inktblauwe tekst
Eén primaire knop per sectie
Resultaatregel
Geen kaart. Een regel met uitlijnbare kolommen,
zodat twintig trainingen naast elkaar te lezen zijn.
Filter-chip & normlabel
Actief filter is altijd zichtbaar én verwijderbaar.
Normlabels zijn feiten, geen versiering.
Focus
2 px cyaan ring, 2 px offset.
Het standaard browserblauw verdwijnt op navy — daarom een eigen ring.
07
Toegankelijkheid
Geen bijlage achteraf. Dit staat in het systeem, dus het staat er ook in de code.
- 01Lopende tekst minimaal 4,5:1. Cyaan op wit haalt dat niet en wordt daar dus nooit tekstkleur.
- 02Raakvlakken minimaal 44×44 px. Ook in de filterkolom en de utility-balk.
- 03Zichtbaar label bij elk veld. Een placeholder is geen label; die verdwijnt zodra er getypt wordt.
- 04Volledig met toetsenbord te bedienen. Megamenu open met Enter, dicht met Escape, focus keert terug naar de knop.
- 05Resultaataantal in een live region. Wie filtert met een schermlezer hoort hoeveel trainingen overblijven.
- 06
prefers-reduced-motionwordt gerespecteerd. Alle beweging, inclusief het meetbeeld, staat dan stil. - 07Beschrijvende alt-teksten. “GMTO-technicus stelt met een labscope diagnose”, niet “foto1.jpg”.