# Design Language for glolos.com ## Aesthetics and Tone **glolos.com** is a portmanteau that doesn't resolve — it hovers between "glow" and "gloss" and the rolling repetition of its syllables (`glo-los`) suggests something liquid, something iridescent, something that moves when you tilt the glass. The site inhabits the visual space where **street-style photography** bleeds into **deep-ocean bioluminescence** — the collision of a garment rail on a midnight pier, neon bleaching into black saltwater, the slick of a wet cobblestone reflecting a fluorescent sign from above. The tone is **dreamy-ethereal**. Not soft in the way of a pastel editorial — soft in the way of looking at a neon-lit puddle after rain. Colors are heavy and supersaturated underwater hues: abyssal indigo, bioluminescent teal, ink-black, tide-foam white, and one rupture of hot coral (the tropical-fish accent). Everything is wrapped in **glassmorphism** — layered translucent panels that catch the depth behind them, as if each content card were pressed under thick sea glass. Street-style specificity anchors the dreaminess. The typography is **eclectic-hybrid**: a condensed street-poster gothic sits beside a refined italic serif, the same way a vintage deadstock tee sits beside a hand-sewn silk liner. The reading experience should feel like flipping through a fashion zine that was left on the bottom of a tide pool. Mood references: Helmut Newton underwater sessions; Comme des Garçons 2015 SS lookbook scanned through aquarium glass; a bioluminescent bay at 2am photographed with an expired film roll. ## Layout Motifs and Structure The page uses the **F-pattern** not as a corporate eye-tracking compliance decision but as a deliberate editorial tool — the way a fashion magazine lays down its opening spread. The F reads: a full-width horizontal hero band (the top bar of the F); a second horizontal anchor section below it (the middle bar); then a vertical descender column of staggered cards dropping left-to-right. **Stagger is the active pattern inside the F.** - The hero band (`100vw × 90vh`) is split: 62% left is a glassmorphic card containing a single large editorial headline over a blurred bioluminescent ocean photograph; 38% right is a deep-indigo void with three tropical-fish SVGs drifting at different depths using parallax. - The second horizontal band (`100vw × 50vh`) is a scrolling ticker-rail of oversized street-style keywords (`DEEP / CURRENT / DRIFT / GLOW / PELAGIC`) in condensed gothic, each word staggered 2–3rem vertically, overlapping its neighbor by 20%. - Below, the F's descender is a **stagger grid**: three columns, each column offset vertically by `clamp(2rem, 5vw, 8rem)` from the previous. Cards are not the same height. The first card in each column always sits lower than the last card in the column before it, creating a deliberate descending staircase that mirrors the reading gravity of the F. - No card is flush with any other card horizontally. Every card breathes inside a `gap` that widens from `1.5rem` at the top of the grid to `3rem` at the bottom, as if the ocean pressure is separating them as they sink. - Negative space is structural. The void between the hero and the ticker rail is `8vh` of deep indigo — not padding, but a deliberate depth-of-water gap. The page never rushes. Grid: `display: grid; grid-template-columns: repeat(3, 1fr)`. All stagger offsets applied via `transform: translateY()` on individual grid children, not via margin, so the surrounding flow is preserved for the F-pattern logic. ## Typography and Palette **Three typefaces. All from Google Fonts. All in deliberate tension.** - **Display / Street Gothic — [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue)**: Used for the hero headline, ticker keywords, and any large-scale editorial label. Set at `clamp(4rem, 12vw, 11rem)`, tracking `0.04em`. This is the street-poster voice — condensed, aggressive, built for a flyposted wall in a port city at midnight. In the ticker it runs at `8rem` and stacks with `line-height: 0.85` so letters crowd each other like fish in a shoal. - **Body / Refined Italic — [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond)**: Italic weight 500, used for card descriptive text, pull-quotes, and any narrative caption. Set at `clamp(1rem, 1.6vw, 1.25rem)`, tracking `-0.01em`. The contrast with Bebas Neue is exactly the eclectic-hybrid tension: the condensed gothic shouts from the wall; the italic serif whispers from the index card pinned below it. - **Accent / Interface — [DM Sans](https://fonts.google.com/specimen/DM+Sans)**: Weight 400 and 600, used for navigation labels, metadata, and any interactive micro-text. Set at `0.75rem`–`0.9rem` with `letter-spacing: 0.08em` and uppercase. DM Sans is the marine chart voice — measured, precise, professional, the waterproof label on a specimen jar. **Palette — ocean-deep with one bioluminescent rupture.** | Role | Name | Hex | |---|---|---| | Background / Abyss | Midnight Pelagic | `#050D1A` | | Primary Surface | Abyssal Indigo | `#0A1628` | | Card Glass | Deep Teal | `#0D2E3F` | | Primary Text | Tide Foam | `#E8F4F8` | | Secondary Text | Saltwater Wash | `#7EB8CC` | | Accent 1 | Bioluminescent Cyan | `#00E5CC` | | Accent 2 / Tropical Rupture | Coral Anemone | `#FF4E6A` | | Accent 3 | Kelp Amber | `#C4872A` | Glass layers use `background: rgba(13, 46, 63, 0.45)` with `backdrop-filter: blur(18px) saturate(160%)` and a `1px solid rgba(0, 229, 204, 0.18)` border. The inner edge glow is a `box-shadow: inset 0 1px 0 rgba(0, 229, 204, 0.3), 0 8px 48px rgba(0, 0, 0, 0.6)`. ## Imagery and Motifs **Imagery is built on glassmorphic cards and animated SVG tropical fish. No stock photography cutouts. No icons-as-icons.** **Glassmorphic Cards (signature imagery):** Every content unit is wrapped in a glassmorphic card panel. The background behind the glass is always a blurred, desaturated representation of deep ocean — either a `radial-gradient` that pulses from teal to abyssal indigo, or a CSS-animated fluid gradient that simulates bioluminescent plankton (three slow-moving radial blobs at `opacity: 0.4`, animated with `@keyframes` drift cycles of 14s, 19s, and 23s respectively — prime numbers prevent synchronization). The glass sits over this, intercepting light. Cards have `border-radius: 16px` and a subtle `transform: rotate()` between `-0.8deg` and `+1.2deg` — a street-style tilt, as if pinned to a board at a slight angle. **Tropical Fish (SVG motifs):** Six SVG fish scattered across the page at fixed positions with `position: absolute` and low `z-index` (they sit behind glassmorphic cards, ahead of the background). Each fish is a simplified geometric outline — two Bézier curves forming a fusiform body, a split triangle tail, and a single eye circle. Fish are between `60px` and `180px` wide. Three are in `--bioluminescent-cyan`, two in `--coral-anemone`, one in `--kelp-amber`. Each fish uses a CSS animation: a slow horizontal drift of `±40px` over 8s–14s with `ease-in-out`, combined with a vertical oscillation of `±10px` over a slightly different period (Lissajous drift). Fish in the hero void are the largest; fish that appear between cards in the descender column are smaller, as if sinking into depth. On scroll, fish drift subtly in the opposite direction via a CSS custom-property updated by a passive IntersectionObserver — no heavy scroll listener. **Hero Background:** A single `` element renders a procedural bioluminescent plankton field: 200 points, each a circle of radius 1–4px, filled with `--bioluminescent-cyan` at `opacity: 0.06–0.35`. Points drift in slow Brownian motion. The canvas sits at `z-index: 0` behind everything, always `100vw × 100vh` with `position: fixed`. It creates the impression that the entire page floats inside a dark ocean. **Ticker Decoration:** The horizontal street-style ticker rail has a repeating SVG wave pattern as its border-bottom — a sine curve in `--bioluminescent-cyan` at `opacity: 0.25`, `stroke-width: 1.5`, the wave period matching the card column width. ## Prompts for Implementation Treat glolos.com as **a single-page scroll through a bioluminescent night market at the ocean floor** — part street market, part deep-sea dive, all dreamy. The visitor descends. The hero is the surface: bright coral, heavy street lettering, the first fish visible through the glass. The ticker is the thermocline: a rush of movement and text that signals the transition from air to water. The card grid below is the deep: slower, darker, more ethereal, fish smaller and further apart, glass panels refracting less light. **Opening sequence:** On load, the canvas fades in first (`opacity: 0 → 1`, `duration: 1.2s`, `ease-out`). Then the hero glass card scales up from `0.92` to `1` and fades from `opacity: 0` to `opacity: 1` (`duration: 0.8s`, `delay: 0.4s`). Then the fish in the hero void swim in from the right edge (`translateX(120px) → translateX(0)`, staggered `0.15s` apart). The ticker rail slides in from the left (`translateX(-100%) → translateX(0)`, `duration: 0.6s`). The card grid below loads on IntersectionObserver: cards cascade in from `opacity: 0, translateY(24px)` to their resting state, with a `0.1s` stagger between columns. **Stagger implementation:** Column 1 of the card grid starts at `translateY(0)`. Column 2 starts at `translateY(clamp(3rem, 6vw, 8rem))`. Column 3 starts at `translateY(clamp(6rem, 10vw, 14rem))`. These are applied in CSS via `:nth-child` selectors on the grid children, not via JavaScript. The visual rhythm is: left column anchors the eye at the top of the F's descender; middle column drops the gaze; right column drops further, pulling the eye into a diagonal waterfall. **Glass card hover:** On hover, `backdrop-filter` blur increases from `18px` to `22px`, the border glow (`--bioluminescent-cyan` opacity) increases from `0.18` to `0.45`, and the card lifts `transform: translateY(-4px) scale(1.01)` with `transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1)`. The fish nearest the hovered card oscillates faster (via a CSS class toggle that changes animation duration from `12s` to `4s`). **Typography behavior:** The Bebas Neue ticker runs as a JavaScript `marquee` clone — a `
` containing two copies of the keyword string, translated continuously from `0` to `-50%` width at `--ticker-speed: 30s`. Street-style irregularity is achieved by varying the `font-size` of individual keywords between `6rem` and `10rem` using inline styles, and setting alternate keywords in `--bioluminescent-cyan` while the majority remain in `--tide-foam`. Cormorant Garamond italic body text inside cards uses `font-feature-settings: "swsh" 1` for swash capitals on the first letter of each paragraph. **Do NOT build:** hero CTA buttons ("Sign up", "Get started"), pricing tables, feature lists, testimonial rails, navigation mega-menus, hamburger menus, sticky headers. The navigation is a single fixed `