Outline

Set width and color, of an item’s outline. Refer to our Figma Guide for how to apply Outline utilities to an item in Figma.

Utility Modules

Outline

Set the position and width of an item’s borders.

Mixins and Functions

Utility	Mixin	Example
.outline-`units`	u-outline(`units`)	@include u-outline('05')

Utility Classes

Utility module usage information
Module name	Are responsive modifiers turned on?	Active state modifiers	Gzip file size	Non-gzip file size
outline	False	None	0.03 KB	0.18 KB

Outline

.outline-0

0px

.outline-1px

1px

.outline-2px

2px

.outline-05

4px

Outline Color

Set the color of an item’s outline.

Mixins and Functions

Utility	Mixin	Example
.outline-`color`	u-outline-color(`color`)	@include u-outline-color('cranberry-30v')

Utility Classes

Utility module usage information
Module name	Are responsive modifiers turned on?	Active state modifiers	Gzip file size	Non-gzip file size
outline-color	False	None	0.56 KB	3 KB

Global Color Tokens

.outline-transparent

transparent

.outline-black

#000000

.outline-white

#ffffff

Basic Color Tokens

.outline-teal

#298085

.outline-cerulean

#067cbc

.outline-cranberry

#e41154

.outline-navy

#4177c3

.outline-golden

#936f38

Grayscale Color Tokens

.outline-gray-5

#f0f0f0

.outline-gray-10

#e6e6e6

.outline-gray-30

#adadad

.outline-gray-50

#757575

.outline-gray-70

#454545

.outline-gray-90

#1b1b1b

Theme Color Tokens

.outline-base-lightest

#f0f0f0

.outline-base-lighter

#dfe1e2

.outline-base-light

#a9aeb1

.outline-base

#71767a

.outline-base-dark

#565c65

.outline-base-darker

#3d4551

.outline-base-darkest

#1b1b1b

.outline-ink

#1b1b1b

.outline-primary-lighter

#99cae4

.outline-primary-light

#3395ca

.outline-primary

#007bbd

.outline-primary-vivid

#067cbc

.outline-primary-dark

#004e7a

.outline-primary-darker

#003a57

.outline-secondary-lighter

#beebee

.outline-secondary-light

#4bbfc6

.outline-secondary

#298085

.outline-secondary-vivid

#338084

.outline-secondary-dark

#1e4c4f

.outline-secondary-darker

#17373a

.outline-accent-cool-lighter

#d7e5f4

.outline-accent-cool-light

#92a9c8

.outline-accent-cool

#5478ab

.outline-accent-cool-dark

#284976

.outline-accent-cool-darker

#06162d

.outline-accent-warm-lighter

#fdf2bf

.outline-accent-warm-light

#fee685

.outline-accent-warm

#face00

.outline-accent-warm-dark

#ddaa01

.outline-accent-warm-darker

#b38c00

State Color Tokens

.outline-error-lighter

#fde2ea

.outline-error-light

#f27da2

.outline-error

#e41154

.outline-error-dark

#b60d43

.outline-error-darker

#950b30

.outline-warning-lighter

#fdf2bf

.outline-warning-light

#ffe396

.outline-warning

#ffbe2e

.outline-warning-dark

#e5a000

.outline-warning-darker

#936f38

.outline-success-lighter

#dbf2f3

.outline-success-light

#67e4e8

.outline-success

#42979a

.outline-success-dark

#338084

.outline-success-darker

#206b6f

.outline-info-lighter

#d4e7f2

.outline-info-light

#99cae4

.outline-info

#51b8f0

.outline-info-dark

#2099df

.outline-info-darker

#01679d

.outline-disabled-light

#e6e6e6

.outline-disabled

#c9c9c9

.outline-disabled-dark

#adadad

.outline-emergency

#b60d43

.outline-emergency-dark

#700824