Advanced design systems

Aurora Pleguezuelo
Introduction 03
Becoming a systems designer 04
Design systems foundations I 11
Design systems foundations II 24
Designing components systematically I 33
Designing components systematically II 38
Extra content 42
Introduction For years, at Instituto Tramontana we’ve
been training and advocating for design
systems.

And we’ve been working in

collaboration with alumni members like
Aurora and some of the top
organizations in our industry to mature
their systems and improve their design
practices.

Mature design systems help companies

scale and keep control over the shape
and structure of their digital landscape.
Advanced design systems comes from
a desire to share the knowledge we’ve
acquired through all of this work.

Aurora Pleguezuelo,
Senior Designer
@GitHub

Aurora Pleguezuelo is one of the most

notable voices in the world of
design systems.

With most of her career dedicated in-

depth to design systems, she has
worked at tech companies like Algolia
and more recently at GitHub, where she
contributed to big updates like dark
mode or their most recent visual
redesign.

03
CHAPTER 7

Becoming a systems
designer
Documentation is critical to the
success of a design system.

Good documentation enables design

system consumers to use and
contribute to the system with
confidence. It is also how we pass on
our work and our vision as system
designers.

In this chapter, you will learn about

documentation and other practices
that make a good systems designer.

05
Highlights

Good systems designers understand

feedback loops, embrace iteration
and make themselves replaceable.

Think and work on documentation

from the get-go.

Write technical documentation with

assertiveness, simplicity and make it
as visual as possible.

06
Exercise material

Design file example

Password file: MalcomMcLean

Let’s start by creating a file, in this case with Figma. How do

we establish a common language to make sure everyone
understands how to navigate files in an organization.

07
Systems thinking

Thinking in Systems
Donella H. Meadows
Probably the most important read to better understand how
systems work. Donella H. Meadows does an excellent job at
breaking down the systems that surround us and explaining
how interconnections work.

Thinking in Systems and Mental Models

Marcus P. Dawson
This book may be a little bit hard to follow but it has a lot of
interesting knowledge nuggets. This book helps you learn
about system models so you can apply it to your design
systems work.

Systems Thinking Speech

Dr. Russell Ackoff
Very thought-provoking speech by Dr. Russell Ackoff, a
renowned organizational theorist who’s considered one of
the systems thinking pioneers.

08
Documentation

Documenting components
Nathan Curtis
A collection of six articles that spans the story of
documenting components.

Documentation day
Jennifer Johnson
How the FT.com team improved their documentation to 95%
usefulness in 7 hours. By Jennifer Johnson, developer at
Financial Times.

Design Documentation. Style Guides and Design Systems

Priyanka Jeph
This article defines what Style Guides and Design Systems
are, and explains us the differences between both concepts.

Beginners guide to docs

Eric Holscher
Write the Docs is a global community of people who care
about documentation. This article is a beginner’s guide to
writing documentation.

09
Design system documentation sites

Morningstar
Morningstar is a collection of design and technical
standards built into a central library to help community.

Carbon
Carbon is IBM’s open source design system for products
and digital experiences.

Primer
Primer it’s a open source design system created for GitHub.

Material
Material is a design language developed by Google.

Polaris
Polaris is Shopify’s open source design system. This website
can help you understand how a design system works.

Spectrum
The Adobe’s design system provides very useful tools.

Atlassian
Another fantastic open source design system by Atlassian,
an Australian software company.

10
CHAPTER 8

Design system
foundations I
In this chapter, we will learn how
to tackle a foundations project in a
design system.

We’ll talk about considerations

and steps to take when building
color, typography and
iconography systems.

12
Highlights

Mapping your system’s structure is

the answer to How do we organize
this, so it does its job, costs less, and
grows more?

The most common design

foundations are: color, typography
and iconography.

A basic color scale should have

enough hues to cover the system
needs: dark, light and grayscale and
colors with meaning such as green,
yellow and red.

13
Highlights

Typographic scales should have

enough weights and sizes for a
correct hierarchical relationship inside
the UI. Do this work in collaboration
with development.

Iconography is powerful and

necessary but it should be used
intentionally and with
guidance.

14
Exercise material

Design System Library: Foundations

Password file: TheUlmSchool

Foundations are the visual elements needed to create

engaging end-to-end user experiences. This includes
guidance on color, typography and iconography .

