[{"data":1,"prerenderedAt":476},["ShallowReactive",2],{"page:\u002Fidentity\u002Fcolor":3},{"id":4,"title":5,"body":6,"description":468,"extension":469,"meta":470,"navigation":471,"path":472,"seo":473,"stem":474,"__hash__":475},"pages\u002Fidentity\u002Fcolor.md","Kleur",{"type":7,"value":8,"toc":456},"minimark",[9,14,18,46,50,112,122,125,139,171,175,266,273,278,281,301,310,324,328,449],[10,11,13],"h2",{"id":12},"het-idee","Het idee",[15,16,17],"p",{},"Het product is neutraal: wit en nacht, met grijzen. Kleur heeft een betekenis:",[19,20,21,34,40],"ul",{},[22,23,24,28,29,33],"li",{},[25,26,27],"strong",{},"Koraal"," betekent ",[30,31,32],"em",{},"bekend",", of het merk. De stip naast wat we weten, het logo. Niets anders.",[22,35,36,39],{},[25,37,38],{},"Het verloop"," is het merk, en alleen in merkvlakken.",[22,41,42,45],{},[25,43,44],{},"Statuskleuren"," zeggen of iets gelukt is, aandacht vraagt of misging.",[10,47,49],{"id":48},"merkkleuren","Merkkleuren",[51,52,53,69],"table",{},[54,55,56],"thead",{},[57,58,59,63,66],"tr",{},[60,61,62],"th",{},"Naam",[60,64,65],{},"Hex",[60,67,68],{},"Waar",[70,71,72,87,100],"tbody",{},[57,73,74,78,84],{},[75,76,77],"td",{},"Nacht",[75,79,80],{},[81,82,83],"code",{},"#08090D",[75,85,86],{},"Donkere achtergrond, de primaire knop op licht",[57,88,89,92,97],{},[75,90,91],{},"Wit",[75,93,94],{},[81,95,96],{},"#FFFFFF",[75,98,99],{},"Lichte achtergrond, de primaire knop op donker",[57,101,102,104,109],{},[75,103,27],{},[75,105,106],{},[81,107,108],{},"#FF5A36",[75,110,111],{},"Het logo en de stip: bekend",[15,113,114,115,117,118,121],{},"Koraal ",[81,116,108],{}," haalt op wit 3,1:1: genoeg voor een stip of vlak, niet voor tekst. Koraal is daarom ",[25,119,120],{},"nooit tekst",", ook niet in een donkerdere tint. Wat we weten, laat de stip zien; de waarde zelf staat in de tekstkleur.",[10,123,38],{"id":124},"het-verloop",[15,126,127,128,131,132,134,135,138],{},"Eén warme familie: ",[81,129,130],{},"#FFB020"," amber → ",[81,133,108],{}," koraal → ",[81,136,137],{},"#C2283A"," dieprood.",[19,140,141,147,153,159],{},[22,142,143,146],{},[25,144,145],{},"Op de site:"," als zachte hoek rechtsboven in de lichte header, met de kop op wit.",[22,148,149,152],{},[25,150,151],{},"Als textuur:"," de stippen van de kaart van Nederland, in dezelfde warme kleuren, in de afsluitende band, op social en op de deelafbeelding.",[22,154,155,158],{},[25,156,157],{},"Nooit"," in het product, in tabellen, in grafieken of achter lopende tekst.",[22,160,161,164,165,170],{},[25,162,163],{},"Het logo op het verloop:"," zie ",[166,167,169],"a",{"href":168},"\u002Fidentity\u002Flogo","Logo",".",[10,172,174],{"id":173},"status","Status",[51,176,177,192],{},[54,178,179],{},[57,180,181,184,187,190],{},[60,182,183],{},"Rol",[60,185,186],{},"Licht",[60,188,189],{},"Donker",[60,191,68],{},[70,193,194,220,241],{},[57,195,196,199,204,209],{},[75,197,198],{},"Gelukt",[75,200,201],{},[81,202,203],{},"#1F7A4D",[75,205,206],{},[81,207,208],{},"#5FD3A3",[75,210,211,212,215,216,219],{},"Opgeslagen, verzonden, ",[81,213,214],{},"200",", ",[81,217,218],{},"GET"," in de docs",[57,221,222,225,230,235],{},[75,223,224],{},"Let op",[75,226,227],{},[81,228,229],{},"#955800",[75,231,232],{},[81,233,234],{},"#F5D06B",[75,236,237,238,219],{},"Bijna aan je limiet, ",[81,239,240],{},"POST",[57,242,243,246,251,256],{},[75,244,245],{},"Fout",[75,247,248],{},[81,249,250],{},"#A61B1B",[75,252,253],{},[81,254,255],{},"#FF8A73",[75,257,258,259,262,263],{},"Iets ging mis, ",[81,260,261],{},"4xx"," en ",[81,264,265],{},"5xx",[15,267,268,269,272],{},"Een status heeft ",[25,270,271],{},"altijd een icoon en tekst",", nooit alleen een kleur.",[274,275,277],"h3",{"id":276},"status-en-het-verloop","Status en het verloop",[15,279,280],{},"Het verloop loopt van amber via koraal naar dieprood: dezelfde tinten als waarschuwen en fout. Op tint alleen houd je ze dus niet uit elkaar. Daarom drie regels:",[19,282,283,289,295],{},[22,284,285,288],{},[25,286,287],{},"Nooit op hetzelfde vlak."," Het verloop staat alleen in merkvlakken, statuskleuren alleen in het product en de docs.",[22,290,291,294],{},[25,292,293],{},"Nooit dezelfde kleur."," Een statuskleur ligt minstens ΔE 5 (OKLab) van elke merkkleur, zodat ze nooit met het merk samenvallen.",[22,296,297,300],{},[25,298,299],{},"Nooit alleen kleur."," Een status heeft een icoon en tekst.",[15,302,303,304,306,307,309],{},"Daarom is waarschuwen op donker lichtgeel ",[81,305,234],{}," en niet amber, en fout op licht ",[81,308,250],{}," en niet het dieprood van het verloop.",[15,311,312,315,316,319,320,323],{},[25,313,314],{},"Selectie"," is een neutrale tint met een rand links in de tekstkleur. ",[25,317,318],{},"Focus"," is een ring van 2px in de tekstkleur. ",[25,321,322],{},"Links"," zijn tekstkleur met een onderstreping. Koraal is nooit de kleur van een knop, link, selectie of foutmelding.",[10,325,327],{"id":326},"rollen","Rollen",[51,329,330,340],{},[54,331,332],{},[57,333,334,336,338],{},[60,335,183],{},[60,337,186],{},[60,339,189],{},[70,341,342,355,370,385,400,415,432],{},[57,343,344,347,351],{},[75,345,346],{},"bg",[75,348,349],{},[81,350,96],{},[75,352,353],{},[81,354,83],{},[57,356,357,360,365],{},[75,358,359],{},"surface",[75,361,362],{},[81,363,364],{},"#FBFBFD",[75,366,367],{},[81,368,369],{},"#0E0F15",[57,371,372,375,380],{},[75,373,374],{},"surface-high",[75,376,377],{},[81,378,379],{},"#EFEEF5",[75,381,382],{},[81,383,384],{},"#1B1D27",[57,386,387,390,395],{},[75,388,389],{},"border",[75,391,392],{},[81,393,394],{},"#E7E6EE",[75,396,397],{},[81,398,399],{},"#22242F",[57,401,402,405,410],{},[75,403,404],{},"border-strong",[75,406,407],{},[81,408,409],{},"#8A8C9B",[75,411,412],{},[81,413,414],{},"#5D6070",[57,416,417,420,426],{},[75,418,419],{},"text",[75,421,422,425],{},[81,423,424],{},"#0D0E14"," (19,3:1)",[75,427,428,431],{},[81,429,430],{},"#F4F4F8"," (18,1:1)",[57,433,434,437,443],{},[75,435,436],{},"muted",[75,438,439,442],{},[81,440,441],{},"#5F6273"," (6,0:1)",[75,444,445,448],{},[81,446,447],{},"#9A9CAB"," (7,3:1)",[15,450,451,452,170],{},"De tokens zelf staan op ",[166,453,455],{"href":454},"\u002Fdesign-system\u002Ftokens","Tokens",{"title":457,"searchDepth":458,"depth":458,"links":459},"",2,[460,461,462,463,467],{"id":12,"depth":458,"text":13},{"id":48,"depth":458,"text":49},{"id":124,"depth":458,"text":38},{"id":173,"depth":458,"text":174,"children":464},[465],{"id":276,"depth":466,"text":277},3,{"id":326,"depth":458,"text":327},"Het palet en hoe je het gebruikt.","md",{},true,"\u002Fidentity\u002Fcolor",{"title":5,"description":468},"identity\u002Fcolor","r072r7ppWAaEZC1Mi_ZVU0rESOcFXtZtHAK21w6v4Fs",1793469356626]