← Back

O'Reilly Media Books

The Definitive Guide to Technical Publishing Design

Learning Design Systems

The Definitive Guide

The Red Panda

Animal Gallery

CSS-rendered woodcut-style illustrations

Owl

Camel

Frog

Snake

Bat

Bear

Color Band System

The O'Reilly color taxonomy

Red Ruby/Rails
Blue Python
Green JavaScript
Purple CSS
Teal Networking
Orange Java

Typography Specimen

Serif authority meets functional clarity

Title — Garamond/Serif

Learning Design Systems

Subtitle — Sans-Serif Italic

The Definitive Guide

Body — Clean Serif

This book covers everything you need to know about building, maintaining, and scaling design systems. From foundational principles to advanced implementation strategies, we explore the full spectrum of design system development.

Code Example

O'Reilly signature code formatting

1 2 3 4 5 6 7 8
function buildDesignSystem() {
  const tokens = createTokens();
  const components = buildComponents(tokens);

  return {
    tokens,
    components
  };
}

Book Spine Shelf

A packed O'Reilly bookshelf

Definitive
Guide
Learning
Mastering
Programming
Advanced
Definitive
Guide
Learning
Mastering
Programming
Advanced

Table of Contents

Classic O'Reilly chapter formatting

Chapter 1 Introduction to Design Systems 1
Chapter 2 Typography and Visual Hierarchy 23
Chapter 3 Color Theory and Application 45
Chapter 4 Component Architecture 67
Chapter 5 Accessibility Best Practices 89
Chapter 6 Documentation Strategies 112
Chapter 7 Scaling and Maintenance 134
Chapter 8 Case Studies 156

Colophon

The animal on the cover of Learning Design Systems is a red panda (Ailurus fulgens). Red pandas are small arboreal mammals native to the eastern Himalayas and southwestern China. Despite their name, red pandas are not closely related to giant pandas—they are actually more closely related to raccoons, weasels, and skunks.

Many of the animals on O'Reilly covers are endangered; all of them are important to the world.

The cover image is from Wood's Illustrated Natural History. The cover fonts are Garamond and Myriad. The text font is Adobe Minion Pro; the heading font is Adobe Myriad Condensed; and the code font is Dalton Maag's Ubuntu Mono.