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
Foundations
Base
Application
Activity feedsAlerts & notificationsApplication navigationBreadcrumbsCalendarsCard headersCarouselChartsCode snippetsColor pickersCommand menusContent dividersDate pickersEmpty statesFile uploadFiltersInline CTAsLoading indicatorsLog in and sign upMessagingMetricsModalsPage headersPaginationProgress stepsSection footersSection headersSlideout menusTablesTabsTree view