Backgroundvar(--background)
Canvas
--background
Structure first.
Expression follows.
A compact visual language for trustworthy, data-rich products — with the chat, agent-trace and tool-permission surfaces AI products need.
Chat
Agent trace
Donequery_records184 ms
Tool permission
Allow exports
01 token source · 75 primitives · 2×8 themes
Live configuration
Theme composer
Appearance
Choose the canvas mode.
Accent color
A full ramp powers actions, focus, charts, and washes.
Component previewLive
Item A67,482.10+2.41%
Item B18,206.44−0.86%
Every value resolves from semantic tokens.
01Philosophy
01 / 10A foundation for clear, flexible products.
Gumdrop is built to make interfaces feel coherent without making them identical. The system handles the recurring decisions, so teams can focus on the content, workflows, and moments that make each product distinct.
Clarity before decoration
01Hierarchy, content, and purpose lead. Visual detail earns its place by making the interface easier to understand.
Composition over prescription
02Primitives provide reliable parts without forcing every product into the same layout or expression.
Accessibility in the defaults
03Contrast, focus, touch targets, and reduced motion are foundational behavior—not a final review step.
Tokens as the contract
04A semantic layer keeps themes and brands flexible while every component speaks the same visual language.
Foundation in practice
- Semantic by default
- Components reference purpose, not raw values.
- Responsive by nature
- Layouts adapt while hierarchy stays intact.
- Deliberate in motion
- Feedback explains state; nothing moves without reason.
02Color
02 / 10Quiet foundations. Earned color.
Neutral surfaces and deep ink carry the interface. Accent appears only when it communicates action, selection, or focus; status families stay fixed so their meaning never changes with the brand.
Role before valueTheme awareContrast verified
Foregroundvar(--foreground)
Primary ink
--foreground
Bordervar(--border)
Structure
--border
Primaryvar(--primary)
Action
--primary
Accent washvar(--accent)
Selected state
--accent
Success washvar(--success-wash)
Confirmed
--success-wash
Warning washvar(--warning-wash)
Needs attention
--warning-wash
Danger washvar(--destructive-wash)
Destructive
--destructive-wash
Each brand supplies a complete ramp. Components keep their semantic roles while the accent identity changes in one place.
03Typography
03 / 10One voice. Clear hierarchy.
Instrument Sans carries every interface role, from compact data to page landmarks. A restrained scale, purposeful weights, and tabular numerals keep dense information easy to scan.
Seven roles400–70012px minimum
Interface family
Instrument Sans · Sans serif
Aa Gg
Open counters stay legible at compact sizes, while a consistent silhouette keeps navigation, labels, and long-form copy calm.
400500600700
Numeric family
Instrument Sans · Tabular
67,421.30
Value
2.41T
Change
+2.41%
Updated
14:32
Fixed-width figures align values vertically. Signs, precision, and units preserve meaning before color enters the system.
Type scale
Seven roles, one measured rhythm
Size / line height · weight
- Display
- 32 / 36.8 · 700
- Structure first.
- Heading
- 20 / 26 · 700
- Hierarchy without noise
- Card title
- 16 / 20 · 700
- Record overview
- Body / data
- 13 / 18.525 · 400
- 67,421.30 · Updated 14:32 UTC
- Label
- 13 / 18.525 · 500
- Reporting period
- Action
- 13 / 18.525 · 600
- View records
- Caption
- 12 / 16 · 400
- Supporting context and timestamps
Landmarks use 700
Bold weight is reserved for headings and orientation.
Data stays at 400
Regular weight protects density and comparison.
Numerics always align
Tabular figures make columns stable and scannable.
04Grid & spacing
04 / 10Twelve columns. One dependable rhythm.
A capped grid controls horizontal alignment. A finite spacing scale controls vertical rhythm. Together they keep dense interfaces orderly at every width.
12 / 8 / 4 columns24px desktop gutter4px base rhythm
Column grid
12 columns · 24px gutter
01
02
03
04
05
06
07
08
09
10
11
12
Use twelve columns with 24px gutters on wide screens, eight columns with 16px gutters at intermediate widths, and four columns with 16px gutters on narrow screens.
Spacing scale
Finite steps, clear jobs
- 2XS
- 2px
- XS
- 4px
- SM
- 8px
- MD
- 16px
- LG
- 24px
- XL
- 32px
8px separates peers, 16px groups a module, 24px forms broad gutters, and 32px marks a change in task.
05Shape
05 / 10Seven corners, each with a job.
Radius says what a thing is. Small corners are marks, medium corners are things you press, large corners hold other things, and only the pill is round. A component takes the corner of its role, never one it prefers.
Corner follows roleRead from the tokens
Hairline
--radius-xs
Progress tracks, tiny marks, inline code.
Chip
--radius-sm
Badges, keyboard keys, the inset of a swatch.
Field
--radius-input
Inputs, selects, the thumb of a segmented control.
Control
--radius-md
Buttons, menus, tabs, rows that you press.
Card
--radius-card
Cards, panels, anything that holds other things.
Sheet
--radius-lg
Dialogs, sheets and popovers that float.
Pill
--radius-pill
Avatars, status dots and counts only.
06Elevation
06 / 10Slabs you press. Shadows only for what floats.
Pressable things carry a hard lip that closes when you push them. Cards sit flat on a hairline. A soft shadow is reserved for the few surfaces that detach from the page, so depth always means something.
Lip, not blurFloat means detached
Flat
--shadow-card-edge
A card at rest: a 1px edge, no lift.
Small slab
--shadow-raised-neutral-xs
Chosen, not pressed: a switch thumb, a selected segment, a checked box.
Slab
--shadow-raised-neutral
A control you press. On press the lip compresses into a seam.
Primary slab
--shadow-raised-primary
The one action per view, in the brand's own deep edge.
Pressed seam
--shadow-pressed-seam
The same slab, pushed in: the lip drawn inset so nothing shifts.
Lifted
--shadow-lifted
Popovers, menus, dialogs: detached from the page, so they alone are soft.
07Components
07 / 10Primitives on a working canvas.
Components are shown as live controls, not static inventory. Each row carries seven production-shaped specimens so variants, core props, overlays, and composition patterns can be compared under real interface pressure.
Live statesToken drivenKeyboard ready
Actions · variants and sizes
ButtonAction hierarchy
One raised commitment, quieter alternatives, and contextual danger.
Variants
Sizes
State
28px default · 44px touch150ms
Selection · fields and options
Input · SelectFilter controls
Fields share geometry, focus behavior, and semantic surfaces.
Live updates
Refresh every 30 seconds.
Connected
3 filters applied
Choice · control states
Checkbox · SwitchNotification settings
Labels and helper copy keep compact controls understandable.
Beyond threshold.
Mixed by workspace.
Select an owner first.
Owner requirement.
Enabled
2
Mixed
1
Locked
1
Delivery channel
Email
Navigation · active state
Tabs · BadgeRecord overview
Local navigation keeps related views in one stable frame.
- Value
- 67,421
- +1,582 today
- Change
- +2.41%
- 24h window
- Count
- 842
- 18 new
Updated 14:32 UTCAuto refresh
SelectedConfirmedReviewBlocked
Overlay · focused task
DialogConfirmation dialog
Open the live overlay to inspect focus, hierarchy, and actions.
Delete saved view?
Regional review · 8 custom fields
- Owner
- Avery Chen
- Last opened
- 4 min ago
Feedback · semantic states
AlertSystem feedback
Variant, semantics, action, custom icon, and dismissal behavior.
Forms · content entry
TextareaReview note
Long-form fields keep guidance, count, and error state together.
Workspace only.48 / 160
Included with export.47 / 120
Add a reason before requesting changes.
Measures · continuous values
Progress · SliderCapacity controls
Finite progress and adjustable ranges use one numeric rhythm.
Import progress
Verified
Rejected
Indexing
Alert threshold
Value range
Identity · presence and help
Avatar group · TooltipReview team
Stable identity depths separate people without asserting status.
Avery Chen
Final review
Noor Patel
Validation
Mateo Silva
Source check
Loading · stable geometry
SkeletonRecord summary
Loading placeholders preserve the final layout without a shimmer sweep.
Data · continuous comparison
Table · Dropdown menuEntity directory
Identity, classification, lifecycle status, and row-level actions in one ruled surface.
| Entity | Actions |
|---|---|
Northwind Studio Northwind Studio ENT-1048 Active | |
Atlas Research Atlas Research ENT-0921 Review | |
Juniper Works Juniper Works ENT-0814 Active | |
Meridian Group Meridian Group ENT-0732 Blocked |
Showing 1–4 of 428 · sorted by recent activity
Disclosure · optional detail
AccordionAdvanced settings
Optional controls expand vertically without changing the container width.
Notify after a value changes by more than 5% in 24 hours.
Format
CSV
Delivery
Mon · 09:00 UTC
View mode · grouped choice
Toggle groupDisplay preferences
Related choices share one surface while retaining keyboard navigation.
Density
Visible fields
Preference preview
3 columnsItem A67,421+2.41%
Applies across the workspace
Labels · semantic classification
BadgeStatus taxonomy
Compact labels classify records without competing with primary actions.
Semantic roles
DefaultSelectedOutlineDraftConfirmedNeeds reviewBlocked
Compact · 18px
Live2 issuesFailed
Default · 24px
12,842Watching
Regional review
Updated 14:32 UTC
Source validation
2 records require attention
Scheduled export
Policy prevents delivery
Text and shape reinforce colorWCAG AA
Wayfinding · hierarchy and overflow
BreadcrumbRecord location
Long paths remain concise while the current page stays explicit.
Current destination
Regional review
Updated 14:32 UTC · 12,842 records
Actions · segmented clusters
Button groupView toolbar
Adjacent actions share seams, labels, and one keyboard focus order.
Presentation
Page size
Export actions
Joined outer radius3 patterns
Forms · platform picker
Native selectExport configuration
Native pickers suit long lists and dense mobile workflows.
Choice · single selection
Radio groupDelivery schedule
One choice stays explicit with labels, descriptions, and disabled states.
Send after validation.
Bundle recent activity.
Deliver at 09:00 UTC.
Available on Team plans.
Compact range
Validation
Select a review mode.
Empty state · recovery action
EmptyFiltered results
Factual guidance explains what is missing and what to do next.
No records match these filters
Widen the value range or clear the Region North filter to see more results.
Query completed in 184ms3 filters
Commands · keyboard discoverability
KbdKeyboard shortcuts
Compact key groups keep frequent commands discoverable.
- Open search
- ⌘K
- Refresh records
- ⌘R
- Create record
- C
- Toggle filters
- F
- Move selection
- ↑↓
- Close overlay
- Esc
Shortcuts are disabled while typing in a field.
Loading · indeterminate work
SpinnerBackground activity
Spinners mark unknown waits; determinate work uses progress.
Fetching records
Region North · live source
Validating schema
18 of 25 sources queued
Known progress
Motion stops under reduced-motion preferences.
08Motion
08 / 10Movement explains change.
Gumdrop moves with purpose: immediate focus, short tactile feedback, and no animation that could be mistaken for a change in the data itself.
Ready on scroll. The four recipes advance automatically while this section is visible.
Canonical response
One curve, four state changes
01
Press response
02
Scale in
03
State change
04
Bounded loading
Standard easing2s each · 0.4, 0, 0.2, 1
01Queued
Press response
The raised slab travels into its own edge to confirm direct input.
150ms · translateY(4px)
02Queued
Summary
Value
67,421
Scale in
A focused surface settles into place without overshoot or bounce.
2s demo · scale(.86 → 1)
03Queued
Live updates
Refresh automatically
State change
Color and position move together so a control reads as one event.
150ms · standard easing
04Queued
Syncing records
Bounded loading
Ambient motion is reserved for work whose completion is unresolved.
1200ms · progress only
05 — 07Where motion stops
Three cases the system refuses05Held
Item A value
67,421.30
no frames between
68,105.44
Data never tweens
A number replaces itself. Nothing travels between two values, so nothing implies a direction.
0ms · transition: none
06Held
Syncing recordsloop runs
Sync completestops
Loops end when work does
Ambient motion claims something is unresolved. When it resolves, the loop stops competing for attention.
1200ms · while pending only
07Held
motion on
reduced motion
same final frame
Reduced motion keeps meaning
Motion off removes the journey, never the destination. No meaning lives in skipped frames.
prefers-reduced-motion: reduce
01
Immediate
Focus and live values tell the truth without delay.
02
Tactile
Motion connects a direct action to its visible result.
03
Restrained
No ambient loops compete with scanning or comparison.
04
Inclusive
Reduced motion preserves every final state and meaning.
09In situ
09 / 10Six real screens, running inside this page.
Everything above is inventory—tokens, type, grid, components, motion. This is what they add up to. Each panel below is a live route from the screen library, embedded as itself: same tokens, same primitives, same theme you are reading in. Read the numbers, sign someone in, ask a model, edit an entry, change the plan, open a record—one language across a whole session.
Live routesNot screenshotsTheme follows
Loading /dashboard-001 …
KPI dashboard
Loads into its own skeleton, then KPI, trend, and activity with search and notification states.
These six are a sample. The library carries 60 built screens across 13 groups—every one of them a route in this repository, on these tokens.
Browse the screen library10Apply
10 / 10Make the system useful.
Start with the shared rules, then spend your judgment where the product is distinct. The system should remove repeated decisions—not remove design thinking.
Intent firstCompose, don’t prescribeVerify before release
Application path
From intent to a verified interface
Four decisions · in order
- 01
Frame the task
Name the content, decision, and status before choosing a component or visual treatment.
Intent and hierarchy
- 02
Compose the parts
Start with the smallest reliable primitives and let the product workflow determine the layout.
Flexible composition
- 03
Resolve the roles
Map every surface, line, action, and state to a semantic token instead of a local value.
Theme-ready interface
- 04
Verify the edges
Check keyboard flow, contrast, overflow, touch targets, themes, and reduced motion together.
Production confidence