DYVE DESIGN SYSTEM REFERENCE Generated on 2026-05-11T19:51:42.828Z ================================================================= 01 — Typography Scale CSS Custom Properties ================================================================= - [--color-cyber-cyan][#00E5FF] : Primary accent, links, active states - [--color-heritage-rose][#E3004F] : CTAs, alerts, live indicators - [--color-fluorescent-green][#39FF14] : Success, toggles, online status - [--color-obsidian][#0A0A0A] : Base canvas background - [--color-text-primary][#FFFFFF] : Headings, primary text - [--color-text-secondary][rgba(255,255,255,0.7)] : Body text, descriptions - [--color-bg-glass][rgba(255,255,255,0.05)] : Card / panel backgrounds - [--color-border-glass][rgba(255,255,255,0.1)] : Borders, dividers ================================================================= 03 — Spacing & Grid 8px Base Unit System ================================================================= : 4px — xxs : 8px — xs : 12px — sm : 16px — md : 24px — lg : 32px — xl : 48px — 2xl : 64px — 3xl Bento Grid [12 columns · 24px gap · 20px radius · 32px padding · max-width 1440px] ================================================================= 04 — Buttons Button Variants ================================================================= Hierarchy Primary · Heritage Rose Secondary · Cyber Cyan Outline · Glass Ghost · Transparent Disabled State Shapes & Sizes Large CTA Default Compact Pill + Icon ================================================================= 05 — Form Controls Inputs & Controls ================================================================= Text Inputs Toggles & Sliders Open Air Events 3D Building Highlights Search Radius ================================================================= 06 — Tags & Badges Classification Elements ================================================================= : #OpenAir : #Techno : #SecretLocation : #Confirmed : #House : #DrumAndBass : #Ambient ================================================================= 07 — Entity Shapes 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. User · Artist [border-radius: 50%] Full circle. Represents living, breathing entities — people and performers. Echoes the organic morphogenic identity. SVG Circle · Social Group [border-radius: 28% (Squircle)] Continuous-curvature squircle. Softer than a square, more structured than a circle. Represents collective social units. SVG Label · Organization [border-radius: 12px] Rounded rectangle. Institutional, structured, and authoritative. Communicates professional entities and branded outlets. SVG Artwork · Music Media [border-radius: 4px] Near-square with strict 4px geometry. Mirrors album artwork and poster conventions. The sharpest shape in the system — pure content frame. SVG Venue · Location [border-radius: 16px 16px 4px 4px] Rounded top, grounded base. Evokes a pin/marker silhouette. Anchors the entity to a physical place on the map. SVG Event · Moment [border-radius: 8px | aspect-ratio: 4/5] Vertical 4:5 portrait rectangle. Designed specifically to frame event flyers and promotional posters without cropping. SVG Shape Taxonomy — At a Glance : User : Artist : Circle : Label : Artwork : Venue : Event ================================================================= 08 — Taste Orbs & Avatars Music-Driven Social Elements ================================================================= Taste Orbs represent Spotify genre affinities. Each orb is gradient-coded and sized by listening frequency. TECHNO : 96px · Primary HOUSE : 80px · Default AMBIENT : 64px · Small DNB : 48px · Compact : 32px · Dot ================================================================= 09 — Interactive Components The Morphic Hub Control ================================================================= Translating the Semantic Shape Language into functional interface elements. Components utilize morphogenic physics for states like splitting, combining, and expanding. : 1 W : 1 M : ∞ Hover the center hub to interact. Buttons fluidly split outward (Mitosis) transitioning from a clock to a close state. : Follow : Message Dynamic Entity Bonding: Hover to see two distinct actions physically attract and fuse together when proximity thresholds are met. ================================================================= 10 — Cards & Surfaces Glass Morphism Layers ================================================================= Level 1 — Subtle : 5% white · 6% border Level 2 — Card : 6% + blur(20px) Level 3 — Elevated : 10% + blur(40px) + shadow ================================================================= 11 — Surfaces · Hub Bottom Split 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. ================================================================= 12 — Motion & Easing Animation Tokens ================================================================= - [--transition-smooth] : [0.4s cubic-bezier(0.2, 0.8, 0.2, 1)] : Default UI transitions - [--transition-bounce] : [0.6s cubic-bezier(0.34, 1.56, 0.64, 1)] : Toggle flips, FAB pops - [fade-in] : [1s ease · translateY(20px→0)] : Content entrance on scroll - [pulse-glow] : [2s infinite · box-shadow pulse] : Primary CTA attention ================================================================= 13 — Map Bubbles · Canvas Markers Social 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 : 🎧 : 80px · Artist : 👤 : 60px · User : 📍 : 44px · Compact Bubble States : Active · Glow : Target · Pulse : Inactive : 🔥 : Mood Badge ================================================================= 14 — Avatars · Identity 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) +5 [margin-left: -12px · border: 2px solid bg-color] ================================================================= 15 — List Items UnifiedListItem ================================================================= The standard row component for friends, artists, events, and search results across all collection screens. Standard · Unread · Trailing Action : Alex Turner : Last seen 2h ago · Berlin Follow : Nina Kraviz : New event in 3 days : Berghain : Venue · Friedrichshain : 2.1km ================================================================= 16 — Sheet Headers · Modals 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 ================================================================= 17 — Notifications · Badges · Banners Status Indicators ================================================================= PulsingStatusBadge, AnnouncementBar, and OfflineBanner communicate real-time system and social state. Status Badges LIVE 3 NEW Banners : No connection · Retrying… : 🎉 New city unlocked: São Paulo ================================================================= 18 — Empty · Error · Skeleton States 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 Retry Skeleton Shimmer ================================================================= 19 — Event Cards · Map-First Discovery 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 : MAY : 24 : Fluid Frequencies : Berghain · Friedrichshain : Open Air · Techno : #Techno : #OpenAir : 2 friends Live Event · Energy Border : LIVE : NOW : Ambient Drift : Panorama Bar · Berlin : Indoor · Ambient : #Ambient Building Energy · Blue/Cyan/Green : SAT : 31 : Warehouse Session : RSO · Kreuzberg : Indoor · House : #House : Building momentum Peak Energy · Purple/Pink/Orange : FRI : 13 : Rave Requiem : Tresor · Mitte : Indoor · Techno : #Techno : Peak energy 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. - [PEAK][purple → pink → orange · 2px · blur 12 · 0.55 opacity] : Maximum intensity, highest check-in rate - [BUILDING][blue → cyan → green · 1.5px · blur 8 · 0.4 opacity] : Growing momentum, rising attendance - [NORMAL][no border · no glow] : Standard state — no visual energy cue - [LIVE][SmartDateBadge shows "LIVE NOW"] : Live status is badge-only, never a border - [DRAFT][yellow → amber → orange · 1px] : Unpublished event, manager-only visibility EventCard Anatomy - [UnifiedEventImage] : [width: 85 · height: 105 · radius: 12] : Tilted 4:5 flyer thumbnail - [Transform.rotate] : [angle: persistentRotation(id)] : Each event gets a unique, deterministic tilt - [SmartDateBadge] : [left: -8 · top: -8 · tilt: -0.1 rad] : Overlaps top-left, counter-rotated - [EventBorderColors] : [gradient border when LIVE/PEAK/BUILDING] : Energy-coded animated border glow - [AvatarCluster] : [radius: 16 · overlap: -6px] : Friends attending, color-coded by RSVP status ================================================================= 20 — Spatial Discovery · Anti-Feed Map-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. ================================================================= 21 — Gooey Interaction System 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-scale][1.04×] : Scale on press - [--bounce-duration][120ms] : Ease-out cubic - [--touch-highlight-opacity][0.12] : White radial flash - [--touch-highlight-radius][24px] : Radial 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-gooiness][15.0] : Metaball merge strength - [--gooey-blob-color][#FFFFFF] : Blob fill color - [--gooey-animation-duration][400ms] : Morph animation - [--gooey-animation-curve][easeOutCubic] : Natural deceleration ✦ Used for search bar expansion & tab bar morphing indicator. GooeyZone A metaball rendering zone where child [GooeyBlob] elements merge with liquid physics. - [--zone-gooiness][20.0] : Higher = thicker bridges - [--zone-border-width][2.0] : Mass border thickness - [--zone-border-color][#FFFFFF] : Outer shell color - [--zone-max-blobs][10] : Hard 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-radius][90px] : Orbit distance - [--radial-spread-duration][500ms] : Stagger interval - [--radial-blob-size][56px] : Action button diameter - [--radial-center-blob-size][72px] : Center blob (entity) GooeyBorderWrapper Wraps any widget with a metaball-merging border that morphs when adjacent to other bordered elements. - [--border-mass-width][2px] : Outer shell thickness - [--border-mass-color][#FFFFFF] : Shell accent color - [--border-gooiness][12.0] : Merge 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-duration][400ms] : Deliberate liquid feel - [--tab-indicator-color][#FFFFFF] : Active blob fill - [--tab-inactive-border][rgba(255,255,255,0.24)] : Dormant ring Behavioral Standards ✦ Every tappable element must be wrapped in [BouncyLivingButton] — no exceptions for any screen. ✦ Touch highlight is a white radial gradient at the exact contact point, fading over [120ms]. ✦ Search bar openings use [GooeySpreadRow] for liquid expansion — never [AnimatedSwitcher]. ✦ Tab bar active indicators morph between positions, never teleport or cross-fade. ✦ Radial menus emerge with metaball trails — each action blob bridges to center before snapping free. ✦ Max 10 blobs per GooeyZone — design around this limit to prevent rendering artifacts. ✦ All gooey transitions target [400ms] with [easeOutCubic] for natural deceleration.