Design Tokens

Overzicht

• Design tokens zijn als labels die verwijzen naar verschillende ontwerpstijlen zoals kleuren, lettertypes en maten.
• Ze zijn handig omdat je in plaats van specifieke waarden voor deze stijlen hard in te voeren, deze labels kunt gebruiken om ernaar te verwijzen.
• Elk label is genoemd op basis van waar of hoe het wordt gebruikt. Stel je bijvoorbeeld voor dat cds.comp.badge.bg-color een label is dat de kleur van de achtergrond van een Badge-component aangeeft.
• Zelfs als de werkelijke kleur of stijl later verandert, blijven we hetzelfde label gebruiken (cds.comp.badge.bg-color) om naar dat specifieke onderdeel van het ontwerp te verwijzen.
• In ons Campus Design System organiseren we deze labels in drie types: referentie (ref), systeem (sys) en component (comp).
• Deze tokens worden gebruikt in Figma en SCSS-bestanden, die uiteindelijk transformeren naar CSS Custom Properties, zoals --cds-comp-badge-bg-color.

Tokens zorgen ervoor dat consistente stijlwaarden worden toegepast in ontwerpbestanden en code.

Door te vertrouwen op design tokens in plaats van hardgecodeerde waarden, wordt het proces van het bouwen, beheren en uitbreiden van producten binnen een design system efficiënter.

Belangrijkste punten

• Tokens zijn een veelzijdig formaat dat niet gebonden is aan een specifiek platform, maar nog steeds toegepast kan worden binnen platform-specifieke code.
• Binnen ons Campus Design System gebruiken we momenteel referentie- en systeemtokens, terwijl componenttokens zich blijven ontwikkelen tijdens de ontwikkeling zonder beperkingen.
• Deze tokens spelen een cruciale rol in het behouden van harmonie en uniformiteit binnen ons design system, en ondersteunen de afstemming en consistentie.

Wat is een design token?

Design tokens belichamen de herhaalde ontwerpbeslissingen die de visuele stijl van een design system vormen. Ze vervangen statische waarden, zoals hex-codes voor kleuren, door gemakkelijk te begrijpen namen.

Een Campus Design System token bestaat uit 2 delen:

1. een code-achtige naam, bijvoorbeeld `cds.ref.palette.primary.40`
2. een bijbehorende waarde, zoals `#9F4032`

Deze tokens leggen betekenisvolle verbindingen tussen stijlkeuzes die anders misschien niet gerelateerd lijken.

Stel je bijvoorbeeld een scenario voor waarbij zowel de mock-ups van een ontwerper als de implementatie van een ingenieur verwijzen naar een token genaamd "secundaire containerkleur". In dergelijke gevallen kunnen de ontwerp- en engineeringteams erop vertrouwen dat dezelfde kleur consistent zal worden gebruikt in beide contexten. Deze consistentie blijft bestaan, zelfs als de kleurwaarde gekoppeld aan een token later wordt bijgewerkt.

Waarom zijn tokens belangrijk?

Tokens dienen als de basis van de coherentie van een design system, fungeren als een centraal repository dat zorgvuldig ontwerpbeslissingen en hun evolutie bijhoudt en beheert.

Wanneer tokens worden geïntegreerd in ontwerp- en implementatieworkflows, worden stijlupdates naadloos doorgevoerd in het volledige productassortiment, wat zorgt voor consistentie en efficiëntie.

Hun herbruikbaarheid en gerichte aard stellen systeemwijde wijzigingen in staat, wat het systematisch toepassen van grote veranderingen mogelijk maakt. Het gebruik van tokens maakt bijvoorbeeld het implementeren van een hoog contrast kleurenpalet mogelijk om de zichtbaarheid te verbeteren, of het uniform aanpassen van lettergroottes in alle applicaties om overeen te komen met de typografie van het merk.

Lezen en maken van token-namen

Token-namen zijn gestructureerd met punten, van bredere informatie (cds) naar specifieke details (on-primary).

Elke token kan worden ontleed in drie hoofdsegmenten: Collectie, Doel en Specificaties.

• Collectie: Bestaat uit 3 verplichte segmenten:

  • A. naam van het design system
  cds in 'cds.ref.palette'
  • B. type van de token
  ref in 'cds.ref.palette'

  sys in 'cds.sys.color'

  comp in 'cds.comp.badge'
  • C. categorie
  palette in 'cds.ref.palette'

  color in 'cds.sys.color'

  badge in 'cds.comp.badge'

