Borders

Borders can be used to break up sections of content, or to separate content that might have different purposes or meaning

Border tokens

Border width

1px

borderWidth-1

The default border width and should be used in almost all cases.

2px

borderWidth-2

Used to indicate an input field has an error, or that an interace element is currently being edited—like the Details card in templates

4px

borderWidth-4

Special circumstance sonly, can be used to highlight an active tab

Border color

border

#e0dddb

primary

#eeeae8

primary-subtle

#c0bdba

strong

#a49d97

emphasis

#3f3934

dark

#ffffff

on-color

#006e8b

interactive

#cae3ed

interactive-subtle

#002e40

interactive-strong

#b32038

destructive

#fed2d1

destructive-subtle

#005747

success

#cae5dd

success-subtle

#584600

warning

#efdea5

warning-subtle

#623363

info

#e4d9ed

info-subtle

rgba(0,0,0,0.08)

outlineDark

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

rgba(255,255,255,0.08)

outlineLight

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

Border radius

0px

borderRadius-none

Can be applied to quickly override the border radius of a component to 0

2px

borderRadius-sm

Used to the soften the edges of smaller UI elements (16px or smaller) to prevent them from looking full rounded

4px

borderRadius-md

The default border radius for most components and interface elements

6px

borderRadius-lg

Used in floating elements like Action Menus, select dropdowns, and popovers

8px

borderRadius-xl

Used in larger floating elements like modals or slideovers

12px

borderRadius-xxl

Limited use currently, but should be reserved for large containers that take up a significant portion of the page

1000px

borderRadius-full

Fully rounded border radius, creates a "pill-like" shape

Focus rings

focus / warning

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

focus / warning / default

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

focus / warning / simple

focus / success

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

focus / success / default

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

focus / success / simple

focus / destruction

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

focus / destruction / default

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

focus / destruction / simple

focus / primary

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

focus / primary / default

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

focus / primary / simple

focus / info

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

focus / info / default

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

focus / info / simple

focus / neutral

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

focus / neutral / default

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

focus / neutral / simple