Design Tokens

Tokens for your designs

Import design tokens Colors Typography Size Space Border radius Opacity Box shadow Layout Animation

#Import design tokens

#Choose format

#Copy import statement

@import "~@siteimprove/fancylib/design-tokens/variables.scss";

#Colors

#Neutrals

`$color--white`	`#ffffff`
`$color--gray--lightest`	`#F6F6F6`
`$color--gray--lighter`	`#EDEDED`
`$color--gray--light`	`#A6A6A7`
`$color--gray`	`#767676`
`$color--gray--dark`	`#4D4D50`
`$color--gray--darker`	`#202124`
`$color--gray--darkest`	`#18191B`
`$color--black`	`#000000`

#Blue

`$color--blue--lightest`	`#9eb7ed`
`$color--blue--lighter`	`#6e94e5`
`$color--blue--light`	`#3d70dc`
`$color--blue`	`#0d4cd3`
`$color--blue--dark`	`#0a399e`
`$color--blue--darker`	`#07266a`
`$color--blue--darkest`	`#031335`

#Teal

`$color--teal--lightest`	`#d5fbfb`
`$color--teal--lighter`	`#95f4f4`
`$color--teal--light`	`#23e8e8`
`$color--teal`	`#1CBCBD`
`$color--teal--dark`	`#169191`
`$color--teal--darker`	`#127474`
`$color--teal--darkest`	`#093a3a`

#Green

`$color--green--lightest`	`#b3efcf`
`$color--green--lighter`	`#8ee6b8`
`$color--green--light`	`#68dea0`
`$color--green`	`#42d688`
`$color--green--dark`	`#32a166`
`$color--green--darker`	`#216b44`
`$color--green--darkest`	`#103622`

#Yellow

`$color--yellow--lightest`	`#fff7d3`
`$color--yellow--lighter`	`#ffea92`
`$color--yellow--light`	`#ffdc49`
`$color--yellow`	`#ffd31c`
`$color--yellow--dark`	`#bf9e15`
`$color--yellow--darker`	`#806a0e`
`$color--yellow--darkest`	`#403507`

#Red

`$color--red--lightest`	`#ffb8c0`
`$color--red--lighter`	`#ff94a1`
`$color--red--light`	`#ff7181`
`$color--red`	`#ff4d62`
`$color--red--dark`	`#bf3a4a`
`$color--red--darker`	`#802731`
`$color--red--darkest`	`#401319`

#Orange

`$color--orange--lightest`	`#ffd1bb`
`$color--orange--lighter`	`#ffba98`
`$color--orange--light`	`#ffa376`
`$color--orange`	`#ff8c54`
`$color--orange--dark`	`#bf693f`
`$color--orange--darker`	`#80462a`
`$color--orange--darkest`	`#402315`

#Purple

`$color--purple--lightest`	`#f3ebfe`
`$color--purple--lighter`	`#d1cbfd`
`$color--purple--light`	`#a9a1f4`
`$color--purple`	`#7a63c7`
`$color--purple--dark`	`#5f4eaa`
`$color--purple--darker`	`#413673`
`$color--purple--darkest`	`#010125`

#Pink

`$color--pink--lightest`	`#feebf4`
`$color--pink--lighter`	`#fdcbe1`
`$color--pink--light`	`#f4a1b5`
`$color--pink`	`#dd4889`
`$color--pink--dark`	`#ce3f81`
`$color--pink--darker`	`#b42367`
`$color--pink--darkest`	`#4b112c`

#Chart: default

`$color--chart--1`	`$color--blue (#0d4cd3)`
`$color--chart--2`	`$color--teal (#1CBCBD)`
`$color--chart--3`	`$color--blue--dark (#0a399e)`
`$color--chart--4`	`$color--orange (#ff8c54)`
`$color--chart--5`	`$color--pink (#dd4889)`
`$color--chart--6`	`$color--purple--dark (#5f4eaa)`
`$color--chart--7`	`$color--teal--darker (#127474)`
`$color--chart--8`	`$color--yellow--darker (#806a0e)`

#Heatrange: warm

