# Design Language for persopass.io ## Aesthetics and Tone persopass.io is a **skeuomorphic vault-and-passport object** — the site behaves like a real, hand-stitched leather passport wallet with a brass shackle clasp, sitting on a worn walnut desk under a banker's lamp. It is unapologetically a *thing you hold*, not a flat dashboard. The conceit: your identity ("perso") and your access ("pass") are physical artifacts — an embossed leather sleeve, a milled-aluminium key fob, a strip of brass that catches the light. The whole interface is rendered as if photographed at a slight raking angle, with real bevels, real cast shadows, real specular highlights crawling across machined metal. Skeuomorphism appears in only 4% of the archive and the literal "leather-texture" imagery in only 2% — this design leans all the way in rather than nodding at it. Where most security/identity sites reach for cold glassmorphism (81% of the corpus) or fintech-trust-blue gradients, persopass.io goes the opposite direction: it is **warm, weighted, and tactile** — the reassurance of a safe-deposit box you can feel the heft of, not a translucent panel. The tone is **grounded-earthy meeting quiet luxury**: the calm of a watchmaker's bench, the confidence of a brass combination lock that clicks home. Nothing flashes. Things *settle into place* with the satisfying gravity of well-made hardware. Mood references: the inside of a Hermès passport cover; a Zero Halliburton aluminium briefcase latch; a 1960s Sentry fire safe dial; the brushed-steel back of a mechanical watch; oxblood Horween leather under raking light; the brass nameplate on an old apothecary drawer. ## Layout Motifs and Structure The layout commits to **layered-depth** (10% of archive) — not parallax-as-decoration, but genuine *physical stacking*. The page is built as a literal stack of objects on a desk surface, viewed top-down-but-tilted (a subtle 6° X-axis perspective applied to a `transform-style: preserve-3d` stage). Each "section" is an object resting on the object below it, casting a real `box-shadow` onto its neighbour, with a 1–2px hairline of warm rim-light along its top edge. **The desk-stack system:** - **The Desk (background layer, z=0):** a full-bleed walnut surface — radial wood grain rendered with layered repeating-conic gradients + a fine noise overlay — lit warmly from upper-left by an off-canvas lamp (a soft elliptical highlight that drifts very slightly with cursor position, like the lamp swaying). - **The Passport Sleeve (z=1):** the primary content slab. An oxblood-leather rectangle with a debossed `persopass` wordmark (pressed *into* the leather: dark inner shadow + thin lower highlight = stamped-not-printed). Stitching runs the perimeter as a dashed stroke of waxed thread. Rounded 18px corners with a slightly darker burnished edge. - **The Key Fob (z=2):** a milled-aluminium cylinder/oval that floats just above the sleeve, holding the single most important action or the "open" gesture. Machined concentric ring texture on its face; a knurled band around its rim. - **The Brass Tab (z=3, topmost):** a thin polished-brass strip — a bookmark/index — that catches a moving specular streak. There is **no card-grid** (91% of corpus), **no hero-with-CTA-stack**, **no stat columns**, **no pricing tables**. Content is sequenced as *opening the wallet*: cover → inner pocket → folded card → engraved plate. Scrolling is a slow, weighted "page lift" — each spread lifts at a corner and settles. The grid beneath it all is an 8px baseline with a forgiving 12-column frame, but columns are routinely ignored in favour of object placement (a fob sitting 1/3 across, a tab bleeding off the right edge by 40px). Navigation, if present, is a row of **embossed leather tabs** along the spine of the wallet — vertical, like the divider tabs in a binder. ## Typography and Palette **Typefaces — Google Fonts only:** - **Zilla Slab** (400/500/600/700) — the primary display + headline face. A warm, sturdy slab serif with squared-off feet that read like *stamped metal type* or the embossing wheel on a label maker. Used for the wordmark, section titles, and any text meant to feel pressed into a surface. Tracking tightened slightly (-0.01em) at large sizes. - **Spectral** (400/500 + 400 italic) — body and longform. A quietly luxurious serif with low contrast and a bookish, document-like authority — the typeface of a legal folio or a watch certificate. Comfortable at 17–19px with generous 1.65 line-height. - **Spline Sans Mono** (400/500) — the "engraved data" face. Used exclusively for anything that simulates milled/etched text on metal: serial numbers, the key-fob face label, fingerprint hex strings, version stamps. Letterspaced +0.06em like laser-engraving. Three faces, three jobs, no drift. (The corpus is 94% generic "mono"; here mono is *reserved* for the engraved-metal conceit only — it is a material, not a default.) **Palette — navy-metallic meets oxblood leather (a deliberately uncommon pairing):** - `#1B2A3A` — **Abyssal Navy.** The deepest shadow, the inside of the wallet, primary text on light surfaces. - `#2E4257` — **Steel Navy.** Mid-tone metal body, the desk's darkest grain valleys. - `#7E1C28` — **Oxblood.** The leather sleeve — rich, slightly desaturated cordovan red. - `#5A1219` — **Burnished Oxblood.** Leather edges, debossed valleys, hover-darkened state. - `#C8A24A` — **Aged Brass.** The brass tab, the clasp, debossed-text highlight, links. - `#E9C97C` — **Brass Specular.** The moving highlight streak on metal; never a fill, only a glint. - `#B7BDC4` — **Brushed Aluminium.** The key-fob face, machined-ring texture base. - `#3A2A1E` — **Walnut.** The desk surface base tone. - `#F4EEE2` — **Bone Card.** The off-white of an inner index card / certificate paper — the lightest surface, used sparingly for readable blocks. Overall: warm-dark, candlelit, metallic. High *material* contrast (matte leather vs. polished brass vs. brushed aluminium) rather than high *colour* contrast. ## Imagery and Motifs **Primary imagery: leather-texture + brushed-metal — generated, not photographic. Zero stock photos.** Every surface is a *material*, built in CSS/SVG: - **Leather grain:** layered fractal-noise SVG filter (`feTurbulence` baseFrequency ~0.9, multiple octaves) tinted oxblood, with a soft inner emboss (inset shadow top, inset highlight bottom) and a perimeter dashed-stitch stroke. A faint, irregular "scuff" highlight near corners suggests use. - **Brushed aluminium:** very fine horizontal repeating-linear-gradient (1px alternating `#B7BDC4`/`#C2C7CD`) over a broad vertical light falloff; concentric milled rings on circular elements drawn as repeating-radial-gradient. - **Polished brass:** a smooth vertical gradient `#C8A24A → #E9C97C → #9A7A33` with a single bright diagonal specular band that *animates* across on scroll/hover. - **Walnut desk:** stacked repeating-conic + repeating-linear gradients in walnut tones, plus a 2–3% noise overlay; soft circular lamp-glow that tracks the cursor. **The hardware inventory (a small custom on-domain SVG set):** A brass shackle/padlock clasp · a knurled key fob · a milled combination dial with engraved tick marks · waxed-thread stitching · a debossing/embossing wheel · an apothecary-drawer brass pull · a wax seal · a fingerprint rendered as fine engraved contour lines · a key blade silhouette · a leather corner-protector triangle. **Recurring motif: marble-classical / engraved authority (4% of archive).** Section dividers are thin engraved rules — a hairline navy line with a 1px brass highlight beneath, like a line scored into a brass plate. Numerals (steps, indices) are set as if struck with a steel punch: Zilla Slab, debossed treatment, slight rotation jitter (±1.5°) so they look hand-stamped one at a time. ## Prompts for Implementation Build persopass.io as a **single static HTML document** — no SPA, no router, no build step. HTML + CSS + one small (~6–8KB) vanilla JS module. Preconnect to Google Fonts and load Zilla Slab, Spectral, and Spline Sans Mono in one `display=swap` request. **The narrative spine — the visitor opens a wallet:** Structure the page as a slow, deliberate *unboxing of an identity object*, in four movements: 1. **The Closed Wallet (above the fold).** The oxblood leather sleeve lies on the walnut desk, clasp shut, lamp glowing warm from the upper-left. The debossed `persopass` wordmark catches a faint brass highlight. A single quiet line of Spectral italic invites the visitor in ("everything that proves you're you — in one place that feels like a place"). On first scroll or click, the **brass clasp rotates open** (spring/elastic motion, ~600ms, a soft "settle" overshoot) and the cover lifts at the corner. 2. **The Inner Pocket.** The cover folds back (a real `rotateY` page-lift with `transform-origin` on the spine, the underside of the leather visible and darker). Inside: a bone-coloured index card explaining what persopass holds — written as engraved text fading in line by line with a faint **path-draw** on the underline rules, as if scored by a stylus. Stagger ~80ms per line. 3. **The Key Fob.** A brushed-aluminium fob lifts off the card and floats forward, its specular ring-highlight rotating slowly. This is where the core idea lives — the "pass" half. On hover/tilt, the fob does a genuine **tilt-3d** following the cursor (max ±10°), the milled rings catching light realistically; a faint engraved serial string in Spline Sans Mono sits on its face. 4. **The Engraved Plate.** The final movement: a polished-brass plate slides up from the bottom of the stack, a bright specular band sweeping across it once, with a closing line stamped into it. The wallet closes again behind it — clasp clicking shut — as the visitor reaches the end. **Motion principles:** everything has *weight and friction*. Use spring physics with slight overshoot for clasps and lifting covers; never linear, never bouncy-cartoonish. The lamp-glow drifts with the cursor at ~0.15 lerp (lazy, like a hanging lamp). Specular highlights on brass/aluminium move on scroll progress, not on a loop. Respect `prefers-reduced-motion`: collapse all 3D lifts to gentle opacity/translate fades, freeze the specular sweeps to a static glint, keep the clasp open by default. **Texture is non-negotiable:** if any surface looks flat, it's wrong. Every panel needs at minimum an inner bevel (light edge + shadow edge) and a cast shadow onto the layer beneath. Grain/noise overlays at 2–6% opacity on leather, walnut, and bone surfaces. **AVOID:** CTA-stacked heroes, pricing tiers, feature-card grids, stat counters, testimonial carousels, glassmorphic blur panels, cold gradient meshes, generic security-shield-and-lock-icon clip art. This is a *workshop object*, not a SaaS landing page. ## Uniqueness Notes Differentiators from the rest of the archive: 1. **Full-commitment skeuomorphism (4% of archive).** Not "neumorphism-lite" — actual rendered bevels, cast shadows, specular highlights, and material textures (leather/brass/aluminium/walnut). Most of the corpus is glassmorphism (81%) or flat; this is the opposite pole. 2. **Leather-texture + navy-metallic + oxblood palette (each ~2% of archive), and no photography (the corpus is 98% photography).** A warm, candlelit, hardware-store palette for an identity/security product, where the genre default is cold trust-blue glass. 3. **Layered-depth "desk-stack" layout (10%), used literally.** Sections are physical objects stacking on a tilted desk and casting shadows on each other — not a vertical scroll of full-bleed bands (89%) and not a card-grid (91%). 4. **Mono typography reserved as a *material* ("engraved metal"), not a default.** While 94% of the archive uses mono generically, here Spline Sans Mono only ever appears as laser-etched text on metal surfaces — a deliberate, narrow role. 5. **Narrative = "opening a wallet" in four physical movements** (closed wallet → inner pocket → key fob → engraved plate), with the wallet closing again at the end — a guided unboxing, not a marketing scroll. 6. **Hand-stamped numerals and engraved-rule dividers** (marble-classical / engraved-authority motif, 4%): step numbers struck with jittered rotation, dividers as hairlines scored into brass. Avoided patterns from frequency analysis: glassmorphism (81%), hand-drawn aesthetic (96%), photography imagery (98%), card-grid (91%), full-bleed band stacks (89%), warm-gradient palettes (95% gradient / 98% warm-as-pastel), generic mono default (94%), cursor-follow-as-decoration and parallax-as-decoration (89–91%) — repurposed here only as physical lamp-sway and material specular response. Chosen seed/style (fallback — no seed supplied in assignment): `aesthetic: skeuomorphic, layout: layered-depth, typography: slab-serif, palette: navy-metallic, patterns: tilt-3d, imagery: leather-texture, motifs: marble-classical, tone: grounded-earthy`.