# Design Language for domain ## Aesthetics and Tone "domain" adopts an art-deco aesthetic -- the geometric opulence and confident symmetry of the 1920s-30s decorative arts movement. The word "domain" is primal -- it means territory, realm, authority, the space you control. The art-deco treatment elevates it to a visual declaration of sovereignty. Imagine the lobby of the Chrysler Building reinterpreted as a digital experience: sunburst patterns radiating from geometric centers, chevron borders framing every element, and jewel-toned surfaces gleaming under dramatic spotlighting. The visual language draws from Tamara de Lempicka's bold figure paintings, Erté's fashion illustrations, and the theatrical poster art of A.M. Cassandre. The palette uses rich jewel tones -- deep emerald, sapphire blue, amethyst, and gold -- that create the luxurious depth characteristic of the era. The tone is grounded-earthy despite the decorative opulence, maintaining substance beneath the surface beauty. ## Layout Motifs and Structure The layout uses an **immersive-scroll** composition where the entire site is a single continuous vertical experience that reveals content through scroll-triggered transformations. **Primary structure:** - **Grand entrance (100vh):** A full-viewport section with a deep jewel-toned background (emerald to sapphire gradient). The word "DOMAIN" is set in massive display-bold type, centered, with an art-deco sunburst pattern radiating from behind it (CSS conic-gradient creating alternating opaque and semi-transparent wedges). Gold geometric borders frame the viewport edges. - **Book chapters (5 sections, ~120vh each):** Each section explores a meaning of "domain" (territory, expertise, internet, mathematics, sovereignty). The immersive scroll reveals content through transforms -- text blocks slide in from sides, line illustrations draw themselves, and card-flip elements present dual definitions. Each section has its own jewel-tone accent color. - **Line illustration gallery (100vh):** A section featuring clean line illustrations depicting different types of domains -- a castle for territorial domain, a network diagram for internet domain, a coordinate plane for mathematical domain. All rendered in gold strokes on dark backgrounds. - **Book-scholarly reference section (80vh):** Styled as a reference page from an art-deco dictionary -- headword entries with etymological information, pronunciation guides, and cross-references. The layout mimics a physical book page with serif type and scholarly apparatus. - **Keystone footer (60vh):** A symmetrical art-deco closing with the "DOMAIN" wordmark at center, framed by chevron borders that mirror the opening section. **Spacing philosophy:** Art-deco symmetry governs all spacing. Every element has a mirror counterpart. Vertical spacing is consistent at 64px between elements. Horizontal centering is the rule, with asymmetry used only deliberately for emphasis. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Abril Fatface" (Google Fonts) -- a high-contrast display serif with dramatic thick-thin strokes that capture the art-deco poster tradition. Weight 400 (inherently bold). Size clamp(48px, 8vw, 120px). Letter-spacing: 0.02em. - **Body text:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif with 1920s character, providing clean readability in the ornate environment. Weight 400. Size clamp(15px, 1.05vw, 18px). Line-height: 1.75. - **Reference/Scholarly:** "EB Garamond" (Google Fonts) -- classical serif for the book-scholarly reference section. Weight 400, size 16px, line-height: 1.85. **Palette:** - **Emerald Deep** `#0A3A2A` -- primary dark background - **Sapphire Night** `#0A1A3A` -- secondary dark background - **Gold Deco** `#D4A830` -- ornamental gold for borders, sunbursts, and illustrations - **Amethyst** `#6A2C8A` -- accent for the mathematical domain section - **Ruby** `#8A2A3A` -- accent for the sovereignty section - **Ivory** `#F0E8D0` -- text on dark backgrounds and card surfaces ## Imagery and Motifs **Core visual motifs:** - **Art-deco sunburst:** A CSS conic-gradient creating radiating wedges (alternating Gold Deco at 8% and transparent) from behind the hero title. The gradient has 24 wedges creating a starburst effect. - **Chevron borders:** Repeating V-shaped patterns (CSS repeating-linear-gradient at 45deg and -45deg) creating decorative borders along section edges. These borders are 12px wide in Gold Deco at varying opacities. - **Line illustrations in gold:** SVG line drawings (1.5px stroke, Gold Deco) of domain-related imagery. Clean, geometric, art-deco-influenced style with no fills -- just outlines with occasional parallel decorative lines. - **Card-flip definition cards:** Content cards (200px x 280px) that flip on hover to reveal an alternate definition. Front: domain name in display type on jewel-toned background. Back: detailed definition on Ivory background with scholarly serif type. - **Book-scholarly page layout:** The reference section uses traditional book typography: hanging indents, small-caps for headwords, italic for etymological roots, and pilcrow paragraph marks. A thin rule separates entries. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like an immersive journey through the concept of "domain" in all its meanings, presented through the visual lens of 1920s art-deco grandeur. The scroll is the primary interaction, revealing content through continuous transformation. **Opening animation sequence:** - Frame 0-300ms: Emerald Deep background. - Frame 300-1000ms: The sunburst pattern rotates slowly from 0deg (conic-gradient starting angle), creating a spinning starburst behind the title area. - Frame 1000-1600ms: "DOMAIN" materializes letter by letter in Abril Fatface, each letter scaling from 1.5 to 1.0 with fade-in (100ms per letter). - Frame 1600-2200ms: Gold chevron borders trace themselves along the viewport edges (width/height transitions). - Frame 2200-2800ms: The subtitle and navigation hints fade in below. **Scroll behavior:** The immersive scroll drives all content reveals. Text blocks slide in from alternating sides (translateX animations). Line illustrations draw their strokes (stroke-dashoffset). Card-flip elements become visible and are ready for hover interaction. Section backgrounds transition between jewel tones (smooth hue-rotate or background-color transitions). The sunburst from the hero section continues to slowly rotate as a background element throughout the site. **Interaction details:** - Definition cards flip on hover (rotateY(180deg), 500ms, perspective: 800px). - Gold ornamental borders brighten on cursor proximity. - Line illustrations respond to hover with stroke color shifting from Gold Deco to Ivory. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Art-deco sunburst as structural centerpiece:** The CSS conic-gradient sunburst behind the hero title is both a decorative element and a structural anchor. Its slow rotation throughout the page creates a persistent visual heartbeat unique to this design. 2. **Multi-meaning domain exploration:** The five-section structure exploring territory, expertise, internet, mathematics, and sovereignty meanings of "domain" creates a thematic depth unusual for a single-word domain. 3. **Jewel-tone palette as section color-coding:** Each section about a different domain meaning uses a distinct jewel tone (emerald, sapphire, amethyst, ruby, gold), creating both visual variety and a color-based navigation system. 4. **Art-deco dictionary reference section:** The book-scholarly section styled as a period-appropriate dictionary entry with hanging indents and small-caps headwords is a typographic exercise unique among the designs. **Chosen seed/style:** aesthetic: art-deco, layout: immersive-scroll, typography: display-bold, palette: jewel-tones, patterns: card-flip, imagery: line-illustration, motifs: book-scholarly, tone: grounded-earthy **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow (65%), stagger (41%) patterns. Avoided centered (94%) and card-grid (85%) layouts. Avoided photography (82%) imagery. Avoided gradient (92%) and warm (87%) palettes. Avoided mono (92%) typography. Avoided mysterious-moody (74%) tone. Used immersive-scroll (11%) layout, jewel-tones (4%) palette, and book-scholarly (7%) motifs.