Skip to content
Persona
Search
K
Main Navigation
Docs
Components
Foundation
Styleguide
Assets
Icon
Ilustration
Ecosystem
Tools
PDF Coordinate Finder
PDF Optimizer
Appearance
Menu
Return to top
On this page
Borders and Outlines
Borders
The borders and also rings colors of Persona is based on
semantics borders colors
.
Name
token-name
figma-style-name
tailwind-class-name
Base
Subtlest
borderColor.subtlest
border/subtlest
Border
border-subtlest
Ring
ring-subtlest
Subtle
borderColor.subtle
border/subtle
Border
border-subtle
Ring
ring-subtle
Default
borderColor.default
border/default
Border
border-default
Ring
ring-default
Emphasis
borderColor.emphasis
border/emphasis
Border
border-subtlest
Ring
ring-subtlest
Additional
Subtle Alpha
borderColor.subtle.alpha
border/subtleAlpha
Border
border-subtle-alpha
Ring
ring-subtle-alpha
Default Alpha
borderColor.default.alpha
border/defaultAlpha
Border
border-default-alpha
Ring
ring-default-alpha
Emphasis Alpha
borderColor.emphasis-alpha
border/emphasisAlpha
Border
border-emphasis-alpha
Ring
ring-emphasis-alpha
Inverted
Default Alpha
borderColor.default.alpha
border/defaultAlpha
Border
border-default-alpha
Ring
ring-default-alpha
Subtle Alpha
borderColor.subtle.alpha
border/subtleAlpha
Border
border-subtle-alpha
Ring
ring-subtle-alpha
Roles
Info
borderColor.info
border/info
Border
border-info
Ring
ring-info
Info Emphasis
borderColor.info.emphasis
border/infoEmphasis
Border
border-info-emphasis
Ring
ring-info-emphasis
Success
borderColor.success
border/success
Border
border-success
Ring
ring-success
Success Emphasis
borderColor.success.emphasis
border/successEmphasis
Border
border-success-emphasis
Ring
ring-success-emphasis
Warning
borderColor.warning
border/warning
Border
border-warning
Ring
ring-warning
Warning Emphasis
borderColor.warning.emphasis
border/warningEmphasis
Border
border-warning-emphasis
Ring
ring-warning-emphasis
Danger
borderColor.danger
border/danger
Border
border-danger
Ring
ring-danger
Danger Emphasis
borderColor.danger.emphasis
border/dangerEmphasis
Border
border-danger-emphasis
Ring
ring-danger-emphasis
Outlines
Name
token-name
tailwind-class-name
default
outlineColor.default
outline-default
info
outlineColor.info
outline-info
success
outlineColor.success
outline-success
warning
outlineColor.warning
outline-warning
danger
outlineColor.danger
outline-danger
Radius
Name
token-name
tailwind-class-name
size
none
borderRadius.none
rounded-none
0
tiny
borderRadius.tn
rounded-tn
4px
xsmall
borderRadius.xs
rounded-xs
6px
small
borderRadius.sm
rounded-sm
7px
DEFAULT
borderRadius.DEFAULT
rounded
8px
medium
borderRadius.md
rounded-md
12px
large
borderRadius.lg
rounded-lg
14px
xlarge
borderRadius.xl
rounded-xl
16px
2xlarge
borderRadius.2xl
rounded-2xl
20px
3xlarge
borderRadius.3xl
rounded-3xl
22px
full
borderRadius.full
rounded-full
999999px