Gummie Design System

Gumloop's design system for building consistent, accessible, and beautiful products.

Core

Colors

Colors are the building blocks of our design system. We use Tailwind colours with some overrides as shown below.

Background

Foreground

Basics

Pink

Green

Blue

Muted

Primary

Secondary

Accent

Success

Warning

Destructive

Border

Ring

Molecules

Badges

Badges are used to indicate the status of a task or item, to categorize content, or to provide additional information.

Default

Destructive
Destructive
Destructive
Success
Success
Success
Warning
Warning
Warning
Muted
Muted
Muted
Outline
Outline
Outline
Accent
Accent
Accent

Inverted

Destructive
Destructive
Destructive
Success
Success
Success
Warning
Warning
Warning
Muted
Muted
Muted
Accent
Accent
Accent

Molecules

Buttons

Buttons have a built in loading state that preserves the size of the component to minimize layout shift and does not require additional logic.

Extra Large

Large

Default

Small

Extra Small

Molecules

Selects

Selects should (optionally) be clearable without an external button that modifies the state of the component.

Molecules

Tabs

Molecules

Inputs

Input components have built in leading and trailing icon slots that can be configured to have actions or serve as a visual indicator.

Toasts