Tester Page 1. Design Tokens: Colors branded Swatches $color-brand $color-accent $color-tertiary base Swatches $color-default $color-muted $color-primary $color-secondary greyscale Swatches bw $color-black $color-white shades $color-grey-90 $color-grey-70 $color-grey-50 $color-grey-30 $color-grey-10 semantic Swatches info $color-info-light $color-info $color-info-dark success $color-success-light $color-success $color-success-dark warning $color-warning-light $color-warning $color-warning-dark danger $color-danger-light $color-danger $color-danger-dark social Swatches $color-twitter $color-x $color-facebook $color-instagram $color-linkedin $color-youtube $color-tiktok $color-pinterest $color-flickr $color-vimeo Color Context Swatch Grid Default branded base greyscale semantic Muted branded base greyscale semantic Primary branded base greyscale semantic Secondary branded base greyscale semantic 2. Typography Standard Headings H1 Heading Element H2 Heading Element H3 Heading Element H4 Heading Element H5 Heading Element H6 Heading Element Heading Decorations Divider Heading Line Heading Bullet Heading Body & Text Sample Lead Paragraph: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Standard Content: Lorem ipsum dolor sit amet, active text link consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Meta Information: Published on Jan 31, 2026 • 5 min read Muted Text Style Emphasis Text Style Primary Text Style Secondary Text Style Success Text Style Warning Text Style Danger Text Style List Variations Disc List Item Alpha List Item Bravo List Item Charlie Circle List Item Alpha List Item Bravo List Item Charlie Square List Item Alpha List Item Bravo List Item Charlie Decimal List Item Alpha List Item Bravo List Item Charlie Hyphen List Item Alpha List Item Bravo List Item Charlie Standard Headings H1 Heading Element H2 Heading Element H3 Heading Element H4 Heading Element H5 Heading Element H6 Heading Element Heading Decorations Divider Heading Line Heading Bullet Heading Body & Text Sample Lead Paragraph: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Standard Content: Lorem ipsum dolor sit amet, active text link consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Meta Information: Published on Jan 31, 2026 • 5 min read Muted Text Style Emphasis Text Style Primary Text Style Secondary Text Style Success Text Style Warning Text Style Danger Text Style List Variations Disc List Item Alpha List Item Bravo List Item Charlie Circle List Item Alpha List Item Bravo List Item Charlie Square List Item Alpha List Item Bravo List Item Charlie Decimal List Item Alpha List Item Bravo List Item Charlie Hyphen List Item Alpha List Item Bravo List Item Charlie Standard Headings H1 Heading Element H2 Heading Element H3 Heading Element H4 Heading Element H5 Heading Element H6 Heading Element Heading Decorations Divider Heading Line Heading Bullet Heading Body & Text Sample Lead Paragraph: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Standard Content: Lorem ipsum dolor sit amet, active text link consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Meta Information: Published on Jan 31, 2026 • 5 min read Muted Text Style Emphasis Text Style Primary Text Style Secondary Text Style Success Text Style Warning Text Style Danger Text Style List Variations Disc List Item Alpha List Item Bravo List Item Charlie Circle List Item Alpha List Item Bravo List Item Charlie Square List Item Alpha List Item Bravo List Item Charlie Decimal List Item Alpha List Item Bravo List Item Charlie Hyphen List Item Alpha List Item Bravo List Item Charlie Standard Headings H1 Heading Element H2 Heading Element H3 Heading Element H4 Heading Element H5 Heading Element H6 Heading Element Heading Decorations Divider Heading Line Heading Bullet Heading Body & Text Sample Lead Paragraph: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Standard Content: Lorem ipsum dolor sit amet, active text link consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Meta Information: Published on Jan 31, 2026 • 5 min read Muted Text Style Emphasis Text Style Primary Text Style Secondary Text Style Success Text Style Warning Text Style Danger Text Style List Variations Disc List Item Alpha List Item Bravo List Item Charlie Circle List Item Alpha List Item Bravo List Item Charlie Square List Item Alpha List Item Bravo List Item Charlie Decimal List Item Alpha List Item Bravo List Item Charlie Hyphen List Item Alpha List Item Bravo List Item Charlie 3. UI Components Layout Extras & Status Badges 8 100 Labels Stable Beta Hotfix Spinner Icons Progress Bar Badges 8 100 Labels Stable Beta Hotfix Spinner Icons Progress Bar Badges 8 100 Labels Stable Beta Hotfix Spinner Icons Progress Bar Badges 8 100 Labels Stable Beta Hotfix Spinner Icons Progress Bar Navigation Patterns Navbar Example Home Dropdown Current Page Resource Link Support Contact Breadcrumb Path Parent Category Active Page Page Pagination 1 … 5 6 … 12 Navbar Example Home Dropdown Current Page Resource Link Support Contact Breadcrumb Path Parent Category Active Page Page Pagination 1 … 5 6 … 12 Navbar Example Home Dropdown Current Page Resource Link Support Contact Breadcrumb Path Parent Category Active Page Page Pagination 1 … 5 6 … 12 Navbar Example Home Dropdown Current Page Resource Link Support Contact Breadcrumb Path Parent Category Active Page Page Pagination 1 … 5 6 … 12 Button Styles & Sizes Size: Small Default Primary Secondary Success Danger Text Link Disabled Size: Default Default Primary Secondary Success Danger Text Link Disabled Size: Large Default Primary Secondary Success Danger Text Link Disabled Size: Small Default Primary Secondary Success Danger Text Link Disabled Size: Default Default Primary Secondary Success Danger Text Link Disabled Size: Large Default Primary Secondary Success Danger Text Link Disabled Size: Small Default Primary Secondary Success Danger Text Link Disabled Size: Default Default Primary Secondary Success Danger Text Link Disabled Size: Large Default Primary Secondary Success Danger Text Link Disabled Size: Small Default Primary Secondary Success Danger Text Link Disabled Size: Default Default Primary Secondary Success Danger Text Link Disabled Size: Large Default Primary Secondary Success Danger Text Link Disabled Feedback Alerts Info Alert: System notification text for component verification. Success Alert: System notification text for component verification. Warning Alert: System notification text for component verification. Danger Alert: System notification text for component verification. Info Alert: System notification text for component verification. Success Alert: System notification text for component verification. Warning Alert: System notification text for component verification. Danger Alert: System notification text for component verification. Info Alert: System notification text for component verification. Success Alert: System notification text for component verification. Warning Alert: System notification text for component verification. Danger Alert: System notification text for component verification. Info Alert: System notification text for component verification. Success Alert: System notification text for component verification. Warning Alert: System notification text for component verification. Danger Alert: System notification text for component verification. Card Containers Default Card Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id! Muted Card Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id! Primary Card Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id! Secondary Card Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id! Default Card Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id! Muted Card Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id! Primary Card Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id! Secondary Card Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id! Default Card Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id! Muted Card Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id! Primary Card Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id! Secondary Card Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id! Default Card Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id! Muted Card Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id! Primary Card Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id! Secondary Card Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id! Image Overlays Default Base Default Primary Secondary Primary Gradient Secondary Gradient Muted Base Default Primary Secondary Primary Gradient Secondary Gradient Primary Base Default Primary Secondary Primary Gradient Secondary Gradient Secondary Base Default Primary Secondary Primary Gradient Secondary Gradient Standard Form Elements Input Label Select List Option One Option Two Option Three Textarea Sample Choice A Agreement Toggle Process Form Input Label Select List Option One Option Two Option Three Textarea Sample Choice A Agreement Toggle Process Form Input Label Select List Option One Option Two Option Three Textarea Sample Choice A Agreement Toggle Process Form Input Label Select List Option One Option Two Option Three Textarea Sample Choice A Agreement Toggle Process Form Tables Table Caption Table Heading Table Heading Table Heading Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Caption Table Heading Table Heading Table Heading Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Caption Table Heading Table Heading Table Heading Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Caption Table Heading Table Heading Table Heading Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data