Paste

Design Systemv0.1

Design Tokens

background-colors

Name
color-background
Value
#ffffff
Comment
Default background color for any container
Name
color-background-body
Value
#ffffff
Comment
Background color of the main page body
Name
color-background-brand
Value
#233659
Comment
Primary brand background, accessible with inverse text
Name
color-background-brand-highlight
Value
#f22f46
Comment
Highlight brand background, accessible with black text
Name
color-background-destructive
Value
#cb0000
Comment
Background for destructive actions or highlights
Name
color-background-destructive-dark
Value
#b20600
Comment
Dark background for destructive actions or highlights
Name
color-background-destructive-darker
Value
#921200
Comment
Darker background for destructive actions or highlights
Name
color-background-destructive-light
Value
#ecb6b6
Comment
Light background for destructive actions or highlights
Name
color-background-destructive-lighter
Value
#f5dddd
Comment
Lighter background for destructive actions or highlights
Name
color-background-destructive-lightest
Value
#fff6f6
Comment
Lightest background for destructive actions or highlights
Name
color-background-error
Value
#cb0000
Comment
Error background color
Name
color-background-error-lightest
Value
#fff6f6
Comment
Lightest error background color
Name
color-background-inverse
Value
#4f5355
Comment
Inverse background color for any container
Name
color-background-primary
Value
#0075c3
Comment
Background for primary actions or highlights
Name
color-background-primary-dark
Value
#005ea6
Comment
Dark background for primary actions or highlights
Name
color-background-primary-darker
Value
#003e82
Comment
Darker background for primary actions or highlights
Name
color-background-primary-light
Value
#b3d3e9
Comment
Light background for primary actions or highlights
Name
color-background-primary-lighter
Value
#dceaf4
Comment
Lighter background for primary actions or highlights
Name
color-background-primary-lightest
Value
#f6fcff
Comment
Lightest background for primary actions or highlights
Name
color-background-row-striped
Value
#f8f8f9
Comment
Background color for alternative striped rows
Name
color-background-success
Value
#00994a
Comment
Success background color
Name
color-background-success-lightest
Value
#e0ffef
Comment
Lightest success background color
Name
color-background-warning
Value
#e46216
Comment
Warning background color
Name
color-background-warning-lightest
Value
#fff5eb
Comment
Lightest warning background color

border-colors

Name
color-border
Value
#c8cccf
Comment
Default border color
Name
color-border-dark
Value
#e4e7e9
Comment
Dark border color
Name
color-border-destructive
Value
#cb0000
Comment
Destructive border color
Name
color-border-destructive-dark
Value
#b20600
Comment
Destructive focus border color
Name
color-border-destructive-darker
Value
#921200
Comment
Destructive hover border color
Name
color-border-destructive-light
Value
#ecb6b6
Comment
Destructive focus border color
Name
color-border-destructive-lighter
Value
#f5dddd
Comment
Destructive focus border color
Name
color-border-error
Value
#cb0000
Comment
Error border color
Name
color-border-input
Value
#888c8e
Comment
Input border color
Name
color-border-input-focus
Value
#0075c3
Comment
Input focus border color
Name
color-border-input-hover
Value
#0075c3
Comment
Input hover border color
Name
color-border-light
Value
#888c8e
Comment
Light border color
Name
color-border-primary
Value
#0075c3
Comment
Primary border color
Name
color-border-primary-dark
Value
#005ea6
Comment
Dark primary border color
Name
color-border-primary-darker
Value
#003e82
Comment
Darker primary border color
Name
color-border-primary-light
Value
#b3d3e9
Comment
Light primary border color
Name
color-border-primary-lighter
Value
#dceaf4
Comment
Lighter primary border color

border-widths

Name
border-width-0
Value
0
Comment
Border width reset
Name
border-width-10
Value
1px
Comment
Small border width
Name
border-width-20
Value
2px
Comment
Large border width

colors

Name
color-brand
Value
#233659
Comment
Default branding color
Name
color-brand-highlight
Value
#f22f46
Comment
Twilio brand red
Name
color-gray-0
Value
#ffffff
Comment
Gray Color 0
Name
color-gray-10
Value
#fafafa
Comment
Gray Color 1
Name
color-gray-100
Value
#282a2b
Comment
Gray Color 10
Name
color-gray-20
Value
#f8f8f9
Comment
Gray Color 2
Name
color-gray-30
Value
#f2f3f4
Comment
Gray Color 3
Name
color-gray-40
Value
#e4e7e9
Comment
Gray Color 4
Name
color-gray-50
Value
#c8cccf
Comment
Gray Color 5
Name
color-gray-60
Value
#888c8e
Comment
Gray Color 6
Name
color-gray-70
Value
#666a6d
Comment
Gray Color 7
Name
color-gray-80
Value
#4f5355
Comment
Gray Color 8
Name
color-gray-90
Value
#424547
Comment
Gray Color 9

fonts

Name
font-family-code
Value
'Fira Mono', 'Courier New', Courier, monospace
Comment
Name
font-family-text
Value
'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif
Comment

font-sizes

Name
font-size-10
Value
0.75rem
Comment
Constant typography token for font size 0
Name
font-size-100
Value
1.5rem
Comment
Constant typography token for font size 9
Name
font-size-20
Value
0.875rem
Comment
Constant typography token for font size 1
Name
font-size-30
Value
1rem
Comment
Constant typography token for font size 2
Name
font-size-40
Value
1.125rem
Comment
Constant typography token for font size 3
Name
font-size-50
Value
1.25rem
Comment
Constant typography token for font size 4
Name
font-size-60
Value
1.5rem
Comment
Constant typography token for font size 5
Name
font-size-70
Value
1.5rem
Comment
Constant typography token for font size 6
Name
font-size-80
Value
1.5rem
Comment
Constant typography token for font size 7
Name
font-size-90
Value
1.5rem
Comment
Constant typography token for font size 8

font-weights

Name
font-weight-bold
Value
700
Comment
Font weight for bold weight
Name
font-weight-light
Value
300
Comment
Font weight for light weight
Name
font-weight-medium
Value
500
Comment
Font weight for medium weight
Name
font-weight-normal
Value
400
Comment
Font weight for normal weight
Name
font-weight-semibold
Value
600
Comment
Font weight for semibold weight

radii

Name
border-radius-0
Value
0
Comment
Border radius reset
Name
border-radius-10
Value
3px
Comment
Small border radius
Name
border-radius-20
Value
4px
Comment
Large border radius
Name
border-radius-30
Value
8px
Comment
Larger border radius
Name
border-radius-circle
Value
50%
Comment
Circular border radius

shadows

Name
shadow-card
Value
0 2px 4px 0 rgba(40, 42, 43, 0.3)
Comment
Shadow for cards.

sizings

Name
size-0
Value
0
Comment
Generic sizing token scale for UI components.
Name
size-10
Value
5.5rem
Comment
Generic sizing token scale for UI components.
Name
size-100
Value
64rem
Comment
Generic sizing token scale for UI components.
Name
size-110
Value
70.5rem
Comment
Generic sizing token scale for UI components.
Name
size-120
Value
77rem
Comment
Generic sizing token scale for UI components.
Name
size-20
Value
12rem
Comment
Generic sizing token scale for UI components.
Name
size-30
Value
18.5rem
Comment
Generic sizing token scale for UI components.
Name
size-40
Value
25rem
Comment
Generic sizing token scale for UI components.
Name
size-50
Value
31.5rem
Comment
Generic sizing token scale for UI components.
Name
size-60
Value
38rem
Comment
Generic sizing token scale for UI components.
Name
size-70
Value
44.5rem
Comment
Generic sizing token scale for UI components.
Name
size-80
Value
51rem
Comment
Generic sizing token scale for UI components.
Name
size-90
Value
57.5rem
Comment
Generic sizing token scale for UI components.
Name
size-icon-10
Value
1rem
Comment
Icon sizing token
Name
size-icon-20
Value
1.25rem
Comment
Icon sizing token
Name
size-icon-30
Value
1.5rem
Comment
Icon sizing token

spacings

Name
space-0
Value
0
Comment
Name
space-10
Value
0.125rem
Comment
Name
space-100
Value
2.25rem
Comment
Name
space-110
Value
2.5rem
Comment
Name
space-120
Value
2.75rem
Comment
Name
space-130
Value
3rem
Comment
Name
space-140
Value
3.25rem
Comment
Name
space-150
Value
3.5rem
Comment
Name
space-160
Value
3.75rem
Comment
Name
space-170
Value
4rem
Comment
Name
space-180
Value
4.25rem
Comment
Name
space-190
Value
4.5rem
Comment
Name
space-20
Value
0.25rem
Comment
Name
space-200
Value
4.75rem
Comment
Name
space-30
Value
0.5rem
Comment
Name
space-40
Value
0.75rem
Comment
Name
space-50
Value
1rem
Comment
Name
space-60
Value
1.25rem
Comment
Name
space-70
Value
1.5rem
Comment
Name
space-80
Value
1.75rem
Comment
Name
space-90
Value
2rem
Comment

text-colors

Name
color-text
Value
#282a2b
Comment
Body text color
Name
color-text-brand-highlight
Value
#f22f46
Comment
Twilio brand red, accessible on large text only.
Name
color-text-brand-inverse
Value
#ffffff
Comment
Text color used on any brand color
Name
color-text-error
Value
#cb0000
Comment
Error text for inputs and error misc
Name
color-text-icon
Value
#282a2b
Comment
Default icon color.
Name
color-text-inverse
Value
#ffffff
Comment
Inverse text color for dark backgrounds
Name
color-text-inverse-weak
Value
#888c8e
Comment
Weak inverse text color for dark backgrounds
Name
color-text-label
Value
#282a2b
Comment
Text color for field labels.
Name
color-text-link
Value
#0075c3
Comment
Link text
Name
color-text-link-dark
Value
#005ea6
Comment
Dark shade of link text to be used in interactions
Name
color-text-link-darker
Value
#003e82
Comment
Darker shade of link text to be used in interactions
Name
color-text-link-destructive
Value
#cb0000
Comment
Destructive link text
Name
color-text-link-destructive-dark
Value
#b20600
Comment
Dark shade of destructive link text to be used in interactions
Name
color-text-link-destructive-darker
Value
#921200
Comment
Darker shade of destructive link text to be used in interactions
Name
color-text-link-destructive-light
Value
#ecb6b6
Comment
Light shade of destructive link text to be used in interactions
Name
color-text-link-light
Value
#b3d3e9
Comment
Light shade of link text to be used in interactions
Name
color-text-placeholder
Value
#666a6d
Comment
Input placeholder text.
Name
color-text-success
Value
#00994a
Comment
Text color for success text.
Name
color-text-warning
Value
#e46216
Comment
Color for warning text.
Name
color-text-weak
Value
#666a6d
Comment
Weak body text for visual hierarchy.

z-indices

Name
z-index-0
Value
0
Comment
Name
z-index-10
Value
4
Comment
Name
z-index-20
Value
8
Comment
Name
z-index-30
Value
12
Comment
Name
z-index-40
Value
16
Comment
Name
z-index-50
Value
20
Comment
Name
z-index-60
Value
24
Comment
Name
z-index-70
Value
28
Comment
Name
z-index-80
Value
32
Comment
Name
z-index-90
Value
34
Comment