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

#e0dedf

primary

#eeeced

primary-subtle

#ccc8ca

strong

#999094

emphasis

#3d3a3b

dark

#ffffff

on-color

#b56dc6

interactive

#ebd3f1

interactive-subtle

#6a266d

interactive-strong

#bf3144

destructive

#fbc3cb

destructive-subtle

#0e9976

success

#caf3e7

success-subtle

#bd5b00

warning

#ffdad3

warning-subtle

#2489a9

info

#c2f0fc

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(181,109,198), 0 0 0 1.5px rgb(253,245,255)

focus / primary / default

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

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