15
Foundations and mapping the system

Laying the foundations

Andrew Couldwell
This book will help you learn about the different dimensions
and layers inside a design system at scale. It also shows
examples of approaches that operational design systems
follow.

Atomic design
Brad Frost
A design systems classic to learn in depth about design
system foundations and how to structure a system
following an atomic model.

Design Principles
A collection of design principles and how they’re applied
by design teams with operational design systems.

Design System Checklist

This is a very handy website to reference when you’re working
on a design system architecture or mapping proposal.

16
Color

Interaction of color
Josef Albers
Conceived as a handbook and teaching aid for artists,
instructors, and students, this influential book presents Albers’s
singular explanation of complex color theory principles.

The Secret Lives of Color

Kassia St. Clair
A fantastic and inspirational read about how certain color
came to be and why we perceive them the way we do today.

Color Problems
Emily Noyes Vanderpoel
This book provides a comprehensive overview of the main
ideas of color theory in the 20th century, as well as her wildly
original approaches to color analysis and interaction.

Color
Design Systems
A Figma article about color with interesting links.

Color in design system documentation

Dominika Šnejdrová
A good read if you want to know what practical steps you
should take to document visual language of a company’s
design system.

17
Color

Color in design systems

Nathan Curtis
In this article Nathan Curtis gives 16 tips about color for
setting up a system that endures.

12 fascinating optical illusions show how color can

trick the eye
An article about optical Illusions and how they work to create
images that can be deceptive to our brains.

How to Use the Color Wheel for Color Schemes and

Mixing · Marcin Treder
Robie is an artist who loves sharing what she has learned
about art and painting in the hope that it might help other
creatives.

Remaking color for Indeed’s design system

Frantisek Kusovsky
Frantisek Kusovsky is senior UX designer at Indeed. In this
article he shares his experience and knowledge creating
color systems.

Reapproaching color
Kevyn Arnott
Build your color systems for accessible UIs that scale with
ColorBox.io

18
Color

Because, colors are beautiful

Shixie
A reading to help you make an appealing and accessible
palette for brands, products, and experiences.

Managing Colors in a Design System

Marcin Treder
Know how to organize colors in a design system with Marcin
Treder, UXPin CEO.

Interaction of color systems

Diana Mounter
A look at the efforts required in updating large scale web
applications like Github, challenges in programatically
generating colors, creating color naming conventions, color
accessibility, and testing the interaction of color with other
parts of a design system.

Super Practical Guide to Color Theory, Color Models

and Perfect Color Palettes
DesignerUp
A guide that show us how to setup our design apps and
create color palettes that match every single time. Using a
few tricks and a few numbers.

19
Color

Chroma
This plugin is a life-saver for those designing a color library.
Create color styles in bulk from a selection

Color Compass
Another helpful plugin for systematic color palettes.

ColorBox
This web application provides you with the help you need for
creating color systems more efficiently.

Palx
Provide a single color value and Palx returns a full-spectrum
color palette, well suited for UI design and data visualizations
that work harmoniously with brand colors.

Accessible Colors
This is a powerful tool to test your background and text
contrast ratio based on Web Content Accessibility Guidelines
(WCAG), and automatically find the closest accessible colors.

Colorable
This tool is a color palette combination contrast tester. Take a
set color palette and get contrast values for every possible
combination.

20
Color

Leonardo Color
The Leonardo web application is a tool for designers and
engineers to collaboratively build color scales for use in user
interfaces.

HSLuv
The HSLuv color space is a human-friendly alternative to the
HSL color space. It is a variation of the CIELUV color space,
where the C (colorfulness) component is replaced by a
"Saturation" (S) component representing the colorfulness
percentage relative to the maximum sRGB can provide given
the L and H values.

Viz Palette
A tool to help data visualization designers evaluate and
improve their palettes.

21
Typography

Typography in Design Systems

Nathan Curtis
A article to teach you to choose fonts, set a hierarchy, and
integrate with components.

Design Systems. Typography

This reading provides us with useful tools for working with
typography in our design system.

Typography in Design Systems

Dan Mall
Frustrated with the existing taxonomy of typography in design
systems, Dan Mall explores different approaches toward
making typography in design systems more predictable and
intuitive.

A framework to create an accessible & harmonious

