{
  "name": "IJsfontein Huisstijl",
  "version": 1,
  "color": {
    "themes": [
      { "id": "light", "name": "Licht" },
      { "id": "dark", "name": "Donker (voorstel)" }
    ],
    "tokens": [
      { "name": "surface", "value": { "light": "#ecf1f2", "dark": "#16202e" }, "usage": "Achtergrond van slides en pagina's. Licht = huisstijlkleur #ECF1F2; donker is een voorstel, niet uit de huisstijl." },
      { "name": "surface-raised", "value": { "light": "#ffffff", "dark": "#1f2b3d" }, "usage": "Kaarten, tabellen en vlakken die op surface liggen. Donker is een voorstel." },
      { "name": "ink", "value": { "light": "#4d5970", "dark": "#ecf1f2" }, "usage": "Lopende tekst en subkoppen op surface en surface-raised (6,2:1 licht)." },
      { "name": "ink-strong", "value": { "light": "#215370", "dark": "#ffffff" }, "usage": "Nadruk en donkere vlakken; tekst op surface en surface-raised." },
      { "name": "ink-muted", "value": { "light": "#8a9daf", "dark": "#8a9daf" }, "usage": "Bijschriften, datum, metadata. Licht haalt op surface maar 2,5:1: alleen voor tekst van 24px+ of decoratie. Op de donkere surface 5,9:1." },
      { "name": "accent", "value": { "light": "{purple-500}", "dark": "{purple-300}" }, "usage": "Koppen, titels, accentbalk en links. Paars #777AFF haalt 3,1:1 op surface: alleen koppen (24px+), nooit lopende tekst." },
      { "name": "on-accent", "value": { "light": "#ffffff", "dark": "#16202e" }, "usage": "Tekst op een vlak in accent, zoals de Side-subject-slide. Licht 3,5:1: alleen grote titels." },
      { "name": "chapter", "value": "{turquoise-500}", "usage": "Achtergrond van de hoofdstukslide." },
      { "name": "on-chapter", "value": "#4d5970", "usage": "Titel op een chapter-vlak (3,8:1: alleen grote titels)." },
      { "name": "highlight", "value": "{pink-500}", "usage": "Spaarzaam: waarschuwing of to-do (\"Bewerkt dit bestand niet.\"), procesiconen. Nooit als lopende tekstkleur." },
      { "name": "line", "value": { "light": "#8a9daf", "dark": "#4d5970" }, "usage": "Scheidingslijnen tussen kolommen, zoals op de Action-sheet-slide. Decoratief; draagt geen betekenis." },
      { "name": "navy", "value": "#215370", "usage": "Achtergrondkleur uit de huisstijl; donker vlak, achter wit logo." },
      { "name": "slate", "value": "#4d5970", "usage": "Achtergrondkleur en tekstgrijs uit de huisstijl." },
      { "name": "slate-light", "value": "#8a9daf", "usage": "Achtergrondkleur uit de huisstijl; ook het grijs in het woordmerk." },
      { "name": "ice", "value": "#ecf1f2", "usage": "Achtergrondkleur uit de huisstijl; standaardachtergrond." },
      { "name": "purple-900", "value": "#3c3d80", "usage": "Paars, donkerste tint. Vlakken en tekst op lichte gronden." },
      { "name": "purple-700", "value": "#595bbf", "usage": "Paars, donker. Hover en tekst in paars die leesbaar moet zijn (5,0:1 op ice)." },
      { "name": "purple-500", "value": "#777aff", "usage": "Paars, de hoofdkleur: titels, accentbalk, Side-subject-vlak." },
      { "name": "purple-300", "value": "#999bff", "usage": "Paars, licht. Accent op donkere gronden." },
      { "name": "purple-100", "value": "#bbbcff", "usage": "Paars, lichtste tint. Achtergrondvlakken." },
      { "name": "pink-900", "value": "#801354", "usage": "Roze, donkerste tint." },
      { "name": "pink-700", "value": "#bf1c7e", "usage": "Roze, donker. Roze tekst op lichte gronden (5,0:1 op ice)." },
      { "name": "pink-500", "value": "#ff26a8", "usage": "Roze, signaalkleur: highlight." },
      { "name": "pink-300", "value": "#ff5cbe", "usage": "Roze, licht." },
      { "name": "pink-100", "value": "#ff92d3", "usage": "Roze, lichtste tint." },
      { "name": "mint-900", "value": "#018071", "usage": "Mint, donkerste tint. Mint tekst op lichte gronden (4,2:1 op ice, 24px+)." },
      { "name": "mint-700", "value": "#01bfa9", "usage": "Mint, donker." },
      { "name": "mint-500", "value": "#01ffe1", "usage": "Mint, de felle tint. Alleen als vlak of in Liquid-beeld; nooit wit erop." },
      { "name": "mint-300", "value": "#41ffe9", "usage": "Mint, licht." },
      { "name": "mint-100", "value": "#80fff0", "usage": "Mint, lichtste tint." },
      { "name": "turquoise-900", "value": "#076a70", "usage": "Turquoise, donkerste tint. Turquoise tekst op lichte gronden (5,6:1 op ice)." },
      { "name": "turquoise-700", "value": "#0a9ea7", "usage": "Turquoise, donker." },
      { "name": "turquoise-500", "value": "#0ed3df", "usage": "Turquoise: de fontein in het logo en de hoofdstukslide." },
      { "name": "turquoise-300", "value": "#4adee7", "usage": "Turquoise, licht." },
      { "name": "turquoise-100", "value": "#86e9ef", "usage": "Turquoise, lichtste tint." }
    ]
  },
  "type": {
    "fonts": [
      { "family": "Outfit", "file": "fonts/Outfit-VariableFont_wght.ttf", "weight": "100 900", "style": "normal" }
    ],
    "families": {
      "sans": "\"Outfit\", system-ui, -apple-system, \"Segoe UI\", sans-serif"
    },
    "groups": [
      {
        "name": "Slides (1920 × 1080)",
        "family": "sans",
        "styles": [
          { "name": "slide-title", "fontSize": "133px", "lineHeight": 1, "fontWeight": 400, "sample": "Introductie", "usage": "Grote koppen: Outfit Normal 50 pt op de 16:9-template, paars accent. 133px op een 1920-canvas." },
          { "name": "slide-cover-title", "fontSize": "133px", "lineHeight": 1, "fontWeight": 800, "sample": "Title of the presentation", "usage": "Titel op de coverslide en hoofdstukslides, Outfit Extrabold. Wit op Liquid, on-chapter op chapter." },
          { "name": "slide-quote", "fontSize": "80px", "lineHeight": 0.8, "fontWeight": 400, "sample": "Hier kun je mooi een quote in zetten", "usage": "Quotes en lange titels: Outfit Normal 30 pt, paars, regelafstand 0,8. Kernwoorden in Bold." },
          { "name": "slide-subtitle", "fontSize": "43px", "lineHeight": 1.15, "fontWeight": 700, "sample": "Subtitle", "usage": "Subkoppen: Outfit Bold 16 pt, ink." },
          { "name": "slide-body", "fontSize": "32px", "lineHeight": 1.15, "fontWeight": 300, "sample": "Body text die de slide uitlegt in een of twee zinnen.", "usage": "Bodytekst: Outfit Light 12 pt, ink." }
        ]
      },
      {
        "name": "Documenten (pt)",
        "family": "sans",
        "styles": [
          { "name": "doc-cover-title", "fontSize": "50px", "lineHeight": 1.1, "fontWeight": 800, "sample": "Titel cover", "usage": "Covertitel in Word en Docs: 50 pt Extrabold, accent of slate." },
          { "name": "doc-client", "fontSize": "24px", "lineHeight": 1.5, "fontWeight": 300, "sample": "IJsfontein of Naam klant", "usage": "Klantnaam of omschrijving op de cover: 24 pt Light, slate." },
          { "name": "doc-team", "fontSize": "14px", "lineHeight": 1.5, "fontWeight": 400, "sample": "Naam team: [Naam], [Naam]", "usage": "Teamnamen op de cover: 14 pt Regular, slate." },
          { "name": "doc-page-title", "fontSize": "50px", "lineHeight": 1.5, "fontWeight": 400, "sample": "Titel pagina's", "usage": "Paginatitel: 50 pt Regular, accent of slate." },
          { "name": "doc-subtitle", "fontSize": "16px", "lineHeight": 1.1, "fontWeight": 700, "sample": "Sub titels", "usage": "Subtitel: 16 pt Bold, slate." },
          { "name": "doc-small-bold", "fontSize": "10px", "lineHeight": 1.5, "fontWeight": 700, "sample": "Kleine tekst bold", "usage": "Nadruk in lopende tekst: 10 pt Bold, slate." },
          { "name": "doc-small", "fontSize": "10px", "lineHeight": 1.5, "fontWeight": 300, "sample": "Kleine tekst voor de lopende tekst van een document.", "usage": "Lopende tekst: 10 pt Light, slate. Op schermen minimaal 14px gebruiken." }
        ]
      }
    ]
  },
  "spacing": {
    "note": "Voorstel: de huisstijl legt geen afstanden vast. Afgeleid van de 16:9-template op een 1920-canvas.",
    "tokens": [
      { "name": "space-1", "value": "8px", "usage": "Tussen een label en zijn waarde." },
      { "name": "space-2", "value": "16px", "usage": "Tussen regels in een lijst, binnenmarge van kleine vlakken." },
      { "name": "space-3", "value": "32px", "usage": "Tussen subkop en bodytekst, tussen kolommen." },
      { "name": "space-4", "value": "64px", "usage": "Tussen blokken op een slide." },
      { "name": "space-5", "value": "128px", "usage": "Slidemarge links en boven op een 1920-canvas (de titel staat op ongeveer 6% van de rand)." }
    ]
  },
  "radius": {
    "note": "De template gebruikt rechte hoeken voor foto's en vlakken en ronde vormen voor iconen en Liquid.",
    "tokens": [
      { "name": "radius-none", "value": "0", "usage": "Foto's, accentbalk, kleurvlakken en kaarten." },
      { "name": "radius-round", "value": "50%", "usage": "Procesiconen en teamfoto's in cirkels." }
    ]
  }
}