# Design Language for persopass.io ## Aesthetics and Tone The domain **persopass.io** fuses *persona* and *pass* — a credential that is also a costume, an access token that is also a character. The site inhabits a precise visual territory: **fairycore filtered through a retro-futuristic lens**. This is not the saccharine pastel fairycore of mood boards and mood rings. This is the fairycore of a far-future civilization that still believes in stars, wings, and wishing — a people who etch constellations into chrome, who wear moonbeam filaments like lanyards, whose identity cards shimmer with iridescent dust and embedded celestial coordinates. The mood is **optimistic-bright** without being saccharine. Brightness here comes from internal luminance — colors that glow as if lit from behind — not from washing everything in white. The palette lives in the register of neon fuchsia against deep violet, chrome-silver catching starlight, electric lavender over near-black. Think: a late-1970s science fiction paperback illustration — Frank Kelly Freas, Angus McKie — but redrawn by a contemporary illustrator raised on Studio Ghibli and Y2K iridescent stickers. The conceptual fiction the site tells: every visitor is collecting a **PersoPass** — a shimmering personal credential that encodes not their legal name but their *truest self*. The page is a celestial issuing office, staffed by no one visible, where the machinery of starlight and geometry quietly prints your pass while you wait. Tone markers: - Whimsical but not childish - Futuristic but warm — chrome has a heartbeat - Declarative and confident — short sentences, no hedging - Every element earns its place by contributing to the "collecting your pass" fiction ## Layout Motifs and Structure The layout is **modular-blocks** but interpreted as a **star chart sectioned into zones** rather than a conventional card grid. Each block is a distinct celestial region — a constellation, a nebula field, a stargate perimeter — bounded not by hairline box borders but by faint dotted arc-paths, like the curved sector lines on a planisphere. **Macro structure (top to bottom):** 1. **Starfield Hero Zone** — Full-viewport hero. The background is an animated deep-space field: ~300 tiny star-dots at varying opacities, a few larger six-pointed star bursts (SVG), all on a near-black violet ground. Centered in this: the wordmark `PERSOPASS` set in Bebas Neue at 18vw, letter-spaced +0.12em, rendered in a chrome-to-fuchsia horizontal gradient that shifts on scroll. Directly below, a subtitle in `Space Grotesk` 400: *"Your truest self, credentialed."* 2. **Pass Preview Block** — A single oversized card (90vw max, 540px tall, perspective-tilted 8° around the Y-axis) representing a sample PersoPass. The card surface has: a holographic shimmer background (CSS conic-gradient cycling), an embedded star-burst icon, a name field masked in glowing placeholder text, a constellation diagram, and a six-digit access code set in `Space Mono`. The card floats on a faint radial glow. On hover, the tilt reverses and the shimmer cycle accelerates. 3. **How It Works — Three Constellation Blocks** — Three equal-width modular blocks arranged in a horizontal row on wide screens, stacking vertically on mobile. Each block is bounded by a dashed arc-path (top and bottom), contains a large hand-drawn star-icon (SVG, 80px), a heading in Bebas Neue, and 2–3 sentences in Space Grotesk. The three blocks represent: *Choose Your Persona*, *Encode Your Star*, *Claim Your Pass*. 4. **Celestial Lore Strip** — A full-width horizontal band in the mid-palette (deep violet, #2D0057), containing a continuous horizontal ticker of celestial glyphs (✦ ✧ ⋆ ★ ✺ ✼), decorative separator stars, and short lore fragments: *"Every pass expires at the next solstice."* / *"Stars have always known your name."* Ticker scrolls infinitely leftward using CSS animation. 5. **Identity Mirror Block** — A centered tall block, ~600px, containing an animated SVG mirror-frame decorated with star-and-vine motifs. Inside the mirror: a shifting CSS `mix-blend-mode: screen` overlay that makes any background appear on the visitor's own context (achieved via a generative gradient that samples scroll position). Below the mirror: *"What do you see?"* in Bebas Neue, then a single glowing input field for the visitor to type a persona name. 6. **Claim Block** — A dark block (near-black, #0A0010) with a single centered CTA cluster: the `CLAIM YOUR PASS` text in Bebas Neue at 6rem, a shimmer-underline drawn via CSS animation (the underline-draw pattern: a line that traces itself left-to-right on scroll entry), and below that a `Space Grotesk` caption: *"No login required. No data stored. Just your star."* 7. **Footer Star Chart** — A footer with a full-width decorative planisphere arc (SVG), the domain name in small-caps Space Grotesk, and a row of celestial glyphs as social/link separators. **Spatial philosophy:** Blocks never touch — each floats on 80px of starfield breathing room. The background is globally consistent (the animated starfield runs behind all blocks, with each block floating above it at varying `backdrop-filter: blur(2px)` intensities). The page does not feel like a document; it feels like a slow descent through an observatory. ## Typography and Palette ### Fonts (all Google Fonts, verified) - **Display / Hero Headlines:** [`Bebas Neue`](https://fonts.google.com/specimen/Bebas+Neue) — condensed, bold, all-caps. Set at 18vw for the wordmark, 6rem for section heads, 4rem for block heads. Letter-spacing: +0.08em to +0.14em. Used exclusively for declarative, statement-level text. The condensed geometry reads as futuristic while the bold weight prevents it from feeling cold. - **Body / UI Text:** [`Space Grotesk`](https://fonts.google.com/specimen/Space+Grotesk) — weight 300 for flowing copy, weight 500 for labels. Space Grotesk carries subtle geometric quirks (the double-storey 'a', the angled terminals) that reinforce the retro-futuristic register without sliding into parody. Line-height 1.65 for body, 1.2 for UI labels. - **Monospace / Pass Codes / Coordinates:** [`Space Mono`](https://fonts.google.com/specimen/Space+Mono) — weight 400 only. Used sparingly: the six-digit pass code on the card, celestial coordinates in the footer, the input field placeholder text. The monospace rhythm suggests terminal readouts and machine-issued credentials. - **Decorative Accent (section intros only):** [`Cinzel`](https://fonts.google.com/specimen/Cinzel) — weight 400, small-caps, tracked to +0.3em. Used for short, ceremonial labels like `ISSUING AUTHORITY` or `CELESTIAL REGISTRY`. Maximum 3 occurrences. Cinzel's Roman engraving heritage maps precisely onto the idea of credentials stamped with official weight. ### Palette | Role | Name | Hex | |------|------|-----| | Background void | Deep Space Black | `#08000F` | | Primary surface | Midnight Violet | `#130022` | | Block surfaces | Dark Nebula | `#1E0038` | | Accent band | Pulsar Violet | `#2D0057` | | Primary text | Star White | `#F0EBF8` | | Secondary text | Dust Lavender | `#B8A8D0` | | Display gradient start | Chrome Silver | `#D4D0E8` | | Display gradient end | Fuchsia Burst | `#FF2DA8` | | Glow accent | Electric Lavender | `#C44EFF` | | Star punctuation | Neon Cyan | `#00F5E4` | | Pass card shimmer A | Iridescent Pink | `#FF85C8` | | Pass card shimmer B | Holographic Blue | `#85D4FF` | | Underline-draw ink | Fuchsia Burst | `#FF2DA8` | | Input glow | Electric Lavender | `#C44EFF` | **Color logic:** The page lives in near-black. Color is additive — it glows *out of* the dark rather than sitting on a colored surface. Every block surface uses `background: rgba(30, 0, 56, 0.72)` over the starfield, giving the sense of smoked glass hovering in space. The fuchsia-to-chrome gradient on display text is the page's central chromatic statement: it evokes chrome catching a neon sign, or a badge under ultraviolet light. ## Imagery and Motifs ### Motif System: Star-Celestial All imagery is **icon-heavy SVG** — no photography, no raster art. Every visual element is a precision-drawn icon or glyph, constructed from strokes only (no fills except glass-effect surfaces). The icon vocabulary draws from: **Primary icons (appear multiple times, each site-unique SVG):** - **Six-pointed star burst** — The site's master glyph. Not the cliché five-pointed star. A six-pointed geometry with long primary rays and short secondary rays, constructed as a single `` rotated into a snowflake. Appears: hero background (×8, varying sizes 12px–80px), pass card center, section headings as prefix glyphs. - **Planisphere arc** — A partial circle with degree tick-marks, like the outer ring of an astrolabe. Used in the footer and as block separators. - **Constellation connect-dot** — Three dots connected by a thin line, styled as a minimal three-star constellation. Each "How It Works" block has a unique constellation: Orion's Belt, The Pleiades, Cassiopeia (W-form). Drawn as `` + `` SVG, stroke only. - **Pass card ornament** — A pair of angular wing-forms flanking the star burst on the PersoPass card. Thin stroke, 1.5px, no fill. The wings are **not** symmetric — one wing has an extra feather-ray, suggesting uniqueness, personhood. - **Celestial glyph set** — Seven custom glyphs used as text-level ornaments: ✦ ✧ ⋆ ★ ✺ ✼ ✿ (Unicode but styled via CSS `font-size`, `color: var(--neon-cyan)`, `text-shadow`). ### Patterns: Underline-Draw The **underline-draw** pattern is used systematically as an entry animation: - Section headings in Bebas Neue receive a `::after` pseudo-element: a 2px line in `#FF2DA8`, `width: 0`, transitioning to `width: 100%` on `IntersectionObserver` entry, `transition-duration: 0.7s`, `transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1)`. The line draws left-to-right as each section scrolls into view. - The `CLAIM YOUR PASS` CTA block gets a double underline-draw: first a cyan line at 0.3s delay, then a fuchsia line at 0.6s, creating a two-color shimmer-swipe. - The pass code on the PersoPass card draws its underline only on card-hover, giving a "verification scan" reading. ### The PersoPass Card The centrepiece artifact. CSS-only implementation (no canvas, no WebGL): - `background: conic-gradient(from var(--angle), #FF85C8, #85D4FF, #C44EFF, #FF2DA8, #FF85C8)` — the `--angle` property is animated via `@property` registration, creating a smooth hue-cycle. - Glassmorphism overlay: `background: rgba(8, 0, 15, 0.55); backdrop-filter: blur(8px)` sits on top of the conic gradient, letting the shimmer bleed through. - CSS `perspective: 800px` and `transform: rotateY(8deg) rotateX(-4deg)` on load; `transform: rotateY(-8deg) rotateX(4deg)` on hover; `transition: 0.4s ease`. - Drop shadow: `box-shadow: 0 0 60px rgba(196, 78, 255, 0.45), 0 0 120px rgba(255, 45, 168, 0.2)`. ### Animated Starfield The full-page background starfield is a `` element behind all content, `z-index: -1`, `position: fixed`. Implementation: - ~300 points, each with random `(x, y)` and a twinkle phase offset. Each star's `alpha` oscillates: `alpha = 0.3 + 0.7 * (0.5 + 0.5 * sin(time * speed + phase))`. - ~12 "featured" stars are 4–8px with a six-pointed SVG shape (cloned from a hidden ``), placed at fixed viewport coordinates for visual weight. - Scroll position adds a subtle parallax: starfield translates at 0.2× scroll speed. ## Prompts for Implementation **The narrative.** A visitor opens the site as if entering a celestial issuing bureau that exists slightly outside time — somewhere between a 1970s science fiction colony administration office and a future-age digital grove. The machinery is beautiful, unhurried, star-driven. The visitor is not a customer; they are a **registrant of selfhood**, waiting for their pass to be printed by light. Every scroll event advances the ceremony. The page does not sell anything in any conventional sense; it confers something. **Interaction directions:** - All section entries are triggered by `IntersectionObserver` with `threshold: 0.15`. Entries use `opacity: 0 → 1` plus `transform: translateY(24px) → translateY(0)`, `duration: 0.6s`, `ease: cubic-bezier(0.16, 1, 0.3, 1)`. No page-load animations except the hero wordmark (which fades in over 1.2s with a slight upward drift). - The hero wordmark gradient shifts on scroll: `background-position` moves from `0% 50%` to `100% 50%` as the visitor scrolls the first viewport, giving the chrome-to-fuchsia gradient a living feel. - The celestial ticker in the lore strip uses `@keyframes ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }` at `animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite`. Pauses on `hover`. - The PersoPass card tilt is implemented with `mousemove` event on the card's containing block: `rotateX` and `rotateY` respond to cursor offset within the card bounds, clamped to ±12°. - The underline-draw on all headings fires once (the `IntersectionObserver` fires once and adds a class, never reverses). - The mirror block's generative gradient uses `--scroll-y` CSS custom property updated on scroll: `background: radial-gradient(ellipse at calc(50% + var(--scroll-y) * 0.03px) 50%, #C44EFF22, transparent 70%)`. The gradient center drifts slightly as the visitor scrolls, making the mirror appear to breathe. **What NOT to build:** - No navigation bar (hero wordmark is the only persistent identity element) - No pricing section, no feature comparison table, no stat grid - No testimonials, no social proof logos - No hamburger menu, no sticky header - No hero CTA button above the fold — the pass card IS the first CTA, and it speaks for itself - No stock photography, no raster hero images - No loading spinner — the starfield is immediate (canvas renders in < 1 frame) - No cookie banner, no chat widget, no newsletter pop-up **Typography micro-rules for implementation:** - Bebas Neue headlines: always uppercase (CSS `text-transform: uppercase` as failsafe), always letter-spaced, never italic - Space Grotesk body: `font-feature-settings: "ss01" 1` (enables the alternate single-storey 'a') if supported - Space Mono codes: no letter-spacing override (the natural monospace rhythm is intentional) - Cinzel labels: `font-variant: small-caps; letter-spacing: 0.3em; text-transform: uppercase` **Animation timing global rule:** `prefers-reduced-motion: reduce` → all `transition-duration` and `animation-duration` become `0.001ms`. The starfield canvas animation loop stops (canvas frozen at first frame). The underline-draws apply instantly. The card tilt disables. ## Uniqueness Notes 1. **Fairycore aesthetic with retro-futuristic palette is unprecedented in the registry.** The frequency report shows `fairycore` at ~1% and `retro-futuristic` as a vocabulary term that has not been paired with fairycore. The usual fairycore execution uses pastels, cottagecore flora, and soft serifs. This design inverts that — fairycore *through* chromeplated neon, star glyphs as hard geometry, Bebas Neue condensed instead of a flowing serif. The result is fairycore for people who also love cyberpunk but refuse to abandon wonder. 2. **The PersoPass card as the page's primary immersive artifact.** The reference designs use hero copy, illustration plates, and IP-display modules as their central artifacts. This design uses a CSS-only holographic credential card with tilt, shimmer cycle, and verification-scan underline as the sole focal object. The entire page narrative orbits this artifact. No other design in the registry uses a physical credential card as the storytelling centerpiece. 3. **Modular-blocks layout interpreted as a planisphere star chart — not a feature grid.** The frequency report shows modular blocks used conventionally (feature grids, pricing rows, card stacks). Here, each block is a distinct celestial zone bounded by arc-paths, floating above a continuous animated starfield with glassmorphic surfaces. The grid system is replaced by orbital spacing. This is modular layout re-semanticized as cosmography. 4. **Underline-draw pattern applied as a multi-layered "verification scan" metaphor.** The pattern appears in the registry as simple decorative underlines. This design systematizes it: every section head draws on scroll entry, the CTA draws a two-color double-underline (cyan then fuchsia at staggered delays), and the pass card's code draws on hover as if being verified. The pattern is tied to the page's credential-verification fiction rather than used as ornament. 5. **Bebas Neue at display scale in a fairycore-aesthetic context.** Fairycore typography in the registry and in general web practice leans toward light serifs, flowing scripts, and rounded sans. Using Bebas Neue — condensed, bold, architecturally severe — inside a fairycore palette creates a productive tension: the letters are chrome girders strung with fairy lights. This pairing has not appeared in the analyzed corpus. **Chosen seed:** aesthetic: fairycore, layout: modular-blocks, typography: bebas-bold, palette: retro-futuristic, patterns: underline-draw, imagery: icon-heavy, motifs: star-celestial, tone: optimistic-bright **Avoided patterns (overused per frequency analysis):** - `eclectic-hybrid` (6% — most overused aesthetic category) - `playful-rounded` (6% — most overused typography) - `tech-mono` (6% — most overused typography) - `grotesque-neo` (6% — most overused typography) - `oversized-display` (6% — avoided as a standalone pattern; display scale is earned here by the fairycore context, not used generically) - Photography (85% of corpus — entirely absent here) - CTA-above-fold hero pattern (dominant in corpus — replaced by the pass card artifact)