typography system for faster design-dev handoff
Priyanka Godbole
10 practical steps to create a predictable typography system.

22
Iconography

Understanding Comics
Scott McCloud
A seminal examination of comics art: its rich history, surprising
technical components, and major cultural significance. Explore
the world between the panels, through the lines, and within the
hidden symbols of a powerful but misunderstood art form.

A complete guide to iconography

Bonnie Kate Wolf
A publication to help you design great icons, a crucial part of
any design system or product experience.

Ionicons
An open-sourced and MIT licensed icon pack.

Feather Icons
Find the perfect icon for your project using this collection of
simply beautiful open source icons.

23
CHAPTER 9

Design system
foundations II
Foundations don’t work as isolated
elements, they also need to be
combined and applied to to our
product UI.

In this chapter we’ll learn about

setting guidelines, recipes and
frameworks to apply foundations.

25
Highlights

Accessibility shouldn’t feel optional.

Make sure to have conversations and
learn from theexperts if you’re not one
yourself.

Design tokens are design decisions

encapsulated into language-agnostic
variables. They allow development
and design to share a unique
framework to handle and propagate
system styles with consistency and
confidence.

26
Highlights

Learn to dissect the anatomy of

simple components too and how the
system affects each part of the library.
This will allow you to understand
dependencies and also create robust
components for others to reuse.

27
Accessibility

Accessibility in Design Systems

Allison Shaw
An interesting webinar. You will learn the benefits of
accessibility in a design system, how to create and incorporate
accessibility standards and more.

Auditing design systems for accessibility

Anna Cook
In this video Anna Cook teaches us how to audit components
for accessibility issues from design to code using plugins, best
practices, and testing tools.

Accessibility tutorials
Web accessibility initiative
This collection of tutorials shows you how to develop web
content that is accessible to people with disabilities, and that
provides a better user experience for everyone

Accessibility in the GOV.UK Design System

Nick Colley
Nick Colley is a Frontend developer working on the GOV.UK
Design System. In this talk he shares some details about the
GOV.UK design system.

28
Accessibility

Stark
Stark Lab
Web accessibility testing platform for designers, developers
and product managers looking to make software products
more their software more accessible and compliant.

Contrast
Maark and Alex Carr
A Figma Community plugin. Contrast makes it easy to check
the contrast ratios of colors as you work.

29
Design Tokens

WTF are Design Tokens?

Jina Anne
In this video Jina Anne (Jina is product design manager at
Asana) explaining us what design tokens are and why she
loves them.

Glossary
Superfriendly
Design systems can be tricky if you don’t know what certain
words mean. Here’s a quick primer to help you get acclimated.

Naming tokens in design systems

Nathan Curtis
Terms, types, and Taxonomy to Describe Visual Style. In this
article you will find information to think about token structure.

Design tokens resources

Dan Mall
A beginner-level guidance on design tokens.

30
Design Tokens

Design APIs
Matthew Strom
Matthew Ström leads design teams at Stripe. Its website you
can find good information about about product design, front-
end code, leadership, and more.

Tokens as intents
Aliquam erat volutpat. Donec vitae diam dolor. Proin iaculis
turpis vel sem pharetra, nec tempor risus eleifend.

Naming colors in Design Systems

Jess Sattell
Jess is staff content designer for Spectrum and the lead for
Central Content Design at Adobe. In this article she writes
about how color naming is an excellent example of how
applying a content design practice to a design system works.

Functions and the future of design systems

Matthew Strom
In this essay Matthew Strom explains why the dictionary model
of design systems is reaching its limit, and what kind of tools
are waiting for us.

31
Applying foundations

Refactoring UI
Tailwind Labs
Learn how to design beautiful user interfaces by yourself using
specific tactics explained from a developer's point-of-view.

32
CHAPTER 10

Designing components
systematically I
Most folks who work in design
systems full time, do so in teams
where a lot of the primitives,
guidelines and patterns are already
established.

For the next two lessons we’ll talk

about the type of work that designers
do in mature design systems:
component design work.

34
Exercise material

Design System Library: Components

Password file: TheUlmSchool

Components are the reusable building blocks of our

design system. This includes guidance on buttons
and text inputs.

35
Research and audits

Auditing design systems

This article will help you learn how audits can help to resolve
out some disparate styles and evolve a design system
without rebuilding it.

