A Tasty Product
Some text that describes a super tasty thing that definitely isn't a shoe or piece of clothing.
$8.95
Design System Typography
Intent, Application, and Scale
Jason Pamental @jpamental
Principal Designer @ Chewy
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Ag
Well hello!
Let’s jump in
Design Systems
- Design better, faster
- Develop more efficiently
- Not a pinnacle, but a plateau
Typography in Design Systems
Content—and intent—should inform design
Designed to Scale
What are the levers in our systems
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Spacer 1
Spacer 2
Spacer 3
Spacer 4
Spacer 5
Spacer 6
Spacer 7
Spacer 8
Spacer 9
Quahog
Color themes, consistent typography
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Chirp
Pulling all the levers
Ag
Ag
Ag
Ag
Ag
Ag
A Token Demonstration
Our sample design system
Color Mode
--ds-bkgrnd: var(--c-white);
--ds-bkgrnd-alt: var(--qc-lt-blue);
--ds-text-head: var(--qc-navy);
--ds-text-body: var(--c-gray-800);
--ds-button: var(--qc-gold);
--ds-border: var(--c-gray-400);
.dark {
--ds-bkgrnd: var(--c-gray-900);
--ds-bkgrnd-alt: var(--qc-navy);
--ds-text-head: var(--qc-ltr-blue);
--ds-text-body: var(--c-white);
--ds-button: var(--qc-gold);
--ds-border: var(--c-gray-700);
}
Text Size
--ds-text-head-font-family: "Roboto Slab";
--ds-text-head1-size: 4vw;
--ds-text-head1-lh: 1.2;
--ds-text-head2-size: 3vw;
--ds-text-head2-lh: 1.25;
--ds-text-head-font-family: "Work Sans";
--ds-text-p-size: 1.5vw;
--ds-text-p-lh: 1.5;
--ds-text-p2-size: 1vw;
--ds-text-p2-lh: 1.33;
--ds-text-weight-multiplier: 1;
.dark {
--ds-text-weight-multiplier: 0.985;
}
Spacing
--ds-space-1: 0.25rem; --ds-space-2: 0.5rem; --ds-space-3: 0.75rem; --ds-space-4: 1rem; --ds-space-5: 1.25rem; --ds-space-6: 1.5rem; --ds-space-7: 1.75rem; --ds-space-8: 2rem; --ds-space-9: 3rem;
Typography & Color
Chapter One: Loomings
Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship.
:root {
--ds-bkgrnd: var(--c-white);
--ds-text-head: var(--qc-navy);
--ds-text-body: var(--c-gray-800);
--ds-text-weight-multiplier: 1;
}
:root .dark {
--ds-bkgrnd: var(--c-gray-900);
--ds-text-head: var(--qc-ltr-blue);
--ds-text-body: var(--c-white);
--ds-text-weight-multiplier: 0.985;
}
Typography & Space
Chapter One: Loomings
Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship.
Whale Facts
- There are two types of whales: the baleen whales & the toothed whales
- Most are very, very large
- Usually only male narwhals have a tusk
- Humpback whales don’t eat for most of the year
- The Antarctic blue whale is the largest animal on the planet
:root {
--ds-text-head1-size: 2vw;
--ds-text-head1-lh: 1.25;
--ds-text-p-size: 1vw;
--ds-text-p-lh: 1.33;
}
A Most Ferocious Lion
Call me Leopold. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can.
Collie Facts
- Most are very, very fluffy
- Usually male collies are cuddlers
- The two types of collies: regal & majestic, and actual collies—who are goofballs
- They are very good at clearing side tables with their snoots
A Cozy Bed
Every bed becomes boring after a 17 sleeps. Then it must be replaced. Hey, we don’t make the rules.
$21.95
A Squeaky Critter
Some text that describes a very squeaky thing that definitely isn't an actual squirrel, but could be.
$16.95
Replacement TV Remote
You can’t expect that not to get eaten. Really.
$7.95
.content-forward {
--ds-text-head1-size: 6vw;
--ds-text-head1-lh: 2;
}
h1 {
display: inline;
float: left;
font-weight: 900;
shape-outside: polygon(0px 0px,...);
width: 30vw;
}
.product-forward {
--ds-text-head-font-family: "Gordita";
--ds-text-head1-size: 3vw;
--ds-text-head1-lh: 1.2;
--ds-text-p-font-family: "Gordita";
--ds-text-p-size: 1.25vw;
--ds-text-p-lh: 1.25;
}
.enterprise {
--ds-space-1: 0.125rem;
--ds-space-2: 0.25rem;
--ds-space-3: 0.5rem;
--ds-space-4: 0.75rem;
--ds-space-5: 1rem;
--ds-space-6: 1.125rem;
--ds-space-7: 1.25rem;
--ds-space-8: 1.5rem;
--ds-space-9: 2rem;
}
A Most Ferocious Lion
Call me Leopold. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can.
Related Products
A Tasty Product
Some text that describes a super tasty thing that definitely isn't a shoe or piece of clothing.
$8.95
A Cozy Bed
Every bed becomes boring after a 17 sleeps. Then it must be replaced. Hey, we don’t make the rules.
$21.95
A Squeaky Critter
Some text that describes a very squeaky thing that definitely isn't an actual squirrel, but could be.
$16.95
Replacement TV Remote
You can’t expect that not to get eaten. Really.
$7.95
.card {
--ds-text-head3-size: 1.5vw;
--ds-text-head3-lh: 1.15;
--ds-text-p-size: 0.9vw;
--ds-text-p-lh: 1.2;
}
.content-layout__buy {
--ds-text-head3-size: 1.25vw;
}