# Design Language for xity.one ## Aesthetics and Tone xity.one channels the atmosphere of a 1920s grand hotel lobby reimagined as a digital lounge -- think the Claridge's foyer if it were designed by Tamara de Lempicka and rendered in meringue and butterscotch. The aesthetic is **luxury-premium** but deliberately stripped of the cold, untouchable quality that plagues most luxury web design. Instead of marble-and-gold severity, xity.one wraps its opulence in softness: rounded corners on gilded frames, pastel tints where you'd expect black, handwritten flourishes alongside geometric precision. The mood is the first sip of a perfectly made lavender latte in a velvet booth -- indulgent, warm, and utterly unpretentious. The tone is **approachable-casual**: the site speaks like a well-dressed friend who knows every good restaurant in town but never name-drops. Copy is lowercase where possible, punctuated with em-dashes and gentle humor. Headlines feel like whispered invitations rather than declarations. Every interaction rewards curiosity with a small moment of delight -- a blob that wobbles, a photo that shifts hue, a card that breathes when you hover. ## Layout Motifs and Structure The page is organized as a **parallax-sections** composition: five to seven discrete full-viewport "rooms," each with its own parallax depth layer creating the sensation of moving through a physical space. Unlike typical parallax (which simply slides background images at different speeds), xity.one treats each section as a diorama with three depth planes: - **Background plane (z: -2):** Soft organic blob shapes rendered as SVG with gaussian blur, drifting at 0.15x scroll speed. These are the atmospheric "wallpaper" -- never sharp, always impressionistic, in creamy pastel tones (#FFF5E6, #F5E6D0, #E8D5C4). - **Content plane (z: 0):** Text, cards, and interactive elements positioned on an asymmetric two-column layout (roughly 55/45 split, alternating sides per section). Content blocks are contained within rounded rectangles (border-radius: 24px) with subtle box-shadow (0 8px 32px rgba(180, 156, 120, 0.12)) that gives them the appearance of floating paper cards. - **Foreground plane (z: +1):** Decorative art-deco line work -- thin gold (#C9A96E) geometric borders, fan motifs, and chevron accents -- that scrolls at 1.3x speed, creating the illusion of ornamental screens passing between you and the content. Section transitions are not hard cuts. As you scroll past a section boundary, the outgoing section's content plane fades to 0 opacity over 120px of scroll distance while the incoming section's content rises from a 30px offset with spring easing. The organic blob backgrounds cross-dissolve with a 200px overlap zone, so colors blend like watercolors at the seams. Navigation is a thin horizontal bar pinned to the top, nearly invisible (8px tall, background matching current section's dominant pastel) that expands on hover to reveal section labels set in art-deco display type. A small circular progress indicator (32px diameter, gold stroke) in the bottom-right corner shows scroll position as a filling arc. ## Typography and Palette **Display Headlines:** "Poiret One" (Google Fonts) -- a pure art-deco geometric display face with perfectly circular O's, pointed A's, and that unmistakable 1920s elegance. Used for section titles at clamp(2.8rem, 6vw, 5.2rem), weight 400 (its only weight), letter-spacing: 0.08em, text-transform: uppercase. Color: #8B7355 (warm bronze) on light backgrounds, #FFF5E6 (cream) on tinted sections. The generous letter-spacing and geometric forms create the **art-deco-display** typographic identity that distinguishes this site from the serif-heavy luxury cliche. **Subheadings:** "Josefin Sans" (Google Fonts, weights 300, 400) -- a vintage geometric sans-serif with Scandinavian clarity that complements Poiret One's deco geometry without competing. Set at 1.2rem-1.6rem, weight 300, letter-spacing: 0.04em. Its tall x-height and clean strokes serve as the rational counterpoint to Poiret One's flamboyance. **Body Text:** "Nunito" (Google Fonts, weights 300, 400, 600) -- a rounded-terminal sans-serif that delivers the **approachable-casual** warmth the design demands. At 1rem (16px base), weight 300 for body, 400 for emphasis, line-height: 1.75. The rounded terminals soften every paragraph, making even dense text feel inviting. Color: #5C4A3A (dark cocoa) at 90% opacity for a gentle, non-stark reading experience. **Palette (creamy-pastel foundation):** | Role | Hex | Name | Usage | |------|-----|------|-------| | Base cream | #FFF5E6 | Meringue | Page background, card fills | | Warm blush | #F5D6C6 | Rosewater | Blob backgrounds, section tints | | Soft gold | #C9A96E | Aged Brass | Deco line work, accents, progress indicator | | Deep cocoa | #5C4A3A | Espresso | Body text, strong labels | | Dusty mauve | #D4A9B8 | Petal Dusk | Secondary blobs, hover states | | Sage whisper | #C8D4C0 | Linen Sage | Tertiary accent, alternating section tint | | Burnt sienna | #B87A56 | Terracotta Blush | Links, interactive highlights | | Charcoal warm | #3E3229 | Roasted Umber | Navigation text, footer | The palette avoids the overused warm-gradient approach (98% frequency) by keeping colors flat and matte -- no gradients between palette stops. Instead, depth comes from layering semi-transparent pastels over each other (the blob overlaps create natural color mixing). ## Imagery and Motifs **Duotone Photography (duotone-photo):** All photographic elements are processed through a CSS duotone filter that maps shadows to #5C4A3A (Espresso) and highlights to #F5D6C6 (Rosewater). This is achieved via SVG `` embedded as a reusable `` definition, applied to `` elements. The result: every photo -- whether it depicts architecture, food, textiles, or people -- is harmonized into the site's creamy-pastel world. Photos feel like hand-tinted prints from the 1920s, reinforcing the art-deco era without requiring period-specific subject matter. Images are displayed at modest sizes (max 480px wide) inside rounded frames (border-radius: 16px) with a 4px solid #C9A96E border, like photographs in gilded desk frames. **Organic Blobs (organic-blobs):** The dominant decorative element across the site is a family of CSS/SVG organic blob shapes -- irregular, amoeba-like forms with smooth bezier curves. Each section contains 2-3 blobs ranging from 200px to 600px in diameter, positioned absolutely and layered behind content. Blobs use the palette's softer colors (#F5D6C6, #D4A9B8, #C8D4C0) at 40-60% opacity. They are animated with a slow morphing loop (CSS `@keyframes` adjusting `border-radius` across 8 control points over 12-20 seconds) so they perpetually breathe and reshape, like lava lamp forms suspended in cream. On scroll, blobs drift vertically at the background parallax rate (0.15x), creating organic atmospheric movement beneath the structured content. **Art-Deco Line Motifs:** Thin geometric line patterns drawn in #C9A96E at 1px stroke: sunburst fans (radiating lines from a central point, used as section dividers), chevron borders (repeating V-shapes along card edges), and stepped pyramid silhouettes (used as bullet-point markers). These are inline SVG, not images, keeping them resolution-independent and animatable. The fan motif is the signature: a semicircular burst of 9 lines, 60px wide, used wherever sections begin. On scroll-entry, the fan lines draw outward from center using `stroke-dashoffset` animation (0.6s, staggered by 40ms per line). **No hero images, no full-bleed photos, no stock photography.** Every image is a curated, small-format duotone print. Decorative weight comes from blobs and line work, not photography. ## Prompts for Implementation Build xity.one as a **single-page vertical scroll through five parallax "rooms"** -- each room is a full-viewport section with its own pastel tint, blob configuration, and deco ornamentation. The experience should feel like walking through a boutique hotel where each room has a different personality but the same elegant DNA. **Parallax Implementation:** - Use CSS `transform: translateZ()` with `perspective` on a parent container, or use `scroll-timeline` / IntersectionObserver with manual transform offsets for the three depth planes. The background blobs scroll at 0.15x, content at 1x, and foreground deco lines at 1.3x. Keep the parallax subtle -- the goal is atmospheric depth, not a theme-park ride. - Each section's background color transitions smoothly via a scroll-driven interpolation: section 1 (#FFF5E6), section 2 (#F5D6C6), section 3 (#C8D4C0), section 4 (#D4A9B8), section 5 (#FFF5E6 return). This can be achieved with IntersectionObserver adjusting a CSS custom property on ``. **Scale-Hover Interactions (scale-hover):** - All interactive cards and framed photos respond to hover with a **scale-hover** transform: `transform: scale(1.04)` over 0.4s with `cubic-bezier(0.34, 1.56, 0.64, 1)` (a spring overshoot curve). On hover-out, scale returns to 1.0 over 0.3s with ease-out. This creates a breathing, organic interaction that matches the blob aesthetic. - The gold border on photo frames thickens from 4px to 6px on hover, synchronized with the scale. - Navigation section labels scale from 0.9 to 1.0 on hover with the same spring curve. **Blob Morphing Animation:** - Define blob shapes using `border-radius` with 8 values (e.g., `border-radius: 30% 70% 60% 40% / 50% 60% 30% 70%`). Animate between 3-4 keyframe states over 15 seconds, `animation-timing-function: ease-in-out`, `animation-iteration-count: infinite`. Each blob on the page should have a different duration (12s, 15s, 18s) and delay to prevent synchronization. **Duotone Filter Setup:** ``` ``` Apply via `filter: url(#duotone)` on all `` elements. **Art-Deco Fan SVG Draw:** - Each fan is a `` of 9 `` elements radiating from a shared origin. On IntersectionObserver entry (threshold 0.3), add a class that triggers `stroke-dashoffset` from full-length to 0, staggered per line. Duration: 0.6s per line, stagger: 40ms. Easing: ease-out. **Narrative Structure (5 sections):** 1. **Welcome Room** -- A single Poiret One headline ("the quiet luxury of one") floating over 3 morphing blobs in cream/blush. No navigation visible initially. Scroll cue: a gently bouncing gold chevron at the bottom. 2. **Identity Room** -- Asymmetric two-column: left column holds a duotone photo in a gilded frame, right column holds a short paragraph in Nunito describing xity.one's philosophy. A deco fan divider separates heading from body. 3. **Gallery Room** -- Three small duotone photos arranged in a staggered vertical cascade (not a grid), each with scale-hover interaction. Between photos, short captions in Josefin Sans light. 4. **Detail Room** -- A single large text block with pull-quote styling: a key phrase extracted in Poiret One at 3rem, bordered top and bottom by chevron line motifs. Background shifts to sage (#C8D4C0). 5. **Farewell Room** -- Minimal: a centered "come back soon" in Poiret One, a single morphing blob in dusty mauve, and a subtle upward-scrolling parallax of tiny gold deco dots like champagne bubbles rising. **AVOID:** CTA buttons, pricing blocks, stat-grids, testimonial carousels, hamburger menus, gradient backgrounds, hero images with overlay text, card grids with uniform sizing, dark mode, neon accents. ## Uniqueness Notes 1. **Three-plane parallax diorama with organic blobs as atmospheric layer:** No other design in this collection uses parallax depth to separate morphing blob backgrounds from structured content and art-deco foreground ornaments. The 0.15x/1.0x/1.3x speed differential creates a physical sense of space that makes scrolling feel like walking through rooms rather than reading a page. This is a specific, intentional parallax-sections approach (3% frequency) rather than the generic parallax scroll effect (98% frequency). 2. **Art-deco display typography paired with rounded-terminal body type:** The Poiret One / Nunito pairing is deliberately contradictory -- sharp geometric deco elegance for headlines, soft pillowy roundness for body text. This typographic tension embodies the site's core concept (luxury that feels approachable) and avoids both the overused mono typography (76%) and the expected elegant-serif luxury cliche. Art-deco-display sits at just 2% frequency. 3. **Creamy-pastel palette with flat layered opacity instead of gradients:** While 66% of designs use gradients and 98% use warm palettes, xity.one achieves warmth and depth through overlapping semi-transparent flat pastel shapes rather than color gradient transitions. The blob overlaps create emergent color mixing that is organic and unpredictable, unlike the mechanical smoothness of CSS gradients. Creamy-pastel is at 2% frequency. 4. **Duotone photo treatment as unifying visual grammar:** Rather than using photography as-is (99% frequency) or avoiding it entirely, xity.one processes all photos through a single SVG duotone filter that maps them into the site's pastel color space. This creates a cohesive visual identity where any source photograph -- regardless of original color -- becomes part of the design language. Duotone-photo imagery is at 2% frequency. 5. **Scale-hover with spring overshoot as the sole interaction pattern:** Instead of layering multiple animation patterns (the median design uses 3-4 different hover/scroll effects), xity.one commits to a single interaction vocabulary: the spring-curve scale transform. Every hoverable element uses the same `cubic-bezier(0.34, 1.56, 0.64, 1)` timing, creating a site-wide kinetic identity that feels like everything is breathing. Scale-hover is at 3% frequency. **Seed/style:** luxury-premium, parallax-sections, art-deco-display, creamy-pastel, scale-hover, duotone-photo, organic-blobs, approachable-casual **Avoided overused patterns:** corporate aesthetic (97%), generic photography (99%), full-bleed layout (97%), warm-gradient palette (66%), mono typography (76%), nature motifs (48%), friendly tone (45%), stagger animation (42%), centered layout (58%)