36
Exploration phase

Divergent Thinking
Interaction design foundation
This article teaches us what divergent thinking is,
and how it is used.

The Design Sprint

Jake Knapp
This book is very handy for product design problems too
but it’s a great source of ideas on how to add a little
structure to the brainstorming process.

37
CHAPTER 11

Designing components
systematically II
As we approach the end of the
course, it’s time to choose the
design direction we’ll follow for our
component. In the real world, this
decision will be made based on user
feedback and business
requirements.

39
Component design

From Pages to Patterns: An Exercise for Everyone

Charlotte Jackson
An article to understand the process of developing a pattern
library.

The Component Gallery

An up-to-date repository of interface components based on
examples from the world of design systems.

PATTTTERNS
This is a catalog of interaction patterns found on real software.

UI Guideline
UI Guideline is a guide to standardize the design/code of the
UI Components based on the 39 most popular Reference
Systems.

Content & display patterns

Dan Mall
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus efficitur est nisl, nec malesuada ipsum cursus et.

Cards and Composability in Design Systems

Nathan Curtis
This article will help you learn about structure, content, style
& behavior of composed components.

40
Component design

Material Components: Cards

A very interesting video about what a card is and what it
should contain.

Checklist Design
A curated list of checklists ranging from website pages, to UI
components, all the way to branding assets.

Create and use variants in Figma

A document to help you to create and use variants in Figma.

Expressive Design Systems

Yesenia Perez-Cruz
In this book, Yesenia Perez-Cruz shows you how to build
useful, dependable systems that not only maintain harmony
across your products, but also flex to accommodate
inspiration and experimentation.

Crafting component API, together

Nathan Curtis
A reading about how to unify anatomy and props across
code and design tools.

41
EXTRA CONTENT

Quality content that

strengthens course
Here’s a collection of resources that
have helped Aurora learn and grow in
her career as a designer or things we
think you’ll enjoy as you continue your
journey in design systems.

43
Exercise material

As a bonus you can duplicate and use the design library that we’ve
created for the course and take a look into the design process for
the UI of Planner.

Planner Branding
Password file: WTFDesignSystems

Planner UI
Password file: WTFDesignSystems

Component Design Exercise

Password file: WTFDesignSystems

44
Food for thought

Layout
A weekly podcast about design, technology, programming
and everything else.

99% Invisible
From award winning producer Roman Mars, 99% Invisible is
a weekly podcast on the process and power of design.

The future of design systems

Hayley Hughes

Hayley Hughes is an Experience Designer at Airbnb. Here

she explains how its not just product UI design that needs
our attention, how design systems can help businesses
become more efficient.

We should be replaceable
Aurora Pleguezuelo
Using principles of systems theory, design principles and
design culture best practices, in this talk I demonstrate that
great design systems can be timeless.

45
Design systems books

Design systems book

Alla Kholmatova
What are the key qualities of a well-functioning, enduring
design system? Throughout the book, Alla will share an
approach that will help you every day with your work.

Design systems handbook

Jinna Anne, Diana Mounter, Marco Suarez, Katie Sylor-Miller,
Roy Stanfield
This book guides readers through best practices around
planning, designing, building, and implementing a design
system, with insights and first-hand experiences from
experts who have gone through the journey.

46
Curiosities

Humane by design
Jon Jablonski
A resource that provides guidance for designing ethically
humane digital products through patterns focused on user
well-being.

47
Case studies

Reimagining Design Systems at Spotify

Shaun Bent
In this video, Shaun Bent shares knowledge he had accrued
in their work for Spotify with the design community.

48
Content creators

Design Systems Repo

Jad Limcaco
A frequently updated collection of Design System examples,
articles, tools and talks.

Design Systems
A Figma publication for design systems creators, designers,
developers, and managers.

Design Systems News

Stu Robson
A publication full of interesting, relevant, and curated links.

49
Instituto Tramontana aims to raise the
level of professionals and teams that
create products and services.

It prepares some of the most

knowledgeable and experienced people
in our sector, shaping projects that
combine purpose, impact, and
prosperity.

From the training of those who are

starting out to those on management
tracks, through both classroom
programs and audiovisual formats.
Instituto Tramontana does not train the
professionals that the sector demands,
but those who are improving it.

enfoques.net
[email protected]