• Doel: Bestaat uit een of meer segmenten met informatie over:

  • D. concept
  weight in 'cds.ref.typeface.weight.bold'

  primary in 'cds.ref.palette.primary.60'
  • E. variant
  container in 'cds.sys.color.primary.container'

  icon in 'cds.sys.dimension.icon.2xs'
  • F. eigenschap
  bg-color in 'cds.comp.badge.bg-color'

  collapsed-width in 'cds.comp.result-table.collapsed-width'

• Specificatie: Bestaat uit optionele segmenten met informatie over:

  • G. schaal
  60 in 'cds.ref.palette.primary.60'

  2xs in 'cds.sys.dimension.icon.2xs'
  • H. uitzondering
  with-leading-icon in 'cds.comp.inline-button.padding-inline-end.with-leading-icon'
  • I. staat
  active in 'cds.comp.concept-button.size.active'

A. Naam van het Design System

Binnen Campus Design System moeten alle token-namen beginnen met cds om ze gemakkelijk te onderscheiden van andere design systemen die mogelijk interfereren met de Campus-tokens.

B. Token Type

Er zijn drie soorten tokens binnen Campus:

1. Referentie tokens
   Alle beschikbare tokens met bijbehorende waarden
2. Systeem tokens
   Beslissingen en rollen die het design system zijn karakter geven, van kleur en typografie tot hoogte en vorm
3. Component tokens
   De ontwerpkenmerken die aan elementen in een component worden toegewezen, zoals de kleur van een knop-icoon

1. Referentie tokens

Referentie tokens binnen ons systeem beginnen met cds.ref.

Deze tokens omvatten het volledige scala aan stijlke

uzes voor dingen als kleuren, typografie, schaduwen en meer. Dit type token bevat een waarde die specifiek is en ongewijzigd in het systeem, zoals een hex-waarde of een lettertype.

2. Systeem tokens

Systeemtokens beschrijven meer abstracte ontwerpkeuzes, zoals het gebruik van kleuren in het ontwerp, in plaats van dat ze directe waarden bevatten. Een systeemtoken heeft bijvoorbeeld de naam cds.sys.color.primary, maar is niet verbonden aan een specifieke kleur (zoals #3E8E41). De systeemtoken cds.sys.color.primary vertegenwoordigt de rol of het gebruik van de primaire kleur binnen het systeem.

3. Component tokens

Componenttokens beschrijven de stijlkenmerken die direct betrekking hebben op specifieke onderdelen binnen een component. Een voorbeeld zou cds.comp.badge.bg-color kunnen zijn, wat de achtergrondkleur van een badgecomponent vertegenwoordigt.

C. Categorie

Categorieën helpen bij het groeperen van tokens op basis van hun ontwerpdoelen, zoals kleurenpaletten, typografie of afmetingen.

Enkele categorieën:

• Color: Voor het definiëren van kleuren in het design system (bijv. cds.sys.color.primary)
• Typeface: Voor het definiëren van lettertypen, gewicht en stijl (bijv. cds.ref.typeface.heading)
• Dimension: Voor afmetingen zoals marges, padding, en grootte (bijv. cds.sys.dimension.spacing.lg)
• Shadow: Voor het definiëren van schaduweffecten (bijv. cds.ref.shadow.raised)

D. Concept

Het concept definieert de betekenis van een token binnen zijn categorie.

Bijvoorbeeld, primary in cds.ref.palette.primary.60 is een concept dat aangeeft dat het token betrekking heeft op de primaire kleur in het systeem.

E. Variant

De variant biedt een specifieke modificatie van het concept of zijn eigenschappen. Bijvoorbeeld, de 60 in cds.ref.palette.primary.60 geeft een specifieke tint van de primaire kleur aan.

F. Eigenschap

De eigenschap geeft een specifieke stijlkenmerk binnen een concept aan. Bijvoorbeeld, bg-color in cds.comp.badge.bg-color geeft de achtergrondkleur van een badge aan.

G. Schaal

De schaal beschrijft de variatie van een specifiek concept, zoals het gewicht van een lettertype, de tint van een kleur of de grootte van een dimensie. Bijvoorbeeld, de 60 in cds.ref.palette.primary.60 geeft een variatie in de kleur.

H. Uitzondering

Soms kan een token een uitzondering hebben, bijvoorbeeld een specifieke toevoeging van een icoon of extra padding. Bijvoorbeeld, with-leading-icon in cds.comp.inline-button.padding-inline-end.with-leading-icon.

I. Staat

Sommige tokens kunnen ook verschillende toestanden beschrijven, zoals een actieve knop of inactieve toestand. Bijvoorbeeld, active in cds.comp.concept-button.size.active duidt op een actieve knoptoestand.