zendocs
Getting StartedIntroductionInstallation
DesignColorsFontsSpacingShadowsBordersBreakpoints
TypographyTextHeadingBlockquoteCode
LayoutsBoxFlexboxGridContainer
ComponentsAccordionAlert BannerAlert DialogButtonBreadcrumbsCalendarCheckboxComboboxConfirmation DialogData TableDialogDotsFormHover TriggerIconIconsImageInline Edit FieldListLoading ButtonMenuModalNagivation BarPassword FieldPopoverProgress BarProgress CircleRadio GroupSearch FieldSelectSide NavigationSliderSpinnerStatus LightSwitchTableTabsText FieldTheme ButtonToastToggleToggle GroupTooltip
Design

Fonts

The default fonts we use are Inter for regular text and JetBrains Mono for monospace text.

CSS variables

Font sizes are defined in a 9-step scale from smallest to largest.

NameValue
--font-size-112px
--font-size-214px
--font-size-316px
--font-size-418px
--font-size-520px
--font-size-624px
--font-size-728px
--font-size-836px
--font-size-960px

Font weights are defined as light, regular, medium and bold.

NameValue
--font-weight-light300
--font-weight-regular400
--font-weight-medium500
--font-weight-bold700

Component props

NameValue
sizeResponsive<"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">
weightResponsive<"light" | "normal" | "medium" | "bold">
Colors
Spacing
On this pageCSS variablesComponent props