`$color--heat--warm--1`	`#3EC67B`
`$color--heat--warm--2`	`#42D688`
`$color--heat--warm--3`	`#68D985`
`$color--heat--warm--4`	`#8EDC82`
`$color--heat--warm--5`	`#B3DF80`
`$color--heat--warm--6`	`#D9E27D`
`$color--heat--warm--7`	`#FFE57A`
`$color--heat--warm--8`	`#FFC76D`
`$color--heat--warm--9`	`#FFAA61`
`$color--heat--warm--10`	`#FF8C54`
`$color--heat--warm--11`	`#FF6D5B`
`$color--heat--warm--12`	`$color--red (#ff4d62)`

#Heatrange: cool

`$color--heat--cool--1`	`#E7EDFB`
`$color--heat--cool--2`	`#CFDBF6`
`$color--heat--cool--3`	`#B6C9F2`
`$color--heat--cool--4`	`$color--blue--lightest (#9eb7ed)`
`$color--heat--cool--5`	`$color--blue--lighter (#6e94e5)`
`$color--heat--cool--6`	`$color--blue--light (#3d70dc)`
`$color--heat--cool--7`	`$color--blue (#0d4cd3)`
`$color--heat--cool--8`	`#0A3DA9`
`$color--heat--cool--9`	`#082E7F`
`$color--heat--cool--10`	`#051E54`

#Scales: cool

`$color--scale--cool--1`	`$color--blue--light (#3d70dc)`
`$color--scale--cool--2`	`$color--blue (#0d4cd3)`
`$color--scale--cool--3`	`$color--heat--cool--8 (#0A3DA9)`
`$color--scale--cool--4`	`$color--heat--cool--9 (#082E7F)`

#Scales: warm

`$color--scale--warm--1`	`$color--green (#42d688)`
`$color--scale--warm--2`	`$color--yellow (#ffd31c)`
`$color--scale--warm--3`	`$color--orange (#ff8c54)`
`$color--scale--warm--4`	`$color--red (#ff4d62)`

#Status

`$color--status--positive--dark`	`$color--green--darker (#216b44)`
`$color--status--positive--light`	`$color--green--lightest (#b3efcf)`
`$color--status--positive--light--foreground`	`$color--green--darkest (#103622)`
`$color--status--warning--dark`	`$color--yellow--darker (#806a0e)`
`$color--status--warning--dark--foreground`	`$color--white (#ffffff)`
`$color--status--warning--neutral`	`$color--yellow (#ffd31c)`
`$color--status--warning--light`	`$color--yellow--lightest (#fff7d3)`
`$color--status--warning--light--foreground`	`$color--yellow--darkest (#403507)`
`$color--status--critical--dark`	`$color--orange--darker (#80462a)`
`$color--status--critical--light`	`#FFF4EE`
`$color--status--critical--light--foreground`	`$color--orange--darker (#80462a)`
`$color--status--negative--dark`	`$color--red--dark (#bf3a4a)`
`$color--status--negative--light`	`#FFEDEF`
`$color--status--negative--light--foreground`	`$color--red--dark (#bf3a4a)`
`$color--status--subtle--dark`	`$color--gray--dark (#4D4D50)`
`$color--status--subtle--light`	`$color--gray--lighter (#EDEDED)`
`$color--status--subtle--light--foreground`	`$color--gray--dark (#4D4D50)`
`$color--status--neutral--dark`	`$color--blue (#0d4cd3)`
`$color--status--neutral--light`	`$color--heat--cool--1 (#E7EDFB)`
`$color--status--neutral--light--foreground`	`$color--blue (#0d4cd3)`
`$color--status--highlight1--dark`	`$color--teal--darker (#127474)`
`$color--status--highlight1--light`	`$color--teal--lightest (#d5fbfb)`
`$color--status--highlight1--light--foreground`	`$color--teal--darkest (#093a3a)`
`$color--status--highlight2--dark`	`$color--pink--dark (#ce3f81)`
`$color--status--highlight2--light`	`$color--pink--lightest (#feebf4)`
`$color--status--highlight3--dark`	`$color--purple (#7a63c7)`
`$color--status--highlight3--light`	`$color--purple--lightest (#f3ebfe)`

#Border colors

`$color--border--separator`	`$color--gray--lighter (#EDEDED)`
`$color--border--interactive--default`	`$color--gray (#767676)`
`$color--border--interactive--error`	`$color--red (#ff4d62)`
`$color--border--interactive--hover`	`$color--blue (#0d4cd3)`
`$color--border--interactive--active`	`$color--blue (#0d4cd3)`
`$color--border--interactive--selected`	`$color--blue (#0d4cd3)`
`$color--border--interactive--disabled`	`$color--gray--lighter (#EDEDED)`

#Background colors

`$color--background--main--page`	`#F7F8FD`
`$color--background--interactive--default`	`$color--white (#ffffff)`
`$color--background--interactive--hover`	`$color--gray--lightest (#F6F6F6)`
`$color--background--interactive--active`	`#CFDBF6`
`$color--background--interactive--selected`	`#E7EDFB`
`$color--background--interactive--disabled`	`$color--gray--lightest (#F6F6F6)`
`$color--background--static--primary`	`$color--white (#ffffff)`
`$color--background--static--secondary`	`$color--gray--lightest (#F6F6F6)`

#Toast color

`$color--toast--background--warning`	`$color--yellow (#ffd31c)`
`$color--toast--color--warning`	`$color--yellow--darkest (#403507)`
`$color--toast--foreground--warning`	`$color--yellow--darkest (#403507)`

#Button color

`$color--button--cta--secondary--not--active`	`$color--blue--darker (#07266a)`
`$color--button--cta--secondary--active`	`$color--blue--darkest (#031335)`
`$color--button--secondary--not--active`	`$color--blue--darker (#07266a)`
`$color--button--secondary--not--active--hover--border`	`$color--blue--darker (#07266a)`
`$color--button--secondary--active`	`$color--blue--darkest (#031335)`

#Text colors

`$color--typography--tone--subtle`	`$color--gray--dark (#4D4D50)`
`$color--typography--tone--positive`	`$color--green--darker (#216b44)`
`$color--typography--tone--negative`	`$color--red--dark (#bf3a4a)`
`$color--typography--tone--warning`	`$color--orange--darker (#80462a)`
`$color--text--interactive--dark--default`	`$color--gray--darker (#202124)`
`$color--text--interactive--light--default`	`$color--white (#ffffff)`
`$color--text--interactive--disabled`	`$color--gray (#767676)`
`$color--text--static--header`	`$color--gray--darker (#202124)`
`$color--text--static--body`	`$color--gray--darker (#202124)`

`$color--navigation--background`	`#202124`
`$color--navigation--hover`	`#4D4D50`
`$color--navigation--active`	`#4D4D50`

`$color--search-navigation--text--default`	`$color--text--interactive--light--default ({color.white.value})`
`$color--search-navigation--background--default`	`$color--gray--darker (#202124)`
`$color--search-navigation--hover--outline`	`$color--navigation--hover (#4D4D50)`
`$color--search-navigation--active--outline`	`$color--text--interactive--light--default ({color.white.value})`
`$color--search-navigation--results-section--border`	`#4D4D50`
`$color--search-navigation--results-item--hover`	`$color--navigation--hover (#4D4D50)`
`$color--search-navigation--results-item--active`	`$color--navigation--active (#4D4D50)`

#Typography

#Font-family

`$font-family--default`	'Inter', arial, sans-serif
`$font-family--alternative`	'Inter', arial, sans-serif
`$font-family--code`	'Roboto Mono', courier, sans-serif
`$font-family--heading`	'Geologica', arial, sans-serif
`$font-family--display`	'Geologica', arial, sans-serif

#Font-size

`$font-size--xx-small`	0.625rem (10px)
`$font-size--x-small`	0.75rem (12px)
`$font-size--small`	0.875rem (14px)
`$font-size--medium`	1rem (16px)
`$font-size--large`	1.125rem (18px)
`$font-size--x-large`	1.375rem (22px)
`$font-size--xx-large`	1.6875rem (27px)
`$font-size--xxx-large`	2rem (32px)
`$font-size--interactive--default`	$font-size--small

#Font-weight

`$font-weight--normal`	400
`$font-weight--medium`	500
`$font-weight--bold`	700
`$font-weight--interactive--default`	$font-weight--normal
`$font-weight--interactive--selected`	$font-weight--medium

#Line-height

`$line-height--reset`	1
`$line-height--x-small`	1.1
`$line-height--small`	1.3
`$line-height--medium`	1.4
`$line-height--large`	1.5
`$line-height--x-large`	1.6

#Size

`$size--button--small`	1.375rem (22px)
`$size--button--default`	2rem (32px)
`$size--button--large`	2.5rem (40px)
`$size--icon--small`	0.75rem (12px)
`$size--icon--medium`	1rem (16px)
`$size--icon--default`	1.25rem (20px)
`$size--icon--responsive`	1.25em
`$size--illustration--small`	6rem (96px)
`$size--illustration--medium`	8rem (128px)
`$size--illustration--default`	12rem (192px)
`$size--pill--small`	1.25rem (20px)
`$size--pill--default`	1.375rem (22px)
`$size--pill--large`	1.5rem (24px)
`$size--shadow--focus--inner`	0 0 0 0.125rem (2px)
`$size--shadow--focus--outer`	0 0 0 0.25rem (4px)
`$size--shadow--hover`	0 0 0 0.1875rem (3px)

#Space

`$space--xx-small`	0.25rem (4px)
`$space--x-small`	0.5rem (8px)
`$space--small`	0.75rem (12px)
`$space--medium`	1rem (16px)
`$space--large`	1.25rem (20px)
`$space--x-large`	1.5rem (24px)
`$space--xx-large`	2rem (32px)
`$space--xxx-large`	2.5rem (40px)

#Border radius

`$border-radius--small`	0.1875rem (3px)
`$border-radius--medium`	0.3125rem (5px)
`$border-radius--rounded`	125rem (2000px)

#Opacity

$opacity--shadow--hover

0.2

#Box shadow

`$shadow--layer--low`	0 0.125rem 0.25rem 0 rgba(31, 43, 63, 0.08), 0 0.0625rem 0.125rem 0 rgba(31, 43, 63, 0.2)
`$shadow--layer--medium`	0 0.25rem 0.5rem 0 rgba(31, 43, 63, 0.12), 0 0.125rem 0.25rem 0 rgba(31, 43, 63, 0.08)
`$shadow--layer--high`	0 0.5rem 0.75rem 0 rgba(31, 43, 63, 0.16), 0 0.25rem 0.375rem 0 rgba(31, 43, 63, 0.04)
`$shadow--focus--base`	$size--shadow--focus--inner $color--white
`$shadow--focus--default`	$shadow--focus--base, $size--shadow--focus--outer $color--blue
`$shadow--hover--default`	$size--shadow--hover rgba(27, 78, 161, $opacity--shadow--hover)
`$shadow--hover--error`	$size--shadow--hover rgba(232, 70, 94, $opacity--shadow--hover)
`$shadow--hover--left`	inset 0.1875rem 0 0 0 $color--gray--light
`$shadow--selected--bottom`	inset 0 -0.1875rem 0 0 $color--blue
`$shadow--selected--left`	inset 0.1875rem 0 $color--blue

#Layout

`$layout--small`	36rem (576px)
`$layout--medium`	48rem (768px)
`$layout--large`	62rem (992px)
`$layout--x-large`	75rem (1200px)
`$layout--xx-large`	100rem (1600px)

#Animation

`$animation--fast`	0.1s
`$animation--medium`	0.2s
`$animation--slow`	0.3s

Design Tokens

#Import design tokens

#Choose format

#Copy import statement

#Colors

#Neutrals

#Blue

#Teal

#Green

#Yellow

#Red

#Orange

#Purple

#Pink

#Chart: default

#Heatrange: warm

#Heatrange: cool

#Scales: cool

#Scales: warm

#Status

#Border colors

#Background colors

#Toast color

#Button color

#Text colors

#Navigation colors

#Search Navigation colors

#Typography

#Font-family

#Font-size

#Font-weight

#Line-height

#Size

#Space

#Border radius

#Opacity

#Box shadow

#Layout

#Animation