# Design Language for persopass.io ## Aesthetics and Tone persopass.io channels the visual language of a **biometric authentication terminal** housed inside a softly-lit, high-end wellness clinic -- where cutting-edge identity verification technology meets the tactile comfort of a warm, human-centered environment. The aesthetic is **neomorphism at clinical scale**: every interactive element appears pressed into or extruded from a single continuous surface of cool matte polymer, like the faceplate of a premium Japanese home appliance. Shadows are always dual -- a soft dark shadow on one side (#b8bec7 at 40% opacity, offset 6px) and a soft light highlight on the opposite side (#ffffff at 60% opacity, offset -6px) -- creating the illusion of physical depth without hard edges or aggressive contrasts. The mood is **warm-inviting**: despite the technological subject matter, the site never feels clinical or intimidating. Imagine entering a Scandinavian bank lobby designed by Naoto Fukasawa -- pale stone surfaces, indirect warm-spectrum lighting bouncing off rounded corners, the faint hum of precision machinery behind frosted panels. Every surface breathes. Every interaction feels like pressing a button molded from a single piece of silk-finish aluminum. The visual storytelling centers on the idea that your identity is something precious and tangible -- not abstract data, but a physical artifact cradled in a secure, beautiful container. Color temperatures lean cool (gray-blue surfaces) but accent lighting is deliberately warm (soft amber and peach tones in highlights and focal points), creating a thermal contrast that reads as "technological warmth" -- a machine that knows you and cares. ## Layout Motifs and Structure The layout uses a **layered-depth** system where content exists on visually distinct z-planes, creating a parallax-like spatial hierarchy without traditional parallax scrolling. The page is organized as a series of floating panels at different perceived depths, each casting its own neomorphic shadow onto the background surface below. **Spatial Architecture:** - **Background Layer (z-0):** A continuous surface in #d1d9e6 (cool gray polymer) that stretches infinitely, textured with an extremely subtle radial gradient from center (#dde3ec) to edges (#c5ced9), simulating the gentle curvature of a large concave surface lit from above. This surface never moves. It is the "desk" or "table" on which all other elements sit. - **Primary Content Layer (z-1):** Large neomorphic panels (border-radius: 24px) that contain the main narrative sections. These panels are extruded from the background surface -- they share the same #d1d9e6 base color but cast dual shadows (dark lower-right: `8px 8px 16px #b8bec7`; light upper-left: `-8px -8px 16px #ffffff`). Panels are 680px max-width on desktop, centered horizontally but with 40px vertical gaps that allow the background layer to breathe between them. - **Floating Element Layer (z-2):** Smaller interactive components -- buttons, input fields, identity badges, status indicators -- that appear to hover above the primary panels. These use concave neomorphic styling (inset shadows: `inset 4px 4px 8px #b8bec7, inset -4px -4px 8px #ffffff`) to suggest pressed-in wells, or convex styling to suggest raised controls. Interactive states toggle between concave (resting/inactive) and convex (active/pressed). - **Particle Overlay (z-3):** The topmost layer contains the particle effects system -- translucent, slowly drifting luminous motes that float above all content, catching light and casting no shadows. These exist in the "air" above the interface, connecting the human viewer to the digital depth. **Navigation:** No traditional navigation bar. Instead, a vertical strip of five neomorphic circular buttons (48px diameter each) is anchored 32px from the left viewport edge at vertical center. Each button bears a single line-weight icon (fingerprint, face-scan, shield, key, settings). On hover, the button transitions from flat to convex over 200ms, and a label slides out from the right side of the circle as a pill-shaped tooltip. **Section Flow:** Content flows vertically as a single continuous scroll. Each section occupies approximately 85vh, with generous negative space above and below each panel. The scroll journey tells a story: arrival (identity as concept) -> recognition (how verification works) -> trust (the security layer) -> warmth (the human connection behind the technology). ## Typography and Palette **Typography:** - **Headlines / Section Titles:** "Barlow Condensed" (Google Fonts) -- a tall, narrow, confident condensed sans-serif that evokes technical documentation and aerospace control panels. Used at 2.4rem-4.8rem for primary headings. Weight: 600 (SemiBold). Letter-spacing: 0.06em (generous tracking to open up the condensed forms). Line-height: 1.1. Text-transform: uppercase for primary section titles. Color: #3a4050 on light backgrounds. - **Body / Descriptive Text:** "DM Sans" (Google Fonts) -- a geometric sans-serif with open, friendly letterforms that soften the technical feel of the condensed headlines. Used at 1rem-1.25rem for body copy. Weight: 400 (Regular) for body, 500 (Medium) for emphasis. Letter-spacing: 0.01em. Line-height: 1.65 for comfortable reading. Color: #5a6275 on light backgrounds. - **Accent / Labels / Metadata:** "IBM Plex Mono" (Google Fonts) -- a humanist monospace face used sparingly for authentication codes, timestamps, technical identifiers, and small labels. Used at 0.75rem-0.875rem. Weight: 400. Letter-spacing: 0.04em. Color: #8b95a8 for secondary labels, #e8946a (warm peach) for active status indicators. **Palette:** | Role | Hex | Description | |------|-----|-------------| | Surface Base | #d1d9e6 | Cool gray polymer -- the primary neomorphic surface | | Surface Light | #e8edf5 | Highlighted surface areas, hover states | | Surface Dark | #b8bec7 | Shadow-side tones, depth reinforcement | | Deep Background | #c5ced9 | Furthest recessed areas, viewport edges | | Text Primary | #3a4050 | Headline text, high-priority content | | Text Secondary | #5a6275 | Body text, descriptions | | Text Tertiary | #8b95a8 | Labels, metadata, timestamps | | Warm Accent | #e8946a | Peach-amber for focal points, active states, warmth signals | | Trust Accent | #7ba3c9 | Soft steel-blue for trust indicators, verification badges | | Success Glow | #8bc9a1 | Soft sage-green for confirmed/verified states | | Alert Warm | #d4836a | Deeper terracotta for attention states | | Particle Light | #f0dcc8 | Warm cream for floating particle motes | The palette intentionally avoids pure whites and pure blacks. Every color lives in the gray-blue middle range, with warmth introduced only through the accent colors. This creates the "warm machine" paradox central to the brand. ## Imagery and Motifs **Particle Effects System (Primary Motif):** The signature visual element of persopass.io is a canvas-based particle field that overlays the entire page. Approximately 60-80 luminous particles drift slowly across the viewport, each rendered as a soft radial gradient circle (4px-12px diameter) in #f0dcc8 (warm cream) at 15-40% opacity. Particles move at 0.1-0.3px per frame in randomized directions, with gentle sinusoidal oscillation on the perpendicular axis (amplitude: 2px, period: 4-8 seconds). When particles drift within 120px of each other, a thin connecting line (#e8946a at 8% opacity) appears between them, creating an evolving constellation-like network that suggests identity verification pathways and trust connections. When the user scrolls, particles react: those in the viewport center accelerate slightly (0.5px/frame) and drift outward, creating a subtle "breathing" effect tied to scroll velocity. On mouse hover over a neomorphic panel, nearby particles gravitate gently toward the cursor position (gravitational pull of 0.02px/frame toward cursor, max influence radius 200px), then slowly resume their drift when the cursor leaves. **Photography (Supporting Imagery):** Photography on persopass.io is used sparingly and always within strict neomorphic frames. Images are close-up, tightly cropped shots of human details that suggest identity without revealing full faces: the curve of a fingerprint ridge under macro lens, the iris pattern of an eye lit by warm amber light, the side profile of a jawline casting a soft shadow, hands cupping a small glowing object. All photography is treated with a desaturation filter (reduce saturation by 40%) and a cool-gray overlay (#d1d9e6 at 15% multiply blend), then a warm vignette (radial gradient from transparent center to #e8946a at 5% around edges). This treatment unifies all imagery into the neomorphic cool-gray world while preserving the warm human presence at the center of each image. **Biometric Motif Illustrations:** Scattered throughout the layout are delicate line-art illustrations of biometric concepts rendered in a single stroke weight (1.5px) in #7ba3c9 (trust blue): a fingerprint whorl pattern, an iris scan crosshair, a facial recognition mesh, a voiceprint waveform, a DNA helix fragment. These are drawn as SVG path animations that trace themselves on scroll-reveal (stroke-dasharray technique, 1.5 second draw duration, ease-in-out timing). Each illustration lives inside a circular neomorphic frame (inset shadow) like a specimen viewed through a porthole. **Identity Badge Component:** A recurring visual element: a rectangular card (280px x 160px) with heavily rounded corners (20px), neomorphic extrusion, containing a blurred placeholder photo, a warm accent line (#e8946a, 3px height, 60px width) beneath it, and two lines of IBM Plex Mono text simulating an identity record. This badge appears at key narrative moments, slowly rotating on the Y-axis (3D perspective, 2-degree oscillation, 6-second period) to suggest a physical card being examined. ## Prompts for Implementation **Full-Screen Narrative Identity Experience:** The site opens to a full-viewport scene: the cool gray surface fills the screen entirely. For the first 800ms, nothing moves -- the surface simply exists, like a sleeping machine. At 800ms, the particle field begins to fade in (opacity 0 to target over 1.2 seconds, particles starting from random positions). At 1.6 seconds, a single neomorphic circle (120px diameter) emerges from the center of the surface via a convex shadow animation (shadows transition from `0 0 0 #b8bec7, 0 0 0 #ffffff` to their full offset values over 600ms with cubic-bezier(0.25, 0.46, 0.45, 0.94)). Inside the circle, a fingerprint line-art SVG begins its stroke-dasharray draw animation. At 2.4 seconds, the headline "YOUR IDENTITY, HELD WARMLY" fades up (translateY: 20px to 0, opacity 0 to 1, 500ms) in Barlow Condensed SemiBold at 4.2rem, positioned below the circle, each word on its own line. **Scroll-Triggered Section Reveals:** Each content section begins off-screen. As the user scrolls, an IntersectionObserver triggers at 15% visibility. The section's neomorphic panel animates in: first, the shadow appears (creating a "ghost" impression on the surface), then the panel body fades in 200ms later, then interior text staggers in line-by-line (40ms delay per element). The effect suggests the panel is being pressed out of the surface by something rising from underneath, like an embossed form emerging from a hydraulic press. **Neomorphic Button Interactions:** All buttons use the dual-shadow neomorphism system. Default state: convex (outer shadows). On mousedown: instant transition (80ms) to concave (inset shadows), simulating a physical press. On mouseup: spring back to convex (200ms, ease-out). Active/toggled buttons remain concave with the warm accent color (#e8946a) tinting their inset shadow (replacing #b8bec7 dark shadow with #d4836a at 30% opacity). Hover state: shadows deepen by 20% intensity and the panel lifts 2px (via shadow offset increase). **Particle Interaction Zones:** When scrolling past the "Trust" section (approximately 60% through the page), the particle system shifts behavior: particles begin to organize themselves into a loose grid formation over 3 seconds, then slowly dissolve back into random drift. This momentary order-from-chaos represents the verification process -- entropy resolving into structure, then releasing. **Photography Reveal Technique:** Each photograph is initially hidden behind a neomorphic inset panel (the same surface color). On scroll-trigger, the inset panel "fills" with the photograph using a circular clip-path expansion from center (clip-path: circle(0%) to circle(75%), 800ms, ease-out). The warm vignette overlay is applied as a ::after pseudo-element. **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids - Flat card layouts with drop shadows (use only neomorphic dual shadows) - Bright saturated colors anywhere in the interface - Hard edges, sharp corners (minimum border-radius: 16px on all elements) - Traditional navigation bars, hamburger menus, footer link walls - Stock photography with visible faces or corporate settings - Any animation faster than 150ms (everything should feel deliberate and weighted) ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **True Neomorphic Surface System (not decorative):** While neomorphism appears in only 2% of existing designs and is typically limited to a single button or card style, persopass.io commits to a complete neomorphic environment. Every element -- panels, buttons, inputs, image frames, navigation nodes, and even the background surface itself -- participates in a unified dual-shadow depth system. The entire page reads as a single continuous material with elements pressed into or extruded from its surface, creating genuine spatial hierarchy without relying on color differentiation or traditional elevation shadows. 2. **Warm-Cool Thermal Contrast as Brand Language:** The deliberate tension between the cool-gray polymer surface palette (#d1d9e6, #b8bec7, #c5ced9) and the warm peach-amber accents (#e8946a, #f0dcc8, #d4836a) creates a unique "technological warmth" that no other design in the portfolio achieves. Most designs choose either warm or cool; persopass.io uses both simultaneously as a metaphor for the brand promise -- technology that feels human. 3. **Particle Effects as Narrative Device:** The canvas-based particle field (2% motif frequency) is not decorative ambient motion. It is a narrative element that changes behavior at story beats: random drift during the introduction, cursor-reactive during interaction zones, grid-formation during the trust section, and dissolution during the closing. The particles represent identity data points -- individually meaningless, collectively forming patterns of recognition and verification. 4. **Photography as Biometric Specimen:** Rather than using photography for lifestyle imagery or product shots (the 72% standard), persopass.io treats every photograph as a biometric specimen -- macro fingerprint ridges, iris patterns, jawline profiles -- desaturated, cool-gray filtered, and presented inside circular neomorphic "porthole" frames with clip-path reveal animations. The imagery is intimate without being identifiable, scientific without being cold. 5. **Condensed Typography for Authority Without Aggression:** Barlow Condensed at generous letter-spacing (0.06em) creates a tall, narrow typographic voice that reads as authoritative and institutional (like airport signage or passport typography) while the tracking prevents it from feeling cramped or aggressive. Paired with DM Sans for body text, the typographic system bridges the gap between official documentation and friendly communication. **Chosen seed/style:** aesthetic: neomorphism, layout: layered-depth, typography: condensed, palette: cool-grays, patterns: scroll-triggered, imagery: photography, motifs: particle-effects, tone: warm-inviting **Avoided overused patterns from frequency analysis:** - Avoided playful aesthetic (95% frequency) -- chose neomorphism (2%) instead - Avoided centered layout as sole system (99%) -- used layered-depth (7%) with floating panels - Avoided mono typography dominance (99%) -- used condensed (19%) as primary with mono only for accent labels - Avoided warm-only palette (100%) -- used cool-grays (6%) with strategic warm accents - Avoided minimal imagery (94%) -- committed to photography as biometric specimens with intentional treatment - Avoided vintage motifs (86%) -- chose particle-effects (2%) as primary visual motif - Avoided friendly tone default (98%) -- chose warm-inviting (3%) with more specific emotional register