================================================================================ DYVE — MORPHOGENIC BRAND BOOK Complete Identity & Design System Reference Version 1.0 · May 2026 ================================================================================ ================================================================================ 01 — BRAND OVERVIEW ================================================================================ Brand Name: DYVE Pronunciation: "dive" (as in diving deep) Tagline: Find your people. Leave the surface. Campaign Slogans: Your taste. Your crew. The pull. Mission Statement: DYVE is a social compass that connects your music taste, your friends, and your city into a single map — so you always know where your people are moving. No feeds. No scrolling. Just the pull of the real thing. Brand Personality: - Visionary but human - Authoritative but "wobbly" - Precise but expressive Brand Archetype: The Explorer / The Sage — navigating "Calculated Chaos." Core Pillars: 1. Pull Energy — Friends' activity creates social gravity on the map. 2. Taste as Identity — Your Spotify listening shapes what you see. ================================================================================ 02 — VOICE & TONE ================================================================================ Style: Direct, high-energy, and warm. Technique: "Parallelism" — rhythmic, punchy sentence structures. WE SAY (Parallelism): - Find your people. Leave the surface. - Your taste. Your crew. The pull. - Open. See. Go. - The city is loud. Your people cut through. WE DON'T SAY (Corporate/Generic): - Check out our new features - The best app for nightlife - AI-powered / agents / algorithms - Connecting you to events ================================================================================ 03 — LOGO SYSTEM ================================================================================ The DYVE logo system is a "Responsive Logo System" that adapts to context. Letters are treated as "density fields" using implicit surface modeling. The primary logo mark uses pure C1-continuous Bezier paths to achieve a liquid/morph aesthetic without pixelation or raster artifacts. --- Primary Wordmark: The Pillar Architecture --- Format: Center-stacked vertical wordmark (D / Y / V / E) Inspiration: Oasis "Ellipsis" motif Key Feature: Reflectional symmetry in the negative space between Y and V Font: Roboto Flex, weight 900 Optical Corrections (per letter): - D: Base anchor. Requires +2% tracking to account for the curved bowl optical weight. - Y: The fulcrum. Creates the central V-shape negative space. - V: Mirrors the Y. Creates perfect vertical symmetry in the negative space. - E: Grounding element. Extended bottom terminal to balance the visual weight of the D. --- Kinetic Logomark: The Density Field --- Format: Horizontal "DYVE" with SVG gooey filter Use Case: AR/VR showroom spaces, motion graphics Technology: SVG gooey filters (feGaussianBlur + feColorMatrix) and WebGL --- Micro-Logo (Primary): Core Density --- Format: SVG icon mark on dark squircle (rx: 224) Shape: Morphogenic liquid body (C1 Bezier path) with white "D" cutout Gradient: Cyber Cyan (#00FFFF) → Heritage Rose (#FF007F), 135° Background: Deep Obsidian (#111111) Features: - Inner highlight with screen blend mode - Two detached orbiting droplets (surface tension metaphor) - Bold centered "D" using fill-rule: evenodd for clean cutout --- Horizontal Lockup: Utility Application --- Format: 48px icon + "DYVE" wordmark, horizontal, left-aligned Use Case: Navigation bars, partner materials, app headers Font Weight: 800 --- Logo Variations --- Morph 01 — The Architectural D: The letter D itself IS the logo. A flat left edge morphing into a perfect arc, with a small droplet breaking free from the curve. Bold, geometric, instantly readable. Morph 02 — The State Change: A rigid geometric square melting seamlessly into a perfect fluid semicircle on the right side. Symbolizes structured data becoming fluid knowledge. A small detached droplet floats to the right. Morph 03 — The Negative Space: A solid gradient squircle with the letter D cleanly punched out using fill-rule: evenodd. The dark background shows through the letterform. Maximum contrast, maximum readability. Morph 04 — The Spark: A full gradient circle with a four-pointed fluid star shape in white (screen blend) at its center. The star is constructed with quadratic curves, not sharp lines — friendly, organic, alive. Morph 05 — The Orbital System: A large primary circle with a smaller satellite circle, connected by a smooth metaball bridge. A tiny detached droplet orbits further out. Represents hierarchical data nodes with fluid connections. Morph 06 — The Beacon: A solid gradient circle with a bold D cleanly cut from its center using the background color (#111111). Maximum simplicity — works at any scale. A glowing beacon with the brand mark carved into it. Morph 07 — The Dynamic 3D Core: A 3D morphogenic extrusion of the primary mark. The logo rotates dynamically, casting realistic "morphogenic shadows" that give depth and tactile volume to the digital brand. Set on a clean black background, this is the primary App Icon representation, bridging the gap between flat interface and immersive spatial computing. ================================================================================ 04 — COLOR PALETTE ================================================================================ --- Primary Colors --- Cyber Cyan HEX: #00FFFF RGB: 0, 255, 255 Role: The primary signal. Represents connection and digital energy. Used for core interactions, active states, links, and accent elements. Heritage Rose HEX: #FF007F RGB: 255, 0, 127 PMS: 199 C (equivalent) Role: The human heartbeat. Represents live events, urgency, and the analog soul. Used for alerts, primary CTAs, and live indicators. Bio Green (Fluorescent Green) HEX: #39FF14 RGB: 57, 255, 20 Role: Verification and life. Used strictly for success states, confirmed statuses, online indicators, and toggle-on states. Deep Obsidian HEX: #111111 RGB: 17, 17, 17 Role: The infinite canvas. Represents depth and the unknown. Serves as the base layer for the morphogenic UI. All backgrounds start here. --- Neutral Surfaces --- Built on white opacity layers over Deep Obsidian: 2% — rgba(255, 255, 255, 0.02) — Deepest subtle background 5% — rgba(255, 255, 255, 0.05) — Card/panel backgrounds (--color-bg-glass) 10% — rgba(255, 255, 255, 0.10) — Borders, dividers (--color-border-glass) 20% — rgba(255, 255, 255, 0.20) — Hover states, elevated surfaces 40% — rgba(255, 255, 255, 0.40) — Strong secondary text 60% — rgba(255, 255, 255, 0.60) — Placeholder text 70% — rgba(255, 255, 255, 0.70) — Body text (--color-text-secondary) 80% — rgba(255, 255, 255, 0.80) — Emphasized secondary text 100% — #FFFFFF — Headings, primary text --- Brand Gradients --- Primary Gradient (Cyber Rose): Direction: 135° (top-left → bottom-right) Stops: #00FFFF (0%) → #FF007F (100%) Usage: Logo marks, primary accent surfaces, hero backgrounds Bio Gradient: Direction: 135° Stops: #39FF14 (0%) → #008080 (100%) Usage: Success states, secondary accent Techno Orb Gradient: Direction: 135° Stops: #00E5FF → #0055FF Usage: Techno taste orbs, digital/tech-associated elements House Orb Gradient: Direction: 135° Stops: #E3004F → #FF8C00 Usage: House music taste orbs, warm/energetic elements ================================================================================ 05 — TYPOGRAPHY ================================================================================ Primary Typeface: Roboto Flex Type: Variable font (Google Fonts) Axes Available: Weight (wght), Width (wdth), Slant (slnt), Optical Size (opsz) Font Import URL: https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,slnt,wdth,wght@8..144,-10..0,25..151,100..1000&display=swap CSS Variable: --font-family-primary: 'Roboto Flex', sans-serif; --- Type Scale --- Display: 8rem / 128px — Hero headlines, splash screens H1: 3.5rem / 56px — Page titles (wght: 800, wdth: 110, tracking: -0.02em) H2: 2.5rem / 40px — Section headings (wght: 700) H3: 1.75rem / 28px — Subsection headings (wght: 600) Body: 1.125rem / 18px — Primary body text (line-height: 1.6, color: 70% white) Small: 0.875rem / 14px — Metadata, timestamps, secondary labels Caption: 0.75rem / 12px — Overlines, section labels, tags (text-transform: uppercase, letter-spacing: 0.15em, color: 40% white) ================================================================================ 06 — KINETIC TEXT (Living Brand) ================================================================================ The "Living Brand" concept maps Variable Font axes to experiential states. The typeface physically morphs to reflect the platform's emotional energy. --- Anticipation Stage --- Axes: wght: 300 | wdth: 100 | slnt: -10 Meaning: High slant suggests kinetic momentum. Energy is building. Something is about to happen. --- Exploration Stage --- Axes: wght: 500 | wdth: 120 | slnt: 0 Meaning: Expanded width. Casting a wide net. Taking in everything the city has to offer. --- Connection Stage --- Axes: wght: 800 | wdth: 75 | slnt: 0 Meaning: Compressing. Friends converge. Plans solidify. The crew is locking in. --- Arrival Stage --- Axes: wght: 900 | wdth: 100 | slnt: 0 Meaning: Maximum presence. You're here. Heavy, grounded, and real. ================================================================================ 07 — ENTITY SHAPE LANGUAGE (Semantic Shapes) ================================================================================ Every entity type in the DYVE ecosystem has a distinct geometric identity. Shape communicates meaning before the user reads a single label. Entity Type Shape Border Radius Aspect Ratio ───────────────────────────────────────────────────────────────────────────── User · Artist Full Circle 50% 1:1 Circle · Social Group Squircle 28% 1:1 Label · Organization Rounded Rectangle 12px 1:1 Artwork · Music Media Near-Square 4px 1:1 Venue · Location Marker Shape 16px 16px 4px 4px 1:1 Event · Moment Portrait Rect 8px 4:5 Shape Details: User / Artist (Circle): Represents living, breathing entities — people and performers. Echoes the organic morphogenic identity. Full 50% radius creates a perfect circle. Circle / Social Group (Squircle): Continuous-curvature squircle (28% radius). Softer than a square, more structured than a circle. Represents collective social units. Label / Organization (Rounded Rectangle): 12px border radius. Institutional, structured, and authoritative. Communicates professional entities and branded outlets. Artwork / Music Media (Near-Square): 4px border radius — the sharpest shape in the system. Mirrors album artwork and poster conventions. Pure content frame. Venue / Location (Marker): 16px top radii, 4px bottom radii. Evokes a pin/marker silhouette. Anchors the entity to a physical place on the map. Event / Moment (Portrait Rectangle): 8px radius with a strict 4:5 vertical aspect ratio. Designed specifically to frame event flyers and promotional posters without cropping. ================================================================================ 08 — SPACING & GRID SYSTEM ================================================================================ Base Unit: 8px Spacing Scale: xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px Bento Grid: Columns: 12 Gap: 24px (--bento-gap) Radius: 4px (--bento-radius) — strict contrast against gooey metaballs Padding: 32px (--bento-padding) Max Width: 1440px CSS Variables: --bento-gap: 24px; --bento-radius: 4px; --bento-padding: 32px; ================================================================================ 09 — COMPONENTS ================================================================================ --- Buttons --- Primary (Heritage Rose): Background: var(--color-heritage-rose) Color: White Animation: pulse-glow (2s infinite box-shadow pulse) Secondary (Cyber Cyan): Background: var(--color-cyber-cyan) Color: Black (#000) Outline (Glass): Background: Transparent Border: 1px solid var(--color-border-glass) Color: White Ghost (Transparent): Background: Transparent Border: None Color: var(--color-cyber-cyan) Hover: rgba(0, 229, 255, 0.08) background FAB (Floating Action Button): Size: 56px × 56px Shape: 50% border-radius (circle) Background: var(--color-fluorescent-green) Color: Black Shadow: 0 8px 24px rgba(57, 255, 20, 0.4) Hover: scale(1.15) translateY(-4px) Button Sizes: Large CTA: padding 20px 48px, font-size 1.2rem, radius 16px Default: padding 12px 24px, font-size 0.9rem Compact: padding 8px 16px, font-size 0.8rem, radius 8px --- Tags & Badges --- Default Tag: Padding: 8px 18px Radius: 20px (pill shape) Background: rgba(255, 255, 255, 0.06) Font: 0.9rem, weight 600 Hover: rgba(255, 255, 255, 0.10), translateY(-2px) Semantic Tag Colors: Cyan Tag: rgba(0, 229, 255, 0.1) background, Cyber Cyan text Rose Tag: rgba(227, 0, 79, 0.1) background, Heritage Rose text Green Tag: rgba(57, 255, 20, 0.1) background, Bio Green text --- Taste Orbs --- Shape: Circle (50% radius) Background: Gradient (direction varies by genre) Shadow: inset 0 0 20px rgba(255,255,255,0.4), 0 10px 24px rgba(0,0,0,0.5) Font: 0.75rem, weight 800, uppercase, white Sizes: 96px (Primary), 80px (Default), 64px (Small), 48px (Compact), 32px (Dot, no label) Genre Gradients: Techno: linear-gradient(135deg, #00E5FF, #0055FF) House: linear-gradient(135deg, #E3004F, #FF8C00) Ambient: linear-gradient(135deg, #39FF14, #008080) Default: linear-gradient(135deg, #00FFFF, #FF007F) ================================================================================ 10 — SURFACES & GLASS MORPHISM ================================================================================ All surfaces use layered white-opacity backgrounds over Deep Obsidian. Level 1 — Subtle: Background: rgba(255, 255, 255, 0.03) Border: 1px solid rgba(255, 255, 255, 0.06) Radius: 16px Backdrop Filter: None Level 2 — Card: Background: rgba(255, 255, 255, 0.06) Border: 1px solid rgba(255, 255, 255, 0.10) Radius: 16px Backdrop Filter: blur(20px) Level 3 — Elevated: Background: rgba(255, 255, 255, 0.10) Border: 1px solid rgba(255, 255, 255, 0.15) Radius: 16px Backdrop Filter: blur(40px) Shadow: 0 20px 40px rgba(0, 0, 0, 0.4) --- Bottom Sheet --- Background: linear-gradient(180deg, rgba(30,30,30,0.8), rgba(10,10,10,0.95)) Border: 1px solid rgba(255, 255, 255, 0.1), no bottom border Radius: 28px 28px 0 0 Padding: 40px 32px 32px Shadow: 0 -16px 40px rgba(0, 0, 0, 0.5) Backdrop: blur(40px) Handle: 40px × 5px, rgba(255,255,255,0.15), radius 3px, centered top ================================================================================ 11 — MATERIALITY & TEXTURES ================================================================================ Neo-Nostalgic textures differentiate DYVE from sterile tech branding. Halftone Grain: Pattern: radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px) Size: 8px × 8px Usage: UI background overlay for tactile noise Liquid Glass: Effect: Translucent layers with backdrop-filter: blur(20px) Border: 1px solid rgba(255, 255, 255, 0.2) Usage: Cards, panels, overlays — frosted glass aesthetic Decollage Layers: Effect: SVG turbulence filters for "ripped and torn" textures Usage: Background textures reflecting raw urban data Opacity: Low (0.2) for subtle depth ================================================================================ 12 — MOTION & ANIMATION ================================================================================ --- CSS Transition Tokens --- --transition-smooth: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) Usage: Default UI transitions (hover, color, opacity changes) --transition-bounce: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) Usage: Toggle flips, FAB scale pops, playful micro-interactions --- Keyframe Animations --- fade-in: Duration: 1s ease Effect: translateY(20px → 0) + opacity(0 → 1) Usage: Content entrance on scroll (intersection observer) pulse-glow: Duration: 2s infinite Effect: Box-shadow pulsing cycle Usage: Primary CTA attention-grabbing --- Motion Principles --- - All interactions feel fluid and organic, never mechanical - Hover states use translateY(-2px to -4px) for subtle lift - Scale animations use the bounce easing for playful energy - Page transitions should feel like liquid morphing, not hard cuts ================================================================================ 13 — APPLICATION ECOSYSTEM ================================================================================ Web Interface: Layout: Bento Grid using modular sections Radius: 4px border radiuses (contrast with organic metaballs) Spacing: Generous white space Effect: Fluid topography driven by WebGL metaball canvas Social Assets (TikTok/Reels): Style: "Distort/Disrupt" liquid ripple animations Overlay: High kinetic energy text overlays using variable font axes Format: Vertical 9:16 with brand gradient backgrounds Physical Artifacts: Style: High-end utility packaging Print: Silkscreen effects on "Structural Neutrality" substrates Concept: Physical manifestation of the digital density field ================================================================================ 14 — CSS CUSTOM PROPERTIES REFERENCE ================================================================================ :root { /* Core Palette */ --color-cyber-cyan: #00FFFF; --color-heritage-rose: #FF007F; --color-fluorescent-green: #39FF14; --color-obsidian: #111111; /* Text */ --color-text-primary: #FFFFFF; --color-text-secondary: rgba(255, 255, 255, 0.7); /* Surfaces */ --color-bg-primary: var(--color-obsidian); --color-bg-glass: rgba(255, 255, 255, 0.05); --color-bg-glass-hover: rgba(255, 255, 255, 0.1); --color-border-glass: rgba(255, 255, 255, 0.1); /* Typography */ --font-family-primary: 'Roboto Flex', sans-serif; /* Grid */ --bento-gap: 24px; --bento-radius: 4px; --bento-padding: 32px; /* Transitions */ --transition-smooth: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); --transition-bounce: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } ================================================================================ 15 — LOGO MARK SVG CONSTRUCTION ================================================================================ The primary logo mark is a pure-vector SVG constructed entirely from mathematically defined Bezier curves. No raster images, no SVG filters that cause pixelation (blur, feColorMatrix, etc.). ViewBox: 0 0 1024 1024 Background: rect, rx="224", fill="#111111" Gradient: linearGradient from #00FFFF to #FF007F at 135° Morph Body Path (C1 Continuous Bezier): M 512 180 C 710 180, 710 430, 610 480 C 560 505, 560 555, 610 580 C 660 605, 660 820, 512 820 C 364 820, 364 605, 414 580 C 464 555, 464 505, 414 480 C 314 430, 314 180, 512 180 Z D Letterform (centered, evenodd cutout): Transform: translate(512, 500) scale(4.2) Outer: M -45 -65 L 0 -65 C 55 -65, 80 -30, 80 0 C 80 30, 55 65, 0 65 L -45 65 Z Inner: M -18 -38 L -5 -38 C 30 -38, 48 -18, 48 0 C 48 18, 30 38, -5 38 L -18 38 Z Fill Rule: evenodd Detached Droplets: cx="750" cy="280" r="50" fill="#00FFFF" (screen blend) cx="280" cy="720" r="35" fill="#FF007F" (screen blend) ================================================================================ © 2026 DYVE Networks. Morphogenic Brand Guidelines. All rights reserved. ================================================================================