# Design Language for xity.dev ## Aesthetics and Tone xity.dev should feel like arriving at a secret warm city that only appears at golden hour: an ethereal civic dream rendered in minimal planes, thin glowing borders, and quiet art-deco geometry. The name suggests a place rather than a product, so the site becomes a soft urban myth — an invitation to walk through “Xity,” a speculative development district where code is masonry, alleys are interfaces, and every window emits amber light. The tone is warm-inviting rather than authoritative: less pitch deck, more lantern-lit promenade. Inspiration should come from art-deco cinema marquees, cream stucco train stations, Japanese paper lantern warmth, and early-computer vector diagrams stripped down to almost nothing. Keep the visual world spacious and hushed, with moments of ornamental precision: fine-line frames, fan motifs, rounded arch silhouettes, tiny tile patterns, and illuminated seams that animate as if the city is waking up. Avoid the common corporate SaaS language entirely. No blue trust palette, no stock photography, no dashboard screenshots, no metric wall. xity.dev is not a company homepage; it is a full-screen narrative postcard from a city being compiled at dusk. ## Layout Motifs and Structure Use an asymmetric promenade layout: the page unfolds as a sequence of full-viewport “districts,” each offset from the last like walking around irregular city blocks. Instead of a centered hero and stacked content bands, compose with a 12-column grid where text occupies unexpected vertical strips: a tall left-side address marker in the first scene, a lower-right caption in the second, a narrow top balcony in the third, and a final diagonal plaza that crosses the viewport. Structural motifs: - **Opening Gate:** a 100vh arrival scene with the domain name large but not centered — set it slightly above the lower-left third, framed by a thin animated deco border that draws around the viewport like a theater curtain lighting up. - **Lantern Blocks:** three narrative sections that behave like streets. Each section has one oversized geometric “building face” made from CSS rectangles and arch cutouts, with copy tucked into illuminated margins rather than cards. - **Asymmetric Map Spine:** a continuous hairline route, not a nav bar, threads through the page from top-left to bottom-right. It bends at each section and occasionally becomes an ornamental border. - **Quiet Interior Panels:** when detail is needed, use slender plaques, vellum overlays, and vertical labels; never use a card grid, pricing block, testimonial strip, or stat-grid. - **Final Rooftop:** the closing scene opens into a large empty warm sky with a small constellation of retro tile marks and a single sentence, making the experience feel resolved rather than conversion-driven. Spatial relationships should privilege negative space and off-axis balance. Let large blank fields of cream, peach, and warm dusk brown breathe around small refined elements. Use full-bleed color fields, but keep content minimal and cinematic. ## Typography and Palette Typography should combine art-deco display drama with soft contemporary readability: - **Display / domain wordmark:** "Limelight" from Google Fonts. Use for `xity.dev`, district numerals, and short engraved labels. Set in uppercase or lowercase with generous tracking (`0.12em` to `0.22em`) and thin text-shadow glows. Limelight carries authentic deco cinema energy without needing heavy ornament. - **Primary headings:** "Poiret One" from Google Fonts. Use for poetic section titles and oversized atmospheric phrases. Its rounded deco geometry keeps the page elegant and airy. - **Body / captions:** "Alegreya Sans" from Google Fonts. Use weights 400 and 500 for warm, literary paragraphs that feel human rather than technical. - **Micro labels:** "IBM Plex Mono" from Google Fonts only for tiny map coordinates and build notes, used sparingly so the design does not fall into the overused mono-heavy pattern. Palette: warm, luminous, and low-contrast, with border animations carrying most of the emphasis. - **Pearl plaster:** `#FFF3DE` — primary background, like sunlit stucco. - **Apricot haze:** `#F6B77A` — soft glow fields and hover warmth. - **Persimmon ember:** `#D86A3A` — active border segments, small marks, and illuminated route points. - **Cocoa dusk:** `#3A261D` — main text and deep architectural silhouettes. - **Burnished gold:** `#C99A45` — deco lines, fan details, and fine ornament. - **Rose shadow:** `#8E4B42` — secondary text, muted depth, and dusk gradients when unavoidable. - **Night olive:** `#29261A` — rare final-scene depth color for the rooftop sky. Use gradients only as subtle atmospheric washes, not as a default modern SaaS background. Prefer flat warm planes, radial glows, and thin animated strokes. ## Imagery and Motifs Imagery should be minimal and generated entirely from CSS/SVG: no photography, no heavy illustration library, no icon set. The site’s visual identity comes from a small vocabulary of retro urban ornaments. Core motifs: - **Animated Deco Borders:** thin `1px` to `2px` lines that trace around viewport edges, plaques, and building silhouettes. Lines should appear in segments with small delays, like neon tubes warming up one by one. - **Retro Tile Patterns:** sparse repeating motifs inspired by 1930s lobby floors: stepped diamonds, half-sun fans, tiny chevrons, and rounded corner brackets. Use them at large scale with plenty of empty space, never as busy wallpaper. - **Paper Lantern Orbs:** translucent circles in apricot and pearl that drift very slowly behind the geometry, giving ethereal softness without becoming blob-heavy. - **Map Pins as Stars:** tiny four-point starbursts and dot clusters mark imaginary districts: `gate-00`, `arcade-17`, `roof-49`. These function as decorative coordinates rather than data visualization. - **Architectural Cutouts:** CSS masks or pseudo-elements create arches, stair-step rooftops, and narrow windows. Keep them abstract enough to feel like memory, not literal city illustration. Motion should feel warm and ceremonial: borders draw, windows glow, tile motifs slide half a step, and light pools expand. Avoid parallax as the main trick; the atmosphere should come from line animation and changing illumination. ## Prompts for Implementation Build a single immersive HTML/CSS/JS experience that reads like a nocturne for a developer city. The page should move through 4-5 full-screen narrative scenes, each with one sentence of copy and one distinct architectural composition. Favor theatrical pacing over marketing density. Implementation guidance: - Load Google Fonts: `Limelight`, `Poiret One`, `Alegreya Sans`, and `IBM Plex Mono`. - Use CSS custom properties for the warm palette and create reusable classes for `.deco-border`, `.route-line`, `.tile-field`, `.lantern-orb`, and `.district-label`. - Create border animation with SVG `stroke-dasharray` / `stroke-dashoffset` or CSS gradient borders that rotate along a masked frame. This is the primary interaction pattern; make it exquisite. - Use the route-line as a narrative device: on scroll, update small labels and highlight the current “district” by changing border color from burnished gold to persimmon ember. - Keep copy short and cinematic: “A city for small tools,” “Streets compiled from quiet interfaces,” “Every window is a function returning warmth.” - Favor full-screen compositions, oversized negative space, and asymmetrical placement. Do not create a conventional nav, CTA-heavy hero, pricing section, feature card grid, testimonial row, or stats block. - If JavaScript is used, keep it to scroll progress, border sequencing, and soft cursor-proximity glow on architectural lines. Avoid noisy cursor followers or springy SaaS micro-interactions. - Let the final viewport linger: a warm empty skyline, a small `xity.dev` coordinate plaque, and a closing line rather than a button. ## Uniqueness Notes 1. **A city-as-interface narrative:** xity.dev is treated as an explorable imaginary district, not a software product landing page. The structure is a promenade of civic scenes rather than the overused centered hero plus card-grid pattern. 2. **Warm ethereal art-deco minimalism:** the design combines ethereal softness with art-deco display typography and retro tile motifs, but keeps the imagery minimal and spatial instead of ornate or photo-led. 3. **Border animation as the main spectacle:** instead of relying on the batch’s overused parallax, scroll-triggered reveals, staggered cards, gradients, or mono-heavy terminal styling, the motion language centers on animated borders, glowing seams, and ceremonial line drawing. 4. **Asymmetric full-screen districts:** each section uses a different off-axis composition, avoiding the common centered layout and pricing/stat modules while still feeling coherent through the route-line spine. 5. **Planned seed/style:** aesthetic: ethereal, layout: asymmetric, typography: art-deco-display, palette: warm, patterns: border-animate, imagery: minimal, motifs: retro-patterns, tone: warm-inviting. 6. **Frequency-informed avoidance:** frequency analysis shows corporate, photography, card-grid, centered layouts, warm gradients, parallax, scroll-triggered, stagger, mono, and authoritative tone are heavily used. This design keeps the required warm palette but reduces gradient dependence, avoids photography and card grids, uses mono only as a tiny accent, and prioritizes an inviting narrative atmosphere.