Jungle design system
Browser design system
Inspect edge-aligned architecture, bounded Jelly objects, shared spacing, compact information patterns, and the interaction states required for touch, pointer, and keyboard input.
01 · Direction
Design principles
These defaults remove noise before a product adds any personality. Exceptions need a concrete interaction or information reason.
Contrast before borders
Separate hierarchy with surface tone and spacing. Draw a line only when adjacent backgrounds cannot explain the boundary.
Icons before repeated labels
Use a familiar icon for compact actions, retain a programmatic name, and reveal extra explanation on hover, focus, or demand.
Progressive disclosure
Keep primary state visible. Move metadata, secondary controls, and implementation detail into menus, disclosures, or dedicated detail views.
Structure is behavior
Padding, radius, stacking, focus, and target size are testable contracts—not final polish applied after a feature works.
One spacing owner
Each nesting boundary owns one inset. A child does not repeat its parent’s page, panel, or toolbar padding.
Keep structural surfaces rectangular
App shells, workspaces, persistent bars, full-width sections, and dense row collections reach their parent edge. Radius marks bounded objects, overlays, repeated roomy cards, and sparse standalone groups.
Stable action identity
Pending work swaps a reserved icon for a spinner. The action label, width, order, and focus target stay fixed from press through completion.
Center visible control content
Treat an icon and its label as one centered cluster. Never add an empty mirror slot that shifts the visible pair, and size one-character commands like icons.
Literal headings
Start with one object, task, data view, or state label. Add an eyebrow or description only when it supplies distinct context or instruction.
02 · Tokens
Foundations
The scale is deliberately small: a few stable tokens produce a coherent rhythm across light and dark products.
Type hierarchy
Display with restraint
A decisive page title
A scannable section heading
Body copy stays calm and readable at ordinary density.
Caption · secondary, never illegible
Surface hierarchy
Radius and spacing
Plain site theme
03 · Controls
Actions
Actions remain intrinsically sized, keep a 48 px touch target by default, and expose every state without shifting surrounding layout.
Hierarchy and size
Leading icons and labels center as one cluster; single glyphs inherit the same 20 px visual scale and square target footprint as shared icons.
Icon actions
Every icon action derives a hover and focus tooltip from its accessible name.
State stability
Playback lifecycle
One larger icon command starts playback, cancels startup, and stops playback without adding a second transport target or persistent label.
Pending geometry
Ready and pending keep one label, footprint, DOM order, focus target, and a centered visible-content cluster.
Split action
The text segment performs the default action; the named icon segment opens adjacent variants. Each remains a separate keyboard target.
04 · Input
Fields
Labels clarify unfamiliar input, descriptions appear only when they prevent error, and every field keeps its inset at long and narrow sizes.
Text input · size, surface, state
Textarea · size, surface, state
Search · size, surface, state
Select · size, surface, state
Number · size, surface, state
Native capability fields · state
05 · Choice
Selection and navigation
Selection widgets own arrow-key movement, one visible selected surface across compositions, and recovery when controlled values change.
Segmented control
Appearance in constrained chrome
One trigger preserves all three choices when persistent chrome must reflow under enlarged text.
Toggle group
Tabs
List box
Fader
06 · Surfaces
Content and status
Cards establish a padded grouping. Disclosures keep less critical information available without making it compete with the primary task.
Content & data
Representative empty, long, alert, settings, disclosure, and tabular states keep hierarchy legible without turning every boundary into a box.
Workspace settings
Interface density
Use ⌘ K to open command search.
No matching records
Expanded implementation notes
Expanded content keeps enough inset for Jelly deformation and long explanatory copy.
A closed disclosure with a deliberately long title that must wrap safely
Less critical metadata remains available on demand.
type Result<T> = { ok: true; value: T } | { ok: false; error: Error };| Owner | Project | Status |
|---|---|---|
| Maya Ortiz | Atlas migration | |
| Rin Shah | Long-running accessibility and interaction verification |
Ranked comparison
Bars compare one shared unit; the exact value remains visible.
Multi-metric profile
A radar reveals shape; the hidden table preserves exact values.
| Benchmark | Alpha | Beta |
|---|---|---|
| Speed | 76.0 | 55.0 |
| Quality | 86.0 | 68.0 |
| Reach | 58.0 | 81.0 |
| Efficiency | 72.0 | 88.0 |
Distribution range
Intervals show spread; the dot marks the median.
Effects
Deterministic atmosphere, geometry, and particles add a restrained modern accent without replacing the warm semantic canvas or hiding meaningful content.
Procedural backdrop
A stable brand field behind ordinary content
Seed and integer variation preserve the composition across SSR and hydration.
Semantic artwork stays in the DOM; only its surrounding particles are decorative.
Interactive liquid
Move across the field to stir the palette
WebGL adds fluid trails while ordinary SSR content remains the fallback.
Decorative field
Aurora and phaser dots stay behind content
The static layer survives hydration; the pointer trail yields to reduced motion.
Workspace
Design review
Primary content has room to breathe without wasting the narrow viewport.
Compact metadata
Version 0.1 · Jelly surface · native details semantics
Default closed disclosure
This secondary detail remains available without competing with the card.
Large disclosure with a deliberately long title that must wrap before the chevron
Long disclosure content checks padding, wrapping, rounded containment, and stable open-state geometry at narrow and wide viewport sizes.
07 · Layers
Menus and dialogs
Portalled UI stays above surrounding content, fits the visual viewport, restores focus, and remains dismissible by Escape. Contextual utilities share the label or toolbar row they qualify.
08 · Stress cases
Responsive layouts
These fixtures deliberately combine long copy, uneven content, constrained columns, and action groups—the conditions that exposed the original regressions.
Structural surfaces
Dense workspace
Architecture reaches the parent edge
Content owns the internal gutter. The singular workspace does not become a floating card.
Structural surfaces stay rectangular. Radius marks a bounded control, overlay, repeated roomy card, or sparse standalone group.
320 px safe
Long content cannot erase the inset
extraordinarily-long-identifier-that-must-wrap-without-widening-the-document.example
Adaptive row
Text and actions stack before they collide
Metadata yields to the primary label and remains available in the menu.
Status wrap
Clipping stress
Scrollable Jelly cards keep their canvas gutter
The rail clips content deliberately while leaving each soft edge room to deform.
09 · Quality gate
Interaction requirements
Automated verification checks these claims at phone, tablet, desktop, coarse-pointer, reduced-motion, and forced-colors conditions.
Feedback & communication
Loading, progress, messaging, route fallbacks, and decorative motion remain understandable with long copy, disabled actions, and reduced motion.
Progress and loading
Three decorative spinner sizes
Conversation
Page not found
This view could not load
Keyboard
Logical Tab order, arrow-key collections, Escape dismissal, focus restoration.
Focus
A visible focus indicator that is not clipped by the Jelly canvas.
Touch
At least 44 × 44 CSS pixels, with the shared default remaining 48 × 48.
Contrast
Readable text and state colors in light, dark, high-contrast, and disabled states.
Motion
Reduced-motion disables decorative movement without removing state feedback.
Haptics
Best-effort feedback after a real user action, never required to understand success.
A coherent interface language for the whole portfolio.
Principles
The system is intentionally restrained. Hierarchy comes from type, spacing, hairlines, and motion—not ornamental chrome.
Neutral is a foundation
Achromatic roles keep product content legible and let each business retain its own identity without fragmenting interaction design.
Behavior is part of the component
Focus, keyboard, touch, loading, error, reduced-motion, and responsive states are one contract—not follow-up polish.
Surfaces share a grammar
Structural surfaces stay rectangular. Radius marks controls, overlays, repeated roomy cards, and sparse standalone groups—not singular workspaces or dense lists.
Documentation is executable
The catalog renders production exports. When an API changes, its preview and guidance change in the same commit.
One system, several compositions
Choose the shell that reflects the information architecture; the visual system stays constant underneath.
| Surface | Shell | Dominant behavior |
|---|---|---|
| Marketing | Focused top bar | Quiet content-first canvas |
| Product | Adaptive navigation rail | Animated route stage |
| Dense tools | Rail + full-width canvas | Stable controls, virtualized content |
| Documentation | Rail + article + local outline | Registry-driven navigation |