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
Inverted
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.
| Name | Status | Credits | Duration | Date |
|---|---|---|---|---|
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.