# Design Language for xity.one ## Aesthetics and Tone xity.one should feel like a private retro salon discovered behind a diagonal brass door: not a busy “city” page, but the singular penthouse chamber above it. The mood is luxurious, cinematic, and restrained — a 1960s international hotel lobby at midnight, photographed on expired Kodachrome, where the domain name appears as a monogram on matchbooks, elevator buttons, and smoked mirrors. The design should evoke exclusivity without becoming corporate: deep wine shadows, amber lamps, polished walnut, cream paper, and geometric inlays that imply a members-only atlas for one decisive destination. The tone is velvet-confident and slightly mysterious. Copy should read like chapter cards from an old travel film: short, ceremonial, and spatial. The visitor is not being sold a plan; they are being escorted through a sequence of rooms where `xity.one` becomes the address, the key, the room number, and the final skyline seen through tinted glass. ## Layout Motifs and Structure Use diagonal-sections as the governing architecture. Each full-screen panel should be sliced on a 10–14 degree angle, creating the feeling of moving through overlapping lobby walls, escalator planes, and folded architectural drawings. Avoid centered hero blocks and card grids. Compose the page as a luxury itinerary of 5 immersive scenes: 1. **The Brass Threshold:** a full-viewport opening scene with the wordmark placed low-left on a diagonal baseline, a large cropped numeral “1” rising behind it, and a thin angled rule crossing the screen like a velvet rope. 2. **The Photo Corridor:** a diagonal filmstrip band cuts from upper-left to lower-right, carrying 2–3 duotone vintage-photo panels with heavy grain, rounded print corners, and stamped captions. 3. **The Monogram Room:** oversized geometric shapes — circle, diamond, parallelogram, and keyhole oval — rotate subtly around a central negative-space `one` mark, with text set in a narrow side column that feels engraved rather than boxed. 4. **The Observatory:** layered diagonal panes reveal a slow parallax skyline made from abstract blocks, not literal buildings. The foreground moves like smoked glass; the background drifts like a distant city seen from a private club. 5. **The Final Key:** the ending screen collapses the diagonals into a single vertical brass line and a quiet domain lockup, as if the entire experience has resolved into one address. The grid should be an invisible 12-column system skewed by CSS transforms. Text containers can remain readable and unskewed inside angled parents, producing a deliberate contrast between refined typography and dramatic spatial cuts. Use wide margins, low content density, and cinematic pauses. ## Typography and Palette Typography should be Baskerville-refined with a vintage luxury accent: - **Primary display / wordmark:** "Baskervville" from Google Fonts. Use for `xity.one`, large numerals, and chapter titles. Set in elegant lowercase or small caps with generous tracking (`0.08em`–`0.16em`) and optical spacing. - **Secondary editorial serif:** "Libre Baskerville" from Google Fonts. Use for short narrative lines, room captions, and refined body copy. - **Annotation / labels:** "Cormorant Garamond" from Google Fonts. Use italic labels, photo stamps, coordinates, and tiny ceremonial details. Avoid monospaced typography here; the voice should feel printed, not technical. Analogous palette, moving from burgundy through ember and antique gold: - Deep Merlot: `#2B1020` — primary background shadow. - Smoked Aubergine: `#3A172C` — secondary angled panels. - Oxidized Burgundy: `#5A1F2E` — depth fields and photo overlays. - Vermilion Leather: `#8F3A35` — restrained highlight lines and seals. - Cognac Brass: `#C4773B` — geometry, borders, and animated keylines. - Lamplight Gold: `#E8B96A` — luminous accents and hover glints. - Champagne Paper: `#F4E6C8` — typography and photo margins. Use gradients only as subtle material shifts inside the analogous range, never as generic SaaS washes. Backgrounds should feel like lacquer, leather, photographic emulsion, and dim brass. ## Imagery and Motifs Imagery should center on vintage-photography treatments without relying on generic stock-photo realism. Use abstracted or CSS-filtered images as if they were archival contact sheets: luxury hotel corridors, blurred city lights, chrome elevators, marble floors, gloved hands holding a key, and night windows. Apply duotone filters using burgundy shadows and champagne highlights, plus visible dust, vignette, and film grain overlays. Core motifs: - **Geometric Key Monogram:** combine a circle, slim rectangle, diamond, and diagonal slash into a recurring emblem that can appear as a background watermark, photo stamp, cursor ornament, or section divider. - **Diagonal Brass Inlays:** thin angled lines that intersect panels like marquetry in a walnut wall. Animate them as if light is traveling along polished metal. - **Vintage Room Numbers:** large `01`, `ONE`, and `1` forms partially cropped by the viewport, used as architectural objects rather than statistics. - **Smoked Mirror Reflections:** duplicate selected shapes with blur and opacity beneath diagonal panes, producing a glossy mirrored floor effect. - **Film Edge Details:** sprocket-like marks, tiny registration crosses, date stamps, and cream borders around photos, used sparingly as tactile artifacts. ## Prompts for Implementation Build a single full-screen narrative experience in HTML/CSS/JS. The page should feel like scrolling through a luxurious retro film sequence, not like a product landing page. Use 5 full-viewport sections with diagonal clipping via `clip-path: polygon(...)`, layered pseudo-elements, and restrained parallax tied to scroll position. Keep copy minimal: one evocative sentence per scene, plus a few engraved labels. Implementation guidance: - Load Google Fonts: `Baskervville`, `Libre Baskerville`, and `Cormorant Garamond`. - Use CSS custom properties for the full palette and material effects: `--merlot`, `--aubergine`, `--brass`, `--gold`, `--paper`. - Create reusable classes such as `.diagonal-scene`, `.brass-rule`, `.photo-strip`, `.room-number`, `.key-monogram`, and `.smoked-pane`. - Use parallax as theatrical depth: foreground brass rules slide faster, vintage photo strips drift slowly in the opposite direction, and background geometric shapes rotate by only a few degrees. - Add subtle JS scroll interpolation for diagonal panes and photo grain opacity. Motion should be slow, expensive-looking, and deliberate. - Make hover states feel like lamplight: brass edges brighten, photo captions appear as stamped ink, and the monogram emits a small amber glint. - Avoid CTA-heavy layouts, pricing blocks, feature cards, testimonial strips, dashboards, and stat-grids. The final moment can contain a quiet domain inscription rather than a conventional button. ## Uniqueness Notes 1. **Single-address luxury narrative:** unlike the warm civic promenade of xity.dev, xity.one becomes a private penthouse address and ceremonial key sequence, with the domain treated as an object of access rather than a software destination. 2. **Diagonal-section cinema:** the page structure relies on angled architectural planes, clipped rooms, and crossing brass inlays instead of the overused centered hero, stacked bands, or card-grid systems. 3. **Baskerville refinement without mono:** the typography intentionally avoids the batch’s heavily used monospaced pattern, using Baskervville, Libre Baskerville, and Cormorant Garamond for a printed, vintage-luxury atmosphere. 4. **Vintage photography as tactile artifact:** imagery is not generic photography or minimal illustration; it is treated as archival contact sheets, film edges, dust, duotone chemistry, and cropped hotel-noir fragments. 5. **Analogous burgundy-to-gold palette:** the palette avoids common warm gradient SaaS language by staying inside a lacquered retro range of merlot, aubergine, vermilion, cognac, and champagne. Chosen seed/style: aesthetic: retro, layout: diagonal-sections, typography: baskerville-refined, palette: analogous, patterns: parallax, imagery: vintage-photography, motifs: geometric-shapes, tone: luxurious. Avoided patterns from frequency analysis: corporate aesthetic, centered layout, card-grid layout, generic photography/minimal imagery, heavy warm gradients, monospaced typography, stat-grids, pricing blocks, and CTA-heavy marketing sections. Parallax is part of the planned seed even though it is overused, so it should be applied narrowly as slow cinematic depth rather than a generic scroll effect.