Design system

DrumKit

The design system behind this product: foundations, components, and patterns rendered live from the code and themed by the product’s own design tokens. When tokens change (via /sync-design-tokens), every page here restyles itself; this site is the visual review surface for the design system.

Brand ramp

50
100
200
300
400
500
600
700
800
900
950

Principles

AccessibilityContent designInteractionMotion

Foundations

ColorsTypographyLogosIconsMisc iconsEffect stylesSpacing & radiusLayout

Base

AvatarsBadgesBannersButton groupsButtonsCheckboxesDropdownsInputsProgress indicatorsRadio groupsRadiosSelectSlidersTagsText editorsTogglesTooltipsVideo players

Application

Activity feedsAlerts & notificationsApplication navigationBreadcrumbsCalendarsCard headersCarouselChartsCode snippetsColor pickersCommand menusContent dividersDate pickersEmpty statesFile uploadFiltersInline CTAsLoading indicatorsMessagingMetricsModalsPage headersPaginationProgress stepsSection footersSection headersSlideout menusTablesTabsTree view