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.

Molecules

Data Visualization

Interactive charts and data tables.

Usage Analytics April 2025
26,643 activities
April 2025
NameStatusCreditsDurationDate

Data Processing Pipeline

alice@gumloop.com

success

45

2m 30s

2025-01-15

Image Classification Model

bob@gumloop.com

running

120

15m 42s

2025-01-15

Text Analysis Workflow

charlie@gumloop.com

failed

0

1m 5s

2025-01-14

Email Notification System

diana@gumloop.com

success

5

30s

2025-01-14

Database Backup Process

eve@gumloop.com

pending

0

-

2025-01-14

API Integration Test

frank@gumloop.com

success

25

45s

2025-01-13

ML Model Training

grace@gumloop.com

success

350

1h 23m

2025-01-13

Report Generation

henry@gumloop.com

failed

0

12s

2025-01-12

User Onboarding Flow

iris@gumloop.com

success

15

1m 15s

2025-01-12

Security Audit Script

jack@gumloop.com

running

85

8m 20s

2025-01-12

Molecules

Dialogs

Confirmation dialogs for destructive, irreversible, or critical actions.

Toasts