# Design Language for sarampass.com ## Aesthetics and Tone sarampass.com is a **frutiger-aero passport hall for human beings** — the name reads as *saram* (사람, "person", "people") + *pass*, and the entire site is staged as the arrivals concourse of an imaginary, gentle 2003-era civic terminal where the only thing you carry through the gate is the fact of being a person. The mood is the exact mood of the early-aughts operating system splash screen: a clear blue sky photographed at 9:40 a.m., a single bead of water magnified on a frosted plastic dashboard, grass blades catching sun, an Aqua-style button that looks like a sucked candy. It is **optimistic-bright** to the point of being almost naïve — this is deliberate. Where most "access" or "ID" or "pass" products lean cold-blue corporate-trust, sarampass leans into the lost emotional register of consumer tech right before flat design arrived: glossy, hopeful, slightly humid, faintly utopian. The tone is **friendly** and **approachable-casual** — a security checkpoint that smiles, a turnstile made of soap film. The visual thesis: a *pass* is not a barrier, it is a held breath of air. Everything on the page should feel like it has surface tension — convex, wet-looking, ready to wobble. Nothing is matte. Nothing is sharp. The page should look like you could press your thumb into it and leave a dimple that slowly fills back in. Inspirations to hold in mind: Windows XP "Bliss", the original Mac OS X Aqua scrollbar, Frutiger's own Astra/Avenir hopefulness, the iridescent inside of a freshwater shell, lens flares in a Sky+ advert, and the precise turquoise of a backlit airport departures board reflected in a wet floor. ## Layout Motifs and Structure The site is **immersive-scroll** built on a **layered-depth** stack — not a card grid, not a dashboard, not a bento box. It is a single continuous corridor you walk forward through, organised as **five "gates"** (`
`), total scroll length ~560vh desktop / ~700vh mobile. Each gate is a full-bleed sky-room with three parallax planes: a far plane (gradient sky + slow-drifting bokeh orbs), a mid plane (the glossy "pass" object for that gate, floating and gently bobbing on a sine path), and a near plane (frosted-glass caption ribbon, ~30% width, anchored low-left, never centered). The unifying geometric motif is the **stadium / turnstile arch**: every major shape is a `border-radius` so generous it becomes a lozenge or a full pill — buttons, the caption ribbons, the section dividers, even the nav. Sections are separated not by lines but by a **soft horizontal "air seam"**: a 1px white highlight above a 24px feathered shadow, like the join between two pieces of blown plastic. The grid underneath is a loose 8-column / 1320px field with 28px gutters, but it is honoured at maybe 70% — the floating pass-objects deliberately straddle the gutters and bleed past the margin so the layout always feels like it is *underwater*, swaying slightly off its own grid. Navigation: a single **pill of frosted glass** that floats top-center and shrinks (a `morph` from wide pill → small lozenge) on scroll, with three dot-links that ripple outward when hovered. No mega-menu, no footer wall of links — the page ends on a final pill that simply says "you may pass" and exhales a ring of bokeh. ## Typography and Palette **Type stack — Google Fonts only.** - **Hanken Grotesk** (variable, 100–900) — the primary **humanist** workhorse. Chosen over Inter/Helvetica because Hanken Grotesk has the soft, optimistic, slightly rounded terminals of early-2000s corporate humanist faces (it descends visually from the Frutiger/Myriad family that *defined* the frutiger-aero era) while still being a contemporary variable font. Used for the wordmark `sarampass` (weight 600, tight tracking, lowercase always), all gate headlines (clamp(2.6rem, 6vw, 5.4rem), weight 300 — thin and airy, like backlit signage glass), and body text (weight 400, 1.7 line-height). - **DM Mono** — the **mono** secondary, used *only* for the small "credential" microtext: the fake pass numbers, the timestamp, the "GATE 03 / SARAM-VERIFIED" labels stamped onto each floating object. Letterspaced +0.14em, uppercase, 0.72rem. This is the one place the page allows a hard, technical edge — and even there it sits inside a glossy bubble. - **Fraunces** (soft optical, light italic) — a single grace note: the closing line "you may pass" is set in Fraunces 24pt italic, the only serif on the entire site, to land the human warmth at the end. **Palette — wet sky, frosted plastic, and a single bead of water.** - `#EAF6FE` **Concourse Sky** — the dominant background tint, a near-white humid blue. ~46% pixel area. - `#9BD8F4` **Aqua Pane** — the mid-blue of the sky gradients and the glass pills' inner glow. - `#1E6FA8` **Departures Blue** — the deepest blue, used for headline text on light grounds and the bottom of every sky gradient. ~14% area. - `#C7F2D8` **Meadow Mint** — the soft grass-green that bleeds into the lower third of gate 3 and gate 5; the Frutiger-aero "nature half" of the diptych. - `#FFFFFF` **Surface Tension** — pure white, used exclusively as the 1px convex highlight on every glossy edge and the lens-flare cores. - `#F4A7C0` **Sucked Candy** — a single warm pink, the *only* warm accent, reserved for one bobbing pass-object (gate 4) and the hover state of nav dots, so the page has one heartbeat of warmth. - `#0C2A3E` **Night Terminal** — the near-black, used at ~3% only: the DM Mono microtext when it sits on a white bubble, and the thin shadow seams. ## Imagery and Motifs **Glassmorphic bubbles are the structural imagery** — but pushed past glassmorphism into full **inflated-3d** soap-bead territory. Every floating pass-object is a convex lozenge built from: `backdrop-filter: blur(20px) saturate(1.8)`, a top-down `linear-gradient(180deg, rgba(255,255,255,0.85), rgba(155,216,244,0.25))`, a sharp 1.5px inner-top white stroke that fades to nothing at the equator (the classic Aqua "gel" highlight), an `inset 0 -10px 20px rgba(30,111,168,0.25)` to fake the dark underbelly, and an outer `0 30px 70px rgba(30,111,168,0.22)`. They should look *liquid and pressurised*. Recurring motifs: - **Bokeh orbs** — soft out-of-focus light circles, blue and white, drifting upward at 0.05–0.2× scroll speed on the far plane. The frutiger-aero "lens flare in an advert" signature. - **The water bead** — a single hyper-magnified droplet appears on each gate's pass-object, refracting the headline text upside-down inside it (CSS: a small circle with `filter` + a `scaleY(-1)` clone of the text masked into it). It is the icon of the brand: a person passing through = light passing through water. - **Grass-blade fringe** — at gate 3 and 5 the bottom edge sprouts a thin silhouette of grass blades (inline SVG path, gently `path-draw-svg` on reveal then a slow `morph` sway), echoing "Bliss". - **Turnstile arches** — faint, large, low-opacity pill outlines (4px stroke, 8% Departures Blue) sitting behind each section like ghost gates you are walking through. - **NO photographs of people, NO ID-card mockups, NO badge/lanyard clipart, NO maps.** The "people" are implied by the negative space inside the arches — the gate is always empty and open, waiting. ## Prompts for Implementation Build sarampass.com as **one long HTML document** — no SPA, no router, no framework. A single scrolled corridor of five `
` elements. All animation in vanilla JS (one IntersectionObserver, one scroll handler with `requestAnimationFrame`, one `pointermove` listener) plus CSS. Bias hard toward a **full-screen narrative experience**: this is a walk-through, not a brochure. **Gate-by-gate:** 1. **Threshold.** On load: Concourse Sky fills, then a wide frosted-glass pill rises from the bottom and the wordmark `sarampass` types in via a soft `blur-focus` (each letter from `blur(12px) opacity 0` → crisp). Below it, one line of thin Hanken Grotesk: *"a pass made of air, for anyone shaped like a person."* A single large bokeh orb drifts up and pops (scale 1→1.4, opacity→0) as you start scrolling. The nav pill detaches and floats up. 2. **The Form of You.** A big convex lozenge floats in, bobbing on a sine path; inside it, the magnified water bead refracts the headline. DM Mono stamp: `SARAM-PASS / NO. 사람 / ISSUED ∞`. On `pointermove` the whole lozenge does a gentle **tilt-3d** (max 8deg) and the gel highlight slides to follow the light — it must feel like you are tipping a bubble in your palm. Caption ribbon slides up from low-left with a `spring` easing. 3. **The Open Gate.** The sky gradient warms toward Meadow Mint at the base; a grass-blade SVG fringe draws in along the bottom and begins a slow sway. A huge ghost turnstile-arch sits center; the camera (parallax) appears to pass *through* it as you scroll — the arch scales past 1.6× and the planes separate. Text: about the pass being a permission you already have. Two more bokeh orbs drift through the arch. 4. **One Warm Heartbeat.** Everything is cooler here except: the floating pass-object is Sucked Candy pink, glossy, bobbing slightly faster. The water bead inside it glows. This is the single moment of warmth — keep the rest of the palette strictly cool so this lands. A `ripple` emanates from the pink object once on reveal. 5. **You May Pass.** The corridor opens out: bokeh density increases, the grass fringe returns, the sky brightens to near-white. A final frosted pill rises center with, in Fraunces light italic, *"you may pass."* On reveal it exhales a slow expanding ring of bokeh (CSS keyframes: a `box-shadow` ring growing and fading). No button, no form, no CTA — the page just holds the door open and stops. **Global rules:** every interactive edge gets the 1px white convex highlight + soft drop shadow (the "blown plastic" join). All easings are soft/`spring`/`elastic` — nothing linear, nothing snappy. Respect `prefers-reduced-motion` by freezing the bobbing and parallax but keeping the static glossy look. AVOID: CTA-heavy layouts, pricing blocks, stat-grids, feature-card grids, testimonial walls, dashboards, hero-with-signup. There is exactly one piece of "UI" on the page (the nav pill); everything else is atmosphere. ## Uniqueness Notes Distinct departures from the registry and from the seed's defaults: 1. **Frutiger-aero used for an *access/identity* product, not a tech-startup or weather-app pastiche.** Frutiger-aero appears in only ~2% of registry designs and almost always as glossy SaaS or Y2K nostalgia; here it is bent to a "pass for people" concept where the gloss *means* something — surface tension = a held breath, refracted water = a person passing through light. The brand idea (saram + pass → light through water through an open gate) is load-bearing on the visual language, not decoration. 2. **A diptych palette of cool sky + meadow mint with exactly one pink heartbeat (#F4A7C0) — and zero photography of people, zero ID-card/badge/lanyard imagery.** The "people" exist only as the empty negative space inside ghost turnstile-arches. This rejects both the dominant `photography` (98% of registry) and the obvious "access product = badge mockups" cliché. 3. **Layout is a single walk-through corridor of five "gates" with three-plane parallax — not card-grid (92%), not centered (81%), not dashboard, not bento-box.** Stadium/pill geometry everywhere; sections joined by "air seams" instead of rules. 4. **Inflated-3d "Aqua gel" bubbles as the only floating UI**, with a `pointermove` tilt that slides the highlight like tipping a real bead — pushing past flat glassmorphism (83%) into convex, pressurised, wet 3D. Chosen seed/style: **frutiger aero glossy tech** (`frutiger-aero` aesthetic, `humanist` + `mono` typography, `immersive-scroll` + `layered-depth` layout, `optimistic-bright` / `friendly` tone, `glassmorphic-cards` → `inflated-3d` imagery). Avoided overused patterns from frequency analysis: hand-drawn (94%) and editorial aesthetics; card-grid / centered / dashboard layouts; photography / gradient-mesh imagery; warm-muted palettes; cursor-follow-as-default and typewriter-effect (typewriter used only once, as a soft blur-focus variant on the wordmark). Parallax is used but in service of a "walking through gates" narrative rather than generic decorative depth.