Design tokens
Auto-generated from @hub/ds-tokens (the Style Dictionary output), 123 tokens in total. This page always reflects the published token set.
Color (42)
| Token | Value | |
|---|---|---|
ColorBackgroundDefault | #191b20 | |
ColorBackgroundPaper | #1d1f25 | |
ColorBackgroundWrapper | #24262e | |
ColorErrorContrast | #111827 | |
ColorErrorDark | #922e2e | |
ColorErrorLight | #da6868 | |
ColorErrorMain | #d14343 | |
ColorInfoContrast | #111827 | |
ColorInfoDark | #0b79d0 | |
ColorInfoLight | #64b6f7 | |
ColorInfoMain | #1e9eba | |
ColorNeutral100 | #f3f4f6 | |
ColorNeutral200 | #e5e7eb | |
ColorNeutral300 | #d1d5db | |
ColorNeutral400 | #9ca3af | |
ColorNeutral500 | #6b7280 | |
ColorNeutral600 | #4b5563 | |
ColorNeutral700 | #374151 | |
ColorNeutral800 | #1f2937 | |
ColorNeutral900 | #22242b | |
ColorOtherBackdrop | #00000080 | |
ColorOtherDivider | #292c34 | |
ColorOtherOutlinedBorder | #2d3748 | |
ColorPrimaryContrast | #12141c | |
ColorPrimaryDark | #9ca3af | |
ColorPrimaryLight | #e5e7eb | |
ColorPrimaryMain | #d1d5db | |
ColorSecondaryContrast | #111827 | |
ColorSecondaryDark | #a0a30f | |
ColorSecondaryLight | #ffff00 | |
ColorSecondaryMain | #ffe600 | |
ColorSuccessContrast | #111827 | |
ColorSuccessDark | #0e8074 | |
ColorSuccessLight | #43c6b7 | |
ColorSuccessMain | #94b82e | |
ColorTextDisabled | #ffffff7a | |
ColorTextPrimary | #edf2f7 | |
ColorTextSecondary | #a0aec0 | |
ColorWarningContrast | #111827 | |
ColorWarningDark | #845b10 | |
ColorWarningLight | #ffbf4c | |
ColorWarningMain | #eb8d37 |
Spacing (15)
| Token | Value | |
|---|---|---|
Spacing0 | 0px | |
Spacing05 | 2px | |
Spacing1 | 4px | |
Spacing10 | 40px | |
Spacing12 | 48px | |
Spacing16 | 64px | |
Spacing2 | 8px | |
Spacing20 | 80px | |
Spacing24 | 96px | |
Spacing3 | 12px | |
Spacing4 | 16px | |
Spacing5 | 20px | |
Spacing6 | 24px | |
Spacing8 | 32px | |
SpacingPx | 1px |
Typography (14)
| Token | Value | |
|---|---|---|
TypographyBodyDefault | {"fontFamily":"Montserrat","fontWeight":400,"fontSize":"16px","lineHeight":"1.5","letterSpacing":"0"} | |
TypographyBodyLarge | {"fontFamily":"Montserrat","fontWeight":400,"fontSize":"18px","lineHeight":"1.5","letterSpacing":"0"} | |
TypographyBodySmall | {"fontFamily":"Montserrat","fontWeight":400,"fontSize":"14px","lineHeight":"1.5","letterSpacing":"0"} | |
TypographyCaption | {"fontFamily":"Montserrat","fontWeight":400,"fontSize":"12px","lineHeight":"1.5","letterSpacing":"0"} | |
TypographyCode | {"fontFamily":"Roboto Mono","fontWeight":400,"fontSize":"14px","lineHeight":"1.5","letterSpacing":"0"} | |
TypographyDisplay | {"fontFamily":"Montserrat","fontWeight":700,"fontSize":"48px","lineHeight":"1.2","letterSpacing":"-0.02em"} | |
TypographyHeadingH1 | {"fontFamily":"Montserrat","fontWeight":700,"fontSize":"36px","lineHeight":"1.2","letterSpacing":"-0.02em"} | |
TypographyHeadingH2 | {"fontFamily":"Montserrat","fontWeight":700,"fontSize":"30px","lineHeight":"1.2","letterSpacing":"-0.02em"} | |
TypographyHeadingH3 | {"fontFamily":"Montserrat","fontWeight":600,"fontSize":"24px","lineHeight":"1.2","letterSpacing":"0"} | |
TypographyHeadingH4 | {"fontFamily":"Montserrat","fontWeight":600,"fontSize":"20px","lineHeight":"1.2","letterSpacing":"0"} | |
TypographyHeadingH5 | {"fontFamily":"Montserrat","fontWeight":600,"fontSize":"18px","lineHeight":"1.2","letterSpacing":"0"} | |
TypographyHeadingH6 | {"fontFamily":"Montserrat","fontWeight":600,"fontSize":"16px","lineHeight":"1.2","letterSpacing":"0"} | |
TypographyLabelDefault | {"fontFamily":"Montserrat","fontWeight":500,"fontSize":"14px","lineHeight":"1.5","letterSpacing":"0"} | |
TypographyLabelSmall | {"fontFamily":"Montserrat","fontWeight":500,"fontSize":"12px","lineHeight":"1.5","letterSpacing":"0.02em"} |
Font (21)
| Token | Value | |
|---|---|---|
FontFamilyMono | Roboto Mono | |
FontFamilySans | Montserrat | |
FontLetterSpacingNormal | 0 | |
FontLetterSpacingTight | -0.02em | |
FontLetterSpacingWide | 0.02em | |
FontLineHeightNormal | 1.5 | |
FontLineHeightRelaxed | 1.75 | |
FontLineHeightTight | 1.2 | |
FontSize2xl | 24px | |
FontSize3xl | 30px | |
FontSize4xl | 36px | |
FontSize5xl | 48px | |
FontSizeLg | 18px | |
FontSizeMd | 16px | |
FontSizeSm | 14px | |
FontSizeXl | 20px | |
FontSizeXs | 12px | |
FontWeightBold | 700 | |
FontWeightMedium | 500 | |
FontWeightRegular | 400 | |
FontWeightSemibold | 600 |
Border (12)
| Token | Value | |
|---|---|---|
BorderRadius2xl | 24px | |
BorderRadiusFull | 9999px | |
BorderRadiusLg | 12px | |
BorderRadiusMd | 8px | |
BorderRadiusNone | 0px | |
BorderRadiusSm | 4px | |
BorderRadiusXl | 16px | |
BorderRadiusXs | 2px | |
BorderWidth0 | 0px | |
BorderWidthHeavy | 4px | |
BorderWidthThick | 2px | |
BorderWidthThin | 1px |
Shadow (5)
| Token | Value | |
|---|---|---|
ShadowLg | {"x":"0","y":"8px","blur":"16px","spread":"0","color":"rgba(0, 0, 0, 0.12)","type":"dropShadow"} | |
ShadowMd | {"x":"0","y":"4px","blur":"8px","spread":"0","color":"rgba(0, 0, 0, 0.10)","type":"dropShadow"} | |
ShadowSm | {"x":"0","y":"2px","blur":"4px","spread":"0","color":"rgba(0, 0, 0, 0.08)","type":"dropShadow"} | |
ShadowXl | {"x":"0","y":"16px","blur":"32px","spread":"0","color":"rgba(0, 0, 0, 0.16)","type":"dropShadow"} | |
ShadowXs | {"x":"0","y":"1px","blur":"2px","spread":"0","color":"rgba(0, 0, 0, 0.05)","type":"dropShadow"} |
Opacity (7)
| Token | Value | |
|---|---|---|
Opacity0 | 0 | |
Opacity10 | 0.1 | |
Opacity100 | 1 | |
Opacity25 | 0.25 | |
Opacity50 | 0.5 | |
Opacity75 | 0.75 | |
Opacity90 | 0.9 |
Layout (7)
| Token | Value | |
|---|---|---|
LayoutBreakpointDesktop | 1024px | |
LayoutBreakpointMobile | 0px | |
LayoutBreakpointTablet | 768px | |
LayoutContainerMaxWidthLg | 1024px | |
LayoutContainerMaxWidthMd | 768px | |
LayoutContainerMaxWidthSm | 640px | |
LayoutContainerMaxWidthXl | 1280px |