Design Tokens
Use in place of hard-coded values (such as hex values for color or pixel values for spacing) to maintain a scalable and consistent visual system.
Colors View Test Page
These are the colors used throughout Cupcake’s elements and components that help give visual context, emphasize meaning and to aesthetically style the user interface.
primary
Primary
primary Light
primary Button + Link + Info State
primary Button Hover + Link Hover + Info State Hover
primary Dark
primary Lightest
primary Button Active + primary Button Line + Link Active + primary State Active + primary Text
primary Background + primary State Background + Pill Background
success
Primary
success Light
success Button + Link + Info State
success Button Hover + Link Hover + Info State Hover
success Dark
success Lightest
success Button Active + success Button Line + Link Active + success State Active + success Text
success Background + success State Background + Pill Background
warning
Primary
warning Light
warning Button + Link + Info State
warning Button Hover + Link Hover + Info State Hover
warning Dark
warning Lightest
warning Button Active + warning Button Line + Link Active + warning State Active + warning Text
warning Background + warning State Background + Pill Background
danger
Primary
danger Light
danger Button + Link + Info State
danger Button Hover + Link Hover + Info State Hover
danger Dark
danger Lightest
danger Button Active + danger Button Line + Link Active + danger State Active + danger Text
danger Background + danger State Background + Pill Background
Gray
Gray 9
Gray 4
Header Text + Icon
Button Disabled + Icon Disabled Secondary Button Line + Understated Icon Disabled + Card Line Hover + Dark Divider Line
Gray 8
Gray 3
Body Text
Shadows + Decorative Icon
Gray 7
Gray 2
Helper Text
Secondary Background Active + Card Line + Pill Background
Gray 6
Gray 2
Header Text Disabled + Body Text Disabled + Icon Disabled + Link Disabled
Secondary Button + Page Background + Light Divider Line + Pill Background
Gray 5
Gray 0
Understated Icon
Secondary Background Hover + Table Row Hover + Dropdown Item Hover + List Item Hover
Icons View Test Page
Simple icon sizing helpers
Shadows View Test Page
Use depth to create hierarchy and layering
none
xs
sm
md
lg
Spacing View Test Page
Spacing is used to consistently apply paddings and margins across our components. .c-p-{direction}-{value}, .c-m-{direction}-{value}
xxl
xl
lg
md
sm
xs
xxs
Typography View Test Page
Documentation and examples for Cupcake typography, including global settings, headings, body text and more.
.c-header-xxl
The quick brown fox jumps over the lazy dog.
.c-text-xxl
The quick brown fox jumps over the lazy dog.
.c-header-xl
The quick brown fox jumps over the lazy dog.
.c-text-xl
The quick brown fox jumps over the lazy dog.
.c-header-lg
The quick brown fox jumps over the lazy dog.
.c-text-lg
The quick brown fox jumps over the lazy dog.
.c-header-md
The quick brown fox jumps over the lazy dog.
.c-text-md
The quick brown fox jumps over the lazy dog.
.c-header-sm
The quick brown fox jumps over the lazy dog.
.c-text-sm
The quick brown fox jumps over the lazy dog.
.c-header-xs
The quick brown fox jumps over the lazy dog.
.c-text-xs
The quick brown fox jumps over the lazy dog.
.c-text-heavy
.c-text-bold
.c-text-semibold
.c-text-light
.c-text-italic
.c-text-uppercase
.c-text-lowercase
.c-text-capitalize
.c-text-monospace
.c-text-underline
.c-text-strikethrough
.c-text-primary
.c-text-success
.c-text-warning
.c-text-danger