# Design Language for CCATTL.com ## Aesthetics and Tone CCATTL.com inhabits the visual register of a *zen-contemplative dispatch from the back-alleys of a translucent megacity*. The double-C in the name is treated as a sliding shutter, a pair of half-open eyes, or the bracketed lens of a long-exposure camera — and the entire design pivots around the act of **looking through frosted glass at something almost legible**. Picture the moment after rain on a Shibuya pedestrian bridge: street stencils blur underfoot, neon receipts smear into halftone, and a 16th-century Garamond cap seems to surface like a watermark on a pane of cold breath. The site is contemplative not because it is quiet, but because it slows the eye down — every section forces the visitor to *focus*, the way a camera focuses, with a soft outer ring of un-readability around a single sharp word. The mood is **patient, observational, and slightly clandestine**. There is no hard sell, no marquee call to action — the site behaves like an exhibition catalog for a city that has not been built. The tone of voice in headings is hushed but precise: short fragments, lowercase or small-caps, occasionally interrupted by a single oversized Garamond italic that breathes. Background imagery treats the page itself as an atmospheric layer; the user is not on top of the content, they are *inside* it, looking out. Inspirations: Wong Kar-wai's *Fallen Angels* color grading, Daido Moriyama's *Provoke* grain, the data overlays of *Ghost in the Shell: Stand Alone Complex*, William Klein contact sheets, and the still composure of a Hiroshi Sugimoto seascape — but reframed as a streetwear lookbook for information. Where most sites confuse "minimal" with "empty," CCATTL.com chooses **dense quietness**: rich layered backgrounds, almost no UI chrome. ## Layout Motifs and Structure The page is one continuous **immersive-scroll panorama** broken into seven full-viewport scenes, each scene a "depth chamber" composed of stacked translucent panes (typically 4–6 layers separated on the z-axis by 12–60px parallax offsets). Scrolling does not advance pages — it advances *focus*. As the viewport descends, the foremost pane drifts down and dissolves, the second pane sharpens forward to become the new foreground, and a fresh rear pane fades in from infinity. The user is essentially scrolling through a stack of frosted lithographs. Within each scene, content sits on a **fluid 12-column street-style grid** that intentionally misregisters: columns are nominally 1fr but are pushed by a global `--drift` variable so that headlines slip 8–24px off the spine of the grid, like posters pasted slightly crooked on a hoarding. Negative space is large but never centered — text gravitates to the *lower-left third* and *upper-right gutter* in alternating scenes, leaving a diagonal river of frosted background through the middle. A persistent **left-edge index strip** (28px wide, semi-transparent) lists scene numerals in tiny tech-mono — `01 / 07`, `02 / 07` — that crossfade as you scroll, the only persistent navigational element. Layered-depth motifs: - **Foreground** (z=3): a single Garamond word or fragment, sometimes 220–400px tall, partially clipped by the viewport edge. - **Mid-ground** (z=2): a translucent data-viz card (line graph, polar plot, sparkline, or annotated photograph) that holds the scene's "evidence." - **Rear** (z=1): a wide, low-contrast background plate of frosted gradient with subtle grain. - **Atmospheric** (z=0): a slow-moving radial blur halo that tracks the cursor with a 1.4s ease, suggesting a camera trying to focus on the visitor. The home scene opens with the wordmark `c.cattl` set in 320px Garamond italic, partially obscured by a 38px-radius backdrop-filter blur, with the tagline whispered beneath in 13px small-caps tech-mono. There is no hero image, no CTA button, no nav bar — only the index strip and a tiny scroll affordance: a vertical hairline that elongates as you read. ## Typography and Palette **Type system** (Google Fonts only): - **EB Garamond** — serif-classic, italic and roman; primary display face, set as large as 18vw at hero, with optical sizing. Used for slogans, scene titles, and the lone italic accent words. Letterspacing dialed slightly negative on display sizes (-0.01em) to emphasize the period-correct silhouette. - **Cormorant Garamond** — used at 18–28px for pull-quotes and lyrical body fragments where Garamond proper feels too dense. Italic only. - **Inter Tight** — secondary sans, used at 14–16px for the few paragraphs of running prose, set tight (135% leading) and slightly translucent (84% opacity) so it reads like fogged glass. - **JetBrains Mono** — tech-mono, 11–12px, all-caps with +0.18em tracking for the index strip, scene numerals, timestamps, and data-viz labels. Acts as the "street stencil" voice. **Palette — translucent-frost** (all values are layered with `backdrop-filter: blur()` and tuned alpha): - `#0E1116` — *Asphalt Black*: the only true near-black, used for the deepest rear plate and for body type at full opacity. - `#1B2230` — *Nightshift Indigo*: secondary background gradient anchor, suggests rain-soaked pavement under sodium lamps. - `#E8EEF2` — *Breath on Glass*: primary content color — almost white, with a 4% blue cast. All Garamond display copy uses this. - `#C7D2DA` — *Frost Vellum*: muted secondary text, used at 70% opacity over translucent panes. - `#9AB1BF` — *Steel Mist*: data-viz line color, hairline borders, divider rules. - `#7B8AA0` — *Concrete Drift*: tertiary text, captions, scene numerals. - `#F4A261` — *Sodium Halo*: the one warm accent — a soft amber used sparingly for a single italic word per scene, mimicking a streetlamp glow filtered through frost. - `rgba(232, 238, 242, 0.06)` — *Pane Tint*: the ubiquitous frosted-glass fill applied to every floating card and overlay. The palette never resolves to pure black or pure white. Everything sits between #0E1116 and #F4A261, with the warm accent appearing roughly once per 1,000 cool pixels — a deliberate scarcity that makes it feel like a single photograph caught in the wash. ## Imagery and Motifs The site's *imagery* category is **data-viz**, but reinterpreted as urban field-notes rather than dashboard analytics. Every chart is presented as if photographed off a stranger's laptop screen through a misted café window: - **Polar drift plots** rotating slowly (60s loop) in the rear of the third scene — concentric translucent rings annotated with cryptic JetBrains Mono labels (`vector 04`, `lat 35.6586`, `delta -2.1`). - **Stepwise line graphs** that draw themselves as the scene enters viewport (`stroke-dashoffset` animated over 1.8s ease-out) and then sit, breathing, with a 0.4Hz pulse on their endpoint dot. - **Annotated still photographs** of urban textures (rain, signage, asphalt, concrete) that have been duotoned to the Asphalt-Black-to-Breath-on-Glass range, then overlaid with vector callouts in Steel Mist hairline. - **Layered halftone scans** of nothing in particular — receipts, transit cards, hand-drawn isolines — set at 18% opacity and stacked behind data panels for that "found document" feel. - **Floating glyphic motifs**: a single Garamond ampersand at 600px in the rear plate of scene five, drifting 40px on parallax; a half-shutter `[ ]` bracket pair around scene four's title. - **Particle haze**: a fine canvas-rendered drift of 1px mist particles at 30% opacity, density 80/viewport, moving on a Perlin field. Looks like cold air, not snow. Decorative patterns: ultra-thin SVG "registration marks" in the corners of major panes (16px crosshairs at 30% opacity); contour lines from a fictional topo map running edge-to-edge behind scene six; a recurring `//` separator glyph in JetBrains Mono between metadata fields. The motifs category is **layered-depth** — every visual element belongs to a clearly distinguishable z-plane, and the design constantly invites the eye to "rack focus" between planes via the blur-focus interaction described next. ## Prompts for Implementation Build CCATTL.com as a single long HTML page composed of seven `
` blocks, each `min-height: 100vh` and using `position: sticky` orchestration with a parent IntersectionObserver to drive scene transitions. Treat scrolling as a focus puller: as a scene's progress crosses 0–100%, animate the foreground pane's `filter: blur()` from `0px` → `28px` and `opacity` from `1` → `0`, while the next scene's mid-ground pane animates the inverse. Use CSS custom properties (`--scene-progress`, `--focus`, `--drift`, `--cursor-x`, `--cursor-y`) updated from a single rAF loop so all visual layers stay in lockstep without jank. Implement the **blur-focus pattern** as the site's signature: every translucent pane is a `backdrop-filter: blur(var(--pane-blur))` element whose blur radius is bound to that scene's focus state. Hovering near a data-viz card should reduce that pane's blur to `0px` over 380ms (cubic-bezier 0.2, 0.8, 0.2, 1) while neighboring panes blur further to `36px` — a literal depth-of-field rack. The cursor itself is replaced by a 280px radial-gradient halo (`mix-blend-mode: screen`, opacity 0.18, color Sodium Halo) that lags 80ms behind pointer position via spring lerp, so the user feels they are holding a small lantern against frosted glass. Animation principles: - **Scroll-triggered, never time-triggered.** Nothing animates on a fixed clock except the rear haze and the polar plot rotation. Every reveal is bound to `--scene-progress`. - **Stagger by depth, not by index.** When a scene enters, the rear plate fades first (0–30% progress), the mid data-viz draws (30–70%), the foreground Garamond word lands last (70–100%) with a 1.4s ease-out and a 6px upward translate. - **Typography breathes.** The hero word and each scene title have a subtle infinite `letter-spacing` oscillation (-0.01em ↔ +0.005em over 9s, ease-in-out) — almost imperceptible, but enough to feel alive. - **Sound-of-silence interaction.** No hover sound, no scroll snap, no click confetti. The only "feedback" on link hover is the underline drawing itself in 220ms with a `path-draw-svg` style stroke (not a CSS underline — an actual SVG hairline). Storytelling structure (seven scenes): 1. **`c.cattl`** — wordmark surfaces from frost; tagline whispered. 2. **field notes** — three Cormorant italic fragments float beside annotated photo of wet asphalt. 3. **drift** — slow polar plot, with a single Garamond italic word `between` glowing in Sodium Halo. 4. **shutter** — bracketed scene title; stepwise line graph draws itself; metadata in JetBrains Mono. 5. **ampersand** — giant Garamond `&` in the rear; foreground holds a paragraph of Inter Tight prose like a caption to a photograph not shown. 6. **topographies** — contour-line background; a vertical timeline of moments (no dates, only times). 7. **return** — wordmark dissolves back into frost; the index strip dims; a single hairline drawing itself across the bottom edge as the user finishes scrolling. Strictly avoid: any pricing block, feature grid, statistic-counter row, testimonial carousel, "Get Started" CTA bar, three-up icon row, or hero-with-button-pair pattern. There is no signup, no email capture, no social proof. The only interactive affordance besides scrolling is a tiny `// contact` link in the lower-right at scene seven, drawn in JetBrains Mono and revealing a single mailto on click. The site's purpose is to be *encountered*, not converted from. ## Uniqueness Notes Differentiators from typical web designs: 1. **Garamond-classic at street-poster scale paired with a translucent-frost palette.** Most sites pair Garamond with cream/sepia editorial warmth; here Garamond italic is the cold ghost in a wet city. The collision of a 16th-century book serif with sodium-lamp blue is the design's central tension. 2. **Blur-focus as primary interaction.** The site's blur radii are bound to scroll progress and cursor proximity, making *focus* itself the navigational metaphor. No other site in this batch (per frequency check: zero existing designs) uses depth-of-field racking as the spine of UX. 3. **Data-viz reframed as urban field notes.** Charts are not analytics — they are evidence on a clandestine clipboard, presented like contact-sheet annotations rather than dashboard widgets. There are no KPIs, no growth arrows, no "trusted by" rows. 4. **Seven sticky depth-chambers instead of a homepage.** No nav bar, no footer, no CTA hero. Scrolling is the entire interface, and the index strip is the only persistent UI. 5. **Sodium Halo scarcity rule** — `#F4A261` appears at most once per scene, on a single italic word, making the entire page feel cool-toned with one warm pinprick of light per chamber. This palette discipline is rarely enforced this strictly. 6. **Cursor-as-lantern.** The replaced cursor is a soft Sodium Halo radial gradient at screen blend mode, not a geometric ring or dot — it functions as a literal light source against the frosted overlays. Chosen seed (per assignment): **aesthetic: street-style, layout: immersive-scroll, typography: garamond-classic, palette: translucent-frost, patterns: blur-focus, imagery: data-viz, motifs: layered-depth, tone: zen-contemplative**. Frequency analysis reference: the frequency tool reported `no_designs_found` (this is the first design in the batch), so there are no overused patterns to avoid yet — but the seed deliberately combines a contemplative tone with a street aesthetic and classical typography, a triangulation that resists falling into any of the more common ruts (brutalist neon, glassmorphism saas, dopamine landing, or generic editorial). Avoided patterns by design: CTA-heavy hero, pricing tiers, testimonial carousel, statistic grids, three-up feature columns, dashboard analytics, neon cyberpunk, Memphis playfulness, and anything resembling a typical SaaS marketing template.