Border

Border color

border

#e0dedf

primary

Collection

ads-colors

#eeeced

primary-subtle

Collection

ads-colors

#ccc8ca

strong

Collection

ads-colors

#999094

emphasis

Collection

ads-colors

#3d3a3b

dark

Collection

ads-colors

#ffffff

on-color

Collection

ads-colors

#b56dc6

interactive

Collection

ads-colors

#ebd3f1

interactive-subtle

Collection

ads-colors

#6a266d

interactive-strong

Collection

ads-colors

#bf3144

destructive

Collection

ads-colors

#fbc3cb

destructive-subtle

Collection

ads-colors

#0e9976

success

Collection

ads-colors

#caf3e7

success-subtle

Collection

ads-colors

#bd5b00

warning

Collection

ads-colors

#ffdad3

warning-subtle

Collection

ads-colors

#2489a9

info

Collection

ads-colors

#c2f0fc

info-subtle

Collection

ads-colors

rgba(0,0,0,0.08)

outlineDark

Used to add a subtle outline by by layering a dark overlay (#000 8%)

Collection

ads-colors

rgba(255,255,255,0.08)

outlineLight

Used to add a subtle outline by by layering a light overlay (#FFFFFF 8%)

Collection

ads-colors

Border radius

0px

borderRadius-none

Collection

ads-borders

2px

borderRadius-eighth

Collection

ads-borders

4px

borderRadius-quarter

Collection

ads-borders

6px

borderRadius-threeEights

Collection

ads-borders

8px

borderRadius-half

Collection

ads-borders

12px

borderRadius-threeQuarter

Collection

ads-borders

1000px

borderRadius-full

Collection

ads-borders

Components

These are "component-specific" tokens that allow us to quickly and predictably change the border radius of these components without having to manually adjust each iteration of the component in the codebase or design files.

It's best practice to leverage the default variables before opting to create component-specific variables.

6px

borderRadius-components-menu

Collection

ads-borders

8px

borderRadius-components-modal

Collection

ads-borders

Border width

Coming soon (in figma)

Focus rings

focus / warning

0 0 0 3px rgb(189,91,0), 0 0 0 1.5px rgb(255,245,245)

default

Collection

0 0 0 2px rgb(189,91,0)

simple

Collection

focus / success

0 0 0 2px rgb(14,153,118)

simple

Collection

0 0 0 1.5px rgb(230,255,247), 0 0 0 3px rgb(14,153,118)

focus / success / default

Collection

focus / destruction

0 0 0 2px rgb(191,49,68)

simple

Collection

0 0 0 3px rgb(191,49,68), 0 0 0 1.5px rgb(254,229,233)

focus / destruction / default

Collection

focus / primary

0 0 0 3px rgb(181,109,198), 0 0 0 1.5px rgb(253,245,255)

focus / primary / default

Collection

0 0 0 2px rgb(181,109,198)

focus / primary / simple

Collection

focus / info

0 0 0 3px rgb(36,137,169), 0 0 0 1.5px rgb(230,251,255)

default

Collection

0 0 0 2px rgb(36,137,169)

simple

Collection

focus / neutral

0 0 0 2px rgb(153,144,148)

simple

Collection

0 0 0 3px rgb(153,144,148), 0 0 0 1.5px rgb(245,244,244)

focus / neutral / default

Collection

Border

Border color

Border radius

Components

Border width

Focus rings

Aurora Design System

Resources