Huisstijl voor je mockup

Plak dit blok onder je opdracht aan Claude, dan lijkt het ontwerp op VIS. Het zit ook al in de mockup-prompt onder Bouwen.

Gebruik de huisstijl van VIS Trainingen:
- Hoofdkleur warm oranje/oker (#D98A2C) als vlakkleur voor knoppen, cirkels en
  accenten, met donkere tekst (#1A1A1A) erop. Gebruik oranje niet als tekstkleur
  op wit, dat haalt het contrast niet. Voor links en accenttekst het donkerdere
  #A5671E.
- Tweede kleur paars (#6B3FA2) voor accenten, ook bruikbaar als tekst.
- Zwarte tekst (#1A1A1A) op veel wit, eventueel een grijsgroen vlak (#3F4A45)
  met witte tekst voor een donkere sectie.
- Lettertype: een lichte, ronde schreefloze sans zoals Quicksand of Poppins,
  met dunne, grote koppen.
- Vormtaal: rond en organisch. Ronde knoppen, cirkels en zachte
  tekstballon-vormen. Geen scherpe hoeken.
- Sfeer: informeel, warm en nuchter, met een knipoog.
- WCAG 2.1 AA op alle tekst: minimaal 4,5 op 1 contrast, zichtbare focus,
  bedienbaar met het toetsenbord.

De kleuren

Klik op een code om hem te kopiëren.

• warm oranje, oker #D98A2C

  vlakken: knoppen, cirkels, iconen. Altijd met donkere tekst erop.

• donkere oker #A5671E

  links en tekst in de accentkleur. Donkerder dan het hoofdaccent omdat dat als tekst te weinig contrast geeft.

• paars #6B3FA2

  tweede kleur in ronde vormen en accenten. Mag ook als tekst.

• zwart #1A1A1A

  koppen en bodytekst

• wit #FFFFFF

  achtergrond en veel witruimte

• grijsgroen #3F4A45

  optioneel donker vlak met witte tekst

Het lettertype

Lichte, ronde schreefloze sans. Gebruik Quicksand, of Poppins als alternatief. Koppen groot en dun, gewicht 300 tot 400. Bodytekst rustig en goed leesbaar, gewicht 400 tot 500.

De vormtaal

Rond en organisch, niet hoekig. Witte tekstballon-vormen met een zachte punt, cirkels als knoppen en accenten, ronde iconen, vloeiende zachte vlakken. Geen scherpe hoeken.

De toon

Informeel, warm, nuchter, een tikje eigenwijs. Speelse fotografie van echte mensen. Tekst met een knipoog. Geen corporate uitstraling.

Een ding om te weten

Hex-codes zijn van de website afgelezen, dus benaderingen. De hoofdkleur haalt als tekstkleur op wit maar 2,76 op 1 en zakt daarmee onder de WCAG-norm; daarom is er een donkerdere variant toegevoegd voor tekst, en blijft het oranje uit het briefje in gebruik als vlakkleur. Wit op oranje faalt eveneens, gebruik daar donkere tekst.