A talk which I did at the Auckland CSS meetup discussing the approach I took to building a design system for NZs largest online retailer

1. IMPLEMENTING A DESIGN
SYSTEM FROM THE
GROUND UP
Styleguide | Component Library
Andy Dover | github.com/adover
linkedin.com/in/andrewdover

2. 1 FRONT END
DEVELOPERIn a sea of back end and full stack developers

5. BRAND
STYLGUIDE

6. MULTIPLE INTERNAL
& EXTERNAL
REQUIREMENTS
1 x App
Styles need to be able to
compile to be compatible
with native languages
2 x Websites
One internally managed and
one externally managed
∞ Internal Apps
Multiple apps of multiple
ages using anything from
jQuery to Kendo UI

7. 1 FRONT END
DEVELOPER"But we don't want a design system"

8. VALUABLE LESSON #1
Learn how to sell the value of the
design system

9. BURNING
PLATFORM
BURNING
DESIRE
"Append Only" Stylesheets from 18
years of different developers
500kb bundled CSS file
Complete reimplimentations of visibly
similar functionality instead of reuse
Inconsistent code
Full site regression tests required for
any code change
No coding standards
Impossible to update branding
Multiple L&Fs and styles
IE6 - 10 vendor prefixes and hacks
Sad UX people, hacking away at stuff
Quick! Easy!
Declare once, apply everywhere
Consistency
Build pipeline with full optimisation and
autoformatting
Component isolation and test suites
IDE automated coding standards
(Prettier & StyleLint)
Update branding from one file
Up front implementation
Happy UX people!

10. A STYLEGUIDE
WAS BORN
/ component library

11. VALUABLE LESSON #2
Font declarations, grids and colours
does not a design system make

12. "DESIGN SYSTEM,
RIGHT AHEAD!"
Page Layout Templates
Elements Reacting to Other Elements
Internationalisation
Futureproofing
Documentation Automation
Accessibility
The easy stuff is the tip of the iceberg
Font Formats
Packaging & Hosting
Build Pipelines
Platform Requirements
Enforcing Constraints
Linting
Readmes
Baseline Grids
Library Architecture
Language & Approach

13. SIDENOTE

14. BASELINES,
SPACINGS,
PRESETS,
FTW
Sort it out early and save yourself a tonne of
headaches and iterations
colors: (
background: (
...
),
heading: (
light: map-get($colors, porcelain),
dark: map-get($colors, fun-green),
),
),
borders: (
default: 1px solid map-get($colors, silver-sand),
nav: 8px solid map-get($colors, fun-green),
),
spacing: (
default: (
h: 1rem,
v: 0.75rem,
),
medium: (
h: 2rem,
v: 1.5rem,
),
large: (
h: 4rem,
v: 3rem,
),
),

15. VALUABLE LESSON #3
Split your design system into multiple
layers to allow optimum reuse

16. YO DAWG
I HEARD YOU LIKE
LAYERS...
Components
JavaScript implementations
importing styles
Sandbox
Scenario-Driven component
development environment
Guide
Documentation built from
comments and readme files
Styles
CSS styles which can be
imported and reused
Configs
Agreed base colours and
spacing multipliers

17. VALUABLE LESSON #4
Pick your approach, live it, breathe it,
learn how to explain it to a 5 year old

19. ITCSS
Settings
Configurations, Variables, Transitions,
Animations, Presets
Functions, Mixins
Resets, Theme Imports,
Shared Libraries
HTML Tags, Singular UI
Elements (Cards,
Overlays etc.)
Banners, Accordions,
Navs, Notifications,
Popups, etc
Login, Navigation
Drawer, Tabsets
Page Flows
Tools
Global Imports
Elements Atoms
Objects Molecules
Components Organisms
Templates
Atomic

20. AUTOMATE ALL
THE THINGS
Sandboxing
StoryBook.js
Angular Playground
Documentation
JSDoc
SassDoc
CompoDoc
Calculations or building code blocks
SASS functions
Mixins
Webpack helpers
Asset copying and packaging
Bash Scripts
NPM Packages
Pipeline Builds
Choosing which npm script to run
ntl

21. VALUABLE LESSON #5
Build a Proof of Concept to break
your (and your designers) great ideas

22. AfterBefore
500kb Bundle Size 90kb Bundle Size
300+ Line height declarations 6 Line height declarations

23. THANKS!