Dit design systeem vormt het vertrekpunt voor het ontwikkelen van websites en branding projecten. Het is ontworpen om herhaalde handelingen te minimaliseren, waardoor efficiëntie en consistentie centraal staan. Met dit systeem kun je eenvoudig schakelen tussen verschillende apparaten en snel wijzigingen doorvoeren in kleuren en typografie, alles aangestuurd vanuit een centraal punt. Hierdoor wordt het tijdrovend aanpassen van individuele designs verleden tijd.
Het doel is om niet alleen mijn eigen proces te optimaliseren, maar ook andere designers te ondersteunen in het stroomlijnen van hun workflows, zodat zij zich kunnen richten op het oplossen van complexe ontwerpuitdagingen.
Het is frustrerend om telkens vanaf nul te beginnen met de basisopzet bij het ontwikkelen van een nieuw design systeem.
Tegelijkertijd is het prettig om controle te hebben over de totale look-and-feel van een product.
Dit systeem biedt een uitgebreid componenten- kleuren- en typografiesysteem dat schakelen tussen verschillende kleurenpaletten, devices en dark- en light-modes vereenvoudigd.
Door slim gebruik te maken van tokens is er in het gehele designsysteem altijd één plek van waarheid. Deze inzichtelijke structuur zorgt ervoor dat alle onderdelen in lijn zijn met elkaar.
Open de lokale variabelen in het rechtermenu en navigeer naar de collectie “Fundamentals”. In deze collectie vind je de volgende groepen:
In de variabelencollectie “Typografie” regel je centraal de typografie voor jouw product. De primaire categorieën zijn:
Andere groepen binnen typografie zijn:
Text Styles
De text styles in het rechtermenu bieden lokale typografiestijlen die je uiteindelijke keuzes definiëren voor het gebruik van typografie binnen jouw product. Deze worden aangestuurd door de tokens in de typografieverzameling.
Alle componenten zijn beschikbaar met dimensies voor desktop en mobile. Ook zijn alle componenten beschikbaar in een light en dark mode.