• Guides

    Get startedComponent definitionDesigning custom elementsDevelopment best practices

  • Styles

    ColorsTypographySpacingShadowsRadii

  • Components

    AvatarButtonCheckboxColorPickerDropdownFormFieldIconIconButtonIllustrationLinkListLoaderLogoLogoLoaderMenuModalNotificationBarPillRadioSelectSkeletonSwitchTabsTextTextareaTextButtonTextInputToastTooltip

    Layout

    AlignArrangeBackdropContainerErrorContainerPopoverSpacerSplit

  • Icons

    Icon set

  • Illustrations

    Illustration set

  • Patterns

    Disabled stylesErrorsFormsDiscoveryPlan upgradeSettings

  • Utilities

    CSS utilitiesCSS variablesResponsive

  • Playground

    Layout recipesShowcase

Component definition

Before adding a new component to the design system consider the definition of the component.

  • Components are widely used. When adding a new component make sure it's used across designs or it will be in the future.

  • A component should solve as few problems as possible. The simplicity of a component makes it reusable and easy to maintain. Each component owns a specific problem and because of that we can easily test and find issues.

  • Components should be constructed with the system variables. The system variables (or styles) contain rules about variables like typography and color that result in a specific visual language. System variables tie components together visually and make them feel like part of the same family.

  • Components are layout agnostic. A component can't predict where it will be used so it should be flexible to adapt to different layouts.

  • Components are content agnostic. Some components contain text and it can be different depending on the context. These components also can be translated into other languages.