Design System
The complete technical reference for building DYVE interfaces. Every token, component, and pattern documented.
8rem / 128px
DYVE IN
3.5rem / 56px
2.5rem / 40px
1.75rem / 28px
1.125rem / 18px
0.875rem / 14px
0.75rem / 12px
Design Tokens
Cross-platform primitive tokens for Web (CSS) and Flutter (AppTheme).
--color-cyber-cyan#00E5FFPrimary accent, links, active states--color-heritage-rose#E3004FCTAs, alerts, live indicators--color-fluorescent-green#39FF14Success, toggles, online status--color-obsidian#0A0A0ABase canvas background--color-text-primary#FFFFFFHeadings, primary text--color-text-secondaryrgba(255,255,255,0.7)Body text, descriptions--color-bg-glassrgba(255,255,255,0.05)Card / panel backgrounds--color-border-glassrgba(255,255,255,0.1)Borders, dividers8px Base Unit System
Bento Grid
12 columns · 24px gap · 20px radius · 32px padding · max-width 1440px
Liquid Interaction Buttons
The MorphicButton is the core interactive element of the DYVE design language. On press, liquid metaball blobs emerge at the touch point, split apart to create an organic "tear" effect, then retract on release. Wrapped by BouncyLivingButton for scale feedback and composed into AppButton for type-safe usage.
Press and hold any button below to experience the liquid blob interaction. Move your cursor while pressed to track the tear position.
Primary · Cyan + Purple
Active ambient blobs. Used for primary CTAs — "Check In", "Follow", "Create Event".
Secondary · Muted Dark
Subtle liquid feedback. Used for secondary actions — "Message", "Share", quick action circles.
Destructive · Red Blaze
Alert-colored liquid feedback. Used for dangerous actions — "Delete Event", "Block User", "Leave Circle".
Ghost · Transparent
No liquid feedback, scale-only bounce. Used for inline text actions and navigation — "See All", "Cancel".
AppButton Type Tokens
Each type maps to specific background, outline, and liquid blob colors. useBlur: false is mandatory when rendering over Mapbox/Impeller surfaces.
primarybg: cyan 15% · outline: cyan 30% · blobs: cyan + purpleAmbient active · blobIntensity 0.6secondarybg: #141414 · outline: white 10% · blobs: muted blue-greyPress-only · blobIntensity 0.6destructivebg: red 15% · outline: red 30% · blobs: redAccent + redPress-only · blobIntensity 0.3ghostbg: transparent · no outline · no blobsScale-only via BouncyLivingButtonMorphicButton Anatomy
BouncyLivingButtonscale: 1.04× · duration: 120msOuter wrapper — all tappable elementsMorphicButtonClipRRect + GooeyZoneLiquid blob shader layerGooeyBlob × 5left, right, center, orbit-1, orbit-2Split-tear + ambient orbiting blobsClipRRectborderRadius: 100 (pill)Constrains metaballs to button boundsBackdropFilterblur(20, 20) · optionalGlass blur — DISABLED over Mapbox (useBlur: false)isActivetrue → ambient blobs loopPrimary buttons show ambient blob orbit continuouslyMorphic Button Rules
AppButton wraps BouncyLivingButton → MorphicButton. No exceptions.onPressed. On release outside → cancel without callback.useBlur: false is mandatory when buttons render over native platform views (Mapbox, camera).borderRadius: circular(100) with secondary type.primary type shows ambient orbiting blobs even when idle — all other types activate only on press.ghost type has zero liquid feedback — only BouncyLivingButton scale effect.Inputs & Controls
Text Inputs
Toggles & Sliders
Classification Elements
Semantic Shape Language
Every entity type in the DYVE ecosystem has a distinct geometric identity. Shape communicates meaning before the user reads a single label.
Shape Taxonomy — At a Glance
Music-Driven Social Elements
Taste Orbs represent Spotify genre affinities. Each orb is gradient-coded and sized by listening frequency.
The Morphic Hub Control
Translating the Semantic Shape Language into functional interface elements. Components utilize morphogenic physics for states like splitting, combining, and expanding.
Glass Morphism Layers
Level 1 — Subtle
Level 2 — Card
Level 3 — Elevated
Split View Architecture
DYVE does not use traditional modal overlays. Instead, the interface utilizes a "Hub Bottom Split" where the map physically shrinks to accommodate a drawer rising from the bottom, keeping spatial context active at all times.
Split View Context (e.g. Event Details)
Slide up to expand. This surface pushes the map canvas up instead of overlaying it.
Animation Tokens
--transition-smooth0.4s cubic-bezier(0.2, 0.8, 0.2, 1)Default UI transitions--transition-bounce0.6s cubic-bezier(0.34, 1.56, 0.64, 1)Toggle flips, FAB popsfade-in1s ease · translateY(20px→0)Content entrance on scrollpulse-glow2s infinite · box-shadow pulsePrimary CTA attentionSocial Map Layer
CanvasBubble is the primary map entity. Circular avatars float above the Mapbox canvas with genre-gradient borders, labels, and optional mood emoji badges.
Bubble Sizes
Bubble States
User & Entity Avatars
UserAvatar, AvatarCluster, and CollapsingAvatarRow are used across profiles, lists, and social hubs.
Avatar Sizes
border-radius: 50% · border: 2px solid border-color
Avatar Cluster (Overlap Stack)
margin-left: -12px · border: 2px solid bg-color
UnifiedListItem
The standard row component for friends, artists, events, and search results across all collection screens.
Standard · Unread · Trailing Action
SharedModalHeader
Every bottom sheet uses the unified SharedModalHeader: a drag handle, title, and close button. Used by 20+ sheet components in the guest app.
Standard Modal Header
Event Details
Status Indicators
PulsingStatusBadge, AnnouncementBar, and OfflineBanner communicate real-time system and social state.
Status Badges
Banners
Feedback States
EmptyStateWidget, ErrorStateWidget, and skeleton shimmer loaders ensure the UI always communicates status.
Empty State
No results
Try a different search term
Error State
Something went wrong
Please try again
Skeleton Shimmer
EventCard · Tilted Flyer Thumbnails
Events are never shown in a traditional vertical feed. They surface spatially on the map via markers and bubbles. When listed (e.g., in a timeline sheet or profile), the EventCard uses a tilted 4:5 flyer thumbnail with labels to the right.
The flyer image is always slightly rotated (~0.1 rad) via UnifiedEventImage. The SmartDateBadge overlaps the top-left corner at left: -8, top: -8, also counter-rotated. When a custom flyer is generated, the image has no text overlay — all metadata (title, venue, genres, friends) lives to the right.
Generated Flyer · No Text Overlay
Live Event · Energy Border
Building Energy · Blue/Cyan/Green
Peak Energy · Purple/Pink/Orange
Energy System · EventBorderColors
Energy levels drive animated gradient borders around flyer thumbnails. Live events communicate status via the date badge only — they never show an energy border.
PEAKpurple → pink → orange · 2px · blur 12 · 0.55 opacityMaximum intensity, highest check-in rateBUILDINGblue → cyan → green · 1.5px · blur 8 · 0.4 opacityGrowing momentum, rising attendanceNORMALno border · no glowStandard state — no visual energy cueLIVESmartDateBadge shows "LIVE NOW"Live status is badge-only, never a borderDRAFTyellow → amber → orange · 1pxUnpublished event, manager-only visibilityEventCard Anatomy
UnifiedEventImagewidth: 85 · height: 105 · radius: 12Tilted 4:5 flyer thumbnailTransform.rotateangle: persistentRotation(id)Each event gets a unique, deterministic tiltSmartDateBadgeleft: -8 · top: -8 · tilt: -0.1 radOverlaps top-left, counter-rotatedEventBorderColorsgradient border when LIVE/PEAK/BUILDINGEnergy-coded animated border glowAvatarClusterradius: 16 · overlap: -6pxFriends attending, color-coded by RSVP statusMap-First, Not Feed-First
DYVE deliberately rejects the infinite-scroll feed paradigm. Events, artists, and friends are discovered spatially on a map, not in a ranked algorithmic timeline. Every UI pattern is designed to preserve spatial context.
Discovery Layer
Map Canvas
Events as markers. Friends as bubbles. Spatial proximity drives discovery.
Context Layer
Hub Bottom Split
Sheets push the map up instead of covering it. Spatial context is never lost.
Social Layer
Morphic Bubbles
Friends float as gooey bubbles. Long-press opens radial actions. No profile grids.
Sentient Identity · Liquid Feedback
Every interactive element in the app should feel alive — responding to touch with organic, physics-driven motion powered by metaball rendering via the gooey package.
BouncyLivingButton
Universal wrapper for all tappable elements. Provides scale feedback + radial touch highlight.
--bounce-scale1.04×Scale on press--bounce-duration120msEase-out cubic--touch-highlight-opacity0.12White radial flash--touch-highlight-radius24pxRadial gradient size✦ All GestureDetector/ElevatedButton/TextButton usages must be replaced with BouncyLivingButton.
GooeySpreadRow
Horizontal row of elements that merge/split with metaball bridging when children animate in/out.
--gooey-gooiness15.0Metaball merge strength--gooey-blob-color#FFFFFFBlob fill color--gooey-animation-duration400msMorph animation--gooey-animation-curveeaseOutCubicNatural deceleration✦ Used for search bar expansion & tab bar morphing indicator.
GooeyZone
A metaball rendering zone where child GooeyBlob elements merge with liquid physics.
--zone-gooiness20.0Higher = thicker bridges--zone-border-width2.0Mass border thickness--zone-border-color#FFFFFFOuter shell color--zone-max-blobs10Hard limit per zone✦ Used in radial menu overlay and tab bar indicator morphing.
Radial Menu · Gooey Emergence
Long-press quick actions emerge from the center point with liquid metaball trails that bridge and snap.
--radial-spread-radius90pxOrbit distance--radial-spread-duration500msStagger interval--radial-blob-size56pxAction button diameter--radial-center-blob-size72pxCenter blob (entity)GooeyBorderWrapper
Wraps any widget with a metaball-merging border that morphs when adjacent to other bordered elements.
--border-mass-width2pxOuter shell thickness--border-mass-color#FFFFFFShell accent color--border-gooiness12.0Merge intensity✦ Apply to buttons and inputs to create organic, liquid-like borders.
Tab Bar · Liquid Indicator
The white active tab indicator slides between items as a liquid blob, morphing with metaball physics.
--tab-morph-duration400msDeliberate liquid feel--tab-indicator-color#FFFFFFActive blob fill--tab-inactive-borderrgba(255,255,255,0.24)Dormant ringBehavioral Standards
BouncyLivingButton — no exceptions for any screen.120ms.GooeySpreadRow for liquid expansion — never AnimatedSwitcher.400ms with easeOutCubic for natural deceleration.