Skip to content

Borders and Outlines

Borders

The borders and also rings colors of Persona is based on semantics borders colors.

Name
token-namefigma-style-nametailwind-class-name

Base

SubtlestborderColor.subtlestborder/subtlestBorderborder-subtlestRingring-subtlest
SubtleborderColor.subtleborder/subtleBorderborder-subtleRingring-subtle
DefaultborderColor.defaultborder/defaultBorderborder-defaultRingring-default
EmphasisborderColor.emphasisborder/emphasisBorderborder-subtlestRingring-subtlest

Additional

Subtle AlphaborderColor.subtle.alphaborder/subtleAlphaBorderborder-subtle-alphaRingring-subtle-alpha
Default AlphaborderColor.default.alphaborder/defaultAlphaBorderborder-default-alphaRingring-default-alpha
Emphasis AlphaborderColor.emphasis-alphaborder/emphasisAlphaBorderborder-emphasis-alphaRingring-emphasis-alpha

Inverted

Default AlphaborderColor.default.alphaborder/defaultAlphaBorderborder-default-alphaRingring-default-alpha
Subtle AlphaborderColor.subtle.alphaborder/subtleAlphaBorderborder-subtle-alphaRingring-subtle-alpha

Roles

InfoborderColor.infoborder/infoBorderborder-infoRingring-info
Info EmphasisborderColor.info.emphasisborder/infoEmphasisBorderborder-info-emphasisRingring-info-emphasis
SuccessborderColor.successborder/successBorderborder-successRingring-success
Success EmphasisborderColor.success.emphasisborder/successEmphasisBorderborder-success-emphasisRingring-success-emphasis
WarningborderColor.warningborder/warningBorderborder-warningRingring-warning
Warning EmphasisborderColor.warning.emphasisborder/warningEmphasisBorderborder-warning-emphasisRingring-warning-emphasis
DangerborderColor.dangerborder/dangerBorderborder-dangerRingring-danger
Danger EmphasisborderColor.danger.emphasisborder/dangerEmphasisBorderborder-danger-emphasisRingring-danger-emphasis

Outlines

Name
token-nametailwind-class-name
defaultoutlineColor.defaultoutline-default
infooutlineColor.infooutline-info
successoutlineColor.successoutline-success
warningoutlineColor.warningoutline-warning
dangeroutlineColor.dangeroutline-danger

Radius

Name
token-nametailwind-class-namesize
noneborderRadius.nonerounded-none0
tinyborderRadius.tnrounded-tn4px
xsmallborderRadius.xsrounded-xs6px
smallborderRadius.smrounded-sm7px
DEFAULTborderRadius.DEFAULTrounded8px
mediumborderRadius.mdrounded-md12px
largeborderRadius.lgrounded-lg14px
xlargeborderRadius.xlrounded-xl16px
2xlargeborderRadius.2xlrounded-2xl20px
3xlargeborderRadius.3xlrounded-3xl22px
fullborderRadius.fullrounded-full999999px

Released under the MIT License.