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
Loading page
Jungle 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
These defaults remove noise before a product adds any personality. Exceptions need a concrete interaction or information reason.
Separate hierarchy with surface tone and spacing. Draw a line only when adjacent backgrounds cannot explain the boundary.
Use a familiar icon for compact actions, retain a programmatic name, and reveal extra explanation on hover, focus, or demand.
Keep primary state visible. Move metadata, secondary controls, and implementation detail into menus, disclosures, or dedicated detail views.
Padding, radius, stacking, focus, and target size are testable contracts—not final polish applied after a feature works.
Each nesting boundary owns one inset. A child does not repeat its parent’s page, panel, or toolbar padding.
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.
Pending work swaps a reserved icon for a spinner. The action label, width, order, and focus target stay fixed from press through completion.
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.
02 · Tokens
The scale is deliberately small: a few stable tokens produce a coherent rhythm across light and dark products.
Display with restraint
A decisive page title
A scannable section heading
Body copy stays calm and readable at ordinary density.
Caption · secondary, never illegible
03 · Controls
Actions remain intrinsically sized, keep a 48 px touch target by default, and expose every state without shifting surrounding layout.
Leading icons and labels center as one cluster; single glyphs inherit the same 20 px visual scale and square target footprint as shared icons.
Every icon action derives a hover and focus tooltip from its accessible name.
Play keeps one label and footprint while its reserved icon reports startup. Stop stays available during startup, and product-owned commands follow it.
Ready and pending keep one label, footprint, DOM order, focus target, and a centered visible-content cluster.
The text segment performs the default action; the named icon segment opens adjacent variants. Each remains a separate keyboard target.
04 · Input
Labels clarify unfamiliar input, descriptions appear only when they prevent error, and every field keeps its inset at long and narrow sizes.
05 · Choice
Selection widgets own arrow-key movement, one visible selected surface across compositions, and recovery when controlled values change.
One trigger preserves all three choices when persistent chrome must reflow under enlarged text.
06 · Surfaces
Cards establish a padded grouping. Disclosures keep less critical information available without making it compete with the primary task.
Representative empty, long, alert, settings, disclosure, and tabular states keep hierarchy legible without turning every boundary into a box.
Use ⌘ K to open command search.
Expanded content keeps enough inset for Jelly deformation and long explanatory copy.
Less critical metadata remains available on demand.
| Owner | Project | Status |
|---|---|---|
| Maya Ortiz | Atlas migration | |
| Rin Shah | Long-running accessibility and interaction verification |
Deterministic atmosphere, geometry, and particles add a restrained modern accent without replacing the warm semantic canvas or hiding meaningful content.
Procedural backdrop
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
WebGL adds fluid trails while ordinary SSR content remains the fallback.
Decorative field
The static layer survives hydration; the pointer trail yields to reduced motion.
Workspace
Primary content has room to breathe without wasting the narrow viewport.
Version 0.1 · Jelly surface · native details semantics
This secondary detail remains available without competing with the card.
Long disclosure content checks padding, wrapping, rounded containment, and stable open-state geometry at narrow and wide viewport sizes.
07 · Layers
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
These fixtures deliberately combine long copy, uneven content, constrained columns, and action groups—the conditions that exposed the original regressions.
Dense workspace
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
extraordinarily-long-identifier-that-must-wrap-without-widening-the-document.example
Adaptive row
Metadata yields to the primary label and remains available in the menu.
Status wrap
Clipping stress
The rail clips content deliberately while leaving each soft edge room to deform.
09 · Quality gate
Automated verification checks these claims at phone, tablet, desktop, coarse-pointer, reduced-motion, and forced-colors conditions.
Loading, progress, messaging, route fallbacks, and decorative motion remain understandable with long copy, disabled actions, and reduced motion.
Three decorative spinner sizes
Logical Tab order, arrow-key collections, Escape dismissal, focus restoration.
A visible focus indicator that is not clipped by the Jelly canvas.
At least 44 × 44 CSS pixels, with the shared default remaining 48 × 48.
Readable text and state colors in light, dark, high-contrast, and disabled states.
Reduced-motion disables decorative movement without removing state feedback.
Best-effort feedback after a real user action, never required to understand success.