Lonely Planet

Mail Chimp

M

NYC Transit Authority Graphics Standards Manual

Graphics Standards Manual: 1970

N

Numbers

Sign Construction and Engineering

Design Systems

Style Guides + Toolkits + Pattern Libraries + ???

Lego Component Library

Lego

Integration of Design + Code

Lightning Icon Code

“Tiny Bootstraps, for Every Client

— Dave Rupert

If it’s not documented, it doesn’t exist.

  1. Why Design Systems?

  2. Start with Design Tokens

  3. Baked-In Tools

  4. Define the API

  5. Automation is Essential

Normal Triangle by Maslow Miriam
Un-ITCSS

No Output from Settings & Tools

(What’s missing? Layouts? State modifiers?)

Design Tokens (Settings)

Color preview screenshot with three colors and their values

Scss Variables

$color-text-default: rgb(62, 62, 60);
$color-text-warning: rgb(255, 183, 93);
$color-text-error: rgb(194, 57, 52);

.example {
  background: $color-text-error;
}

👍 Minimal Tooling

👎 Not Meaningfully Organized

👎 Encourages One-Offs

(difficult to automate style-documentation)

CSS Custom Properties

:root {
  --color-text-default: rgb(62, 62, 60);
  --color-text-warning: rgb(255, 183, 93);
  --color-text-error: rgb(194, 57, 52);
}

.example {
  background: var(--color-text-error);
}

Scss Maps

$text-colors: (
  'default': rgb(62, 62, 60),
  'warning': rgb(255, 183, 93),
  'error': rgb(194, 57, 52),
);

.example {
  background: color('error');
}

(See OddBird’s Accoutrement Color)

👍 Meaningful!

👍 Encourages Patterns

👎 Requires Additional Tooling

YAML + Theo

props:
  text_default:
    value: "rgb(62, 62, 60)"
  text_warning: 
    value: "rgb(255, 183, 93)"
  text_error: 
    value: "rgb(194, 57, 52)"

global:
  type: "color"
  category: "text"

(See Salesforce-UX Theo)

👍 Easier to Export

👎 Not A Style Language

Know The Trade-Offs

adjust to your needs…

Global Settings » Theme Defaults » Component Details

$brand-colors: (
  'brand-orange': hsl(24, 100%, 39%),
  'brand-blue': hsl(195, 85%, 35%),
  'brand-pink': hsl(330, 85%, 48%),
);

$theme-colors: (
  'text': …,
  'border': …,
  // ...
);

$button-colors: (
  'button-text': …,
  'button-border': …,
  // ...
);
  1. Why Design Systems?

  2. Start with Design Tokens

  3. Baked-In Tools

  4. Define the API

  5. Automation is Essential

Make Patterns & Documentation

The Lazy Option

Automate from Structured Code

SassDoc + Herman

(a “sass-first” approach…)

// SLDS Colors
// -----------
/// These are the colors we stole from SLDS system,
/// in order to create a demo.
/// @group color
/// @colors
$slds-colors: (
  'text-default': rgb(62, 62, 60),
  'text-warning': rgb(255, 183, 93),
  'text-error': rgb(194, 57, 52),
);

Herman screenshot

There are also framework-first tools…

VueDS + Theo

Vue Design Systems

What are the trade-offs for you?

  1. Why Design Systems?

  2. Start with Design Tokens

  3. Baked-In Tools

  4. Define the API

  5. Automation is Essential

Lightning Icon Code

Lightning Code Scribbled

class="slds-icon slds-icon-text-warning slds-icon--x-small"

data-slds-icon-color=“default | warning | error”

Template Macros (Jinja/Nunjucks)

{{ icon(name, alt, color, size) }}

Herman Components (in Sass)

/// Navigation items, with inactive and active states.
/// @group nav
/// @example njk
///   {% import 'nav.macros.njk' as nav %}
///   {{ nav.bar(active="dashboard", items=[…]) }}
.nav-bar {
  // …
}

Herman Component Screenshot

Framework Components (Vue)

<show-icon name="folder" color="default" />

VueDS Components

<docs>
  ```jsx
  <nav-bar active="Dashboard" :navItems="[…]"/>
  ```
</docs>

VueDS Component Screenshot

  1. Why Design Systems?

  2. Start with Design Tokens

  3. Baked-In Tools

  4. Define the API

  5. Automation is Essential

Up-To-Date > Comprehensive

Start small, make it easy, and expand…

Meaningful Code

Readable by Humans & Machines

Inline Documentation

All in one place…

Website like Legos
Put your helmet on

Dragons