Border

Border color

border

#e0dddb

primary

Collection

ads-colors

#eeeae8

primary-subtle

Collection

ads-colors

#c0bdba

strong

Collection

ads-colors

#a49d97

emphasis

Collection

ads-colors

#3f3934

dark

Collection

ads-colors

#ffffff

on-color

Collection

ads-colors

#006e8b

interactive

Collection

ads-colors

#cae3ed

interactive-subtle

Collection

ads-colors

#002e40

interactive-strong

Collection

ads-colors

#b32038

destructive

Collection

ads-colors

#fed2d1

destructive-subtle

Collection

ads-colors

#005747

success

Collection

ads-colors

#cae5dd

success-subtle

Collection

ads-colors

#584600

warning

Collection

ads-colors

#efdea5

warning-subtle

Collection

ads-colors

#623363

info

Collection

ads-colors

#e4d9ed

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)

focus / warning / default

Collection

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

focus / warning / simple

Collection

focus / success

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

focus / success / default

Collection

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

focus / success / simple

Collection

focus / destruction

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

focus / destruction / default

Collection

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

focus / destruction / simple

Collection

focus / primary

0 0 0 3px rgb(0,110,139), 0 0 0 1.5px rgb(253,245,255)

focus / primary / default

Collection

0 0 0 2px rgb(0,110,139)

focus / primary / simple

Collection

focus / info

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

focus / info / default

Collection

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

focus / info / simple

Collection

focus / neutral

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

focus / neutral / default

Collection

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

focus / neutral / simple

Collection

Border

Border color

Border radius

Components

Border width

Focus rings

Aurora Design System

Resources