Design System

Context and Problem

I need to have a source of truth for design decisions, and a way to ensure a better and consistent quality of frontend components and UI in general. I also want to make sure that any improvements I make are reflected across the sites that use these components. Design systems are made for this.

Considered Options

  • Do not do a design system and work in priority on other aspects (graphics library, indiewebsite)
  • Do a design system and work on other subjects in parallel

Decision

I think I can push for the stretch and try to implement a (tiny) design system. I will build the gl lib and the indiewebsite in parallel. The design system will make my job easier in the long run: the project is small enough to get a solid start now.

Given the scale of this project I’ll borrow from this source to get me started:

Adapted from : InVision Guide - Building an MVP Design System

Design System Overview

UI LibraryUsersControls
FoundationsDesignersGuidelines
BlocksEngineersGovernance
Layouts

UI Library

FoundationsLayoutsBlocks
ColorsBurritoButtons
TypographyRevealCards
Icons (assets)IconForms
SpacingSidebarGraphics
MotionStackMedia
LayersSwitcherNavs
(Tables)

🚧 Users

Design AssetsEngineering Assets
Design filesAPIs
LibrariesComponents
StylesTokens

🚧 Controls

GuidelinesGovernance
AccessibilityCommunication
ExamplesVersions
UsageMeasurement
PatternsContribution
PrinciplesIncentives
Voice & ToneReviews