# Design Language for xity.one ## Aesthetics and Tone xity.one is a mid-century modern showcase where the "one" in the domain implies singularity, primacy, and essential unity. The visual identity channels the confident, space-age optimism of 1960s design -- Eames shell chairs, Saul Bass title sequences, and the clean geometry of Dieter Rams. A card-grid layout presents content as curated exhibition pieces, each card a small mid-century vignette with sans-grotesk typography and aged paper textures evoking period print advertisements. The tone is luxurious -- the quiet luxury of a perfectly designed object that requires no explanation. Inspiration from Herman Miller catalogs, Braun product photography, Saul Bass movie posters, and the neon-electric signage of 1960s Las Vegas (restrained, not garish). ## Layout Motifs and Structure A **card-grid** layout where each card is a self-contained mid-century design composition, arranged in a clean, rhythmic grid. **Primary structure:** - **Exhibit entrance (100vh):** A warm white background (#f8f5f0) with "XITY" in large sans-grotesk type (20vw) positioned left-aligned. ".ONE" below in neon electric orange (#ff6b35, the single pop of neon energy). A thin horizontal line (1px, #2a2a28) spans the full width below the title, establishing the modernist grid. - **Card grid:** A responsive CSS grid (3 columns on desktop, 2 on tablet, 1 on mobile) of equal-height cards. Each card has: aged-paper background (subtle noise texture), a single illustrative element (geometric shape or line drawing), a heading in bold sans-grotesk, and body text. Cards have no border -- separation comes from 32px gap alone. - **Tech accent strip:** A narrow horizontal band with small technical illustrations -- gear cutaways, circuit fragments, machine parts -- in thin line art, referencing the technological optimism of mid-century design. - **Counter-animate featured numbers:** Key statistics or dates within cards animate their numeric values from 0 to target using counter-animate on scroll intersection. **Spatial relationships:** Card grid: gap 32px, card padding 28px. Max grid width: 1100px. Cards have equal aspect ratios maintained via aspect-ratio: 4/5 on desktop. Footer: minimal, single line of text. ## Typography and Palette **Fonts:** - **Display/Headlines:** "Be Vietnam Pro" (Google Fonts) -- a modern sans-serif with grotesque characteristics, used at clamp(28px, 4vw, 52px). Weight 700. The clean, slightly industrial character matches mid-century design aesthetics. - **Body text:** "Noto Sans" (Google Fonts) -- a versatile sans-serif at 15px/1.65 line-height. Weight 400 for body, 600 for emphasis. Its neutrality lets the display type and layout do the expressive work. - **Accent/Numbers:** "DM Mono" (Google Fonts) -- a monospace at 18px for counter-animated numbers and technical data. Weight 500. Clean numeral forms for animated counting. **Color Palette:** - **Background warm white:** #f8f5f0 (off-white with warm undertone) - **Card surface:** #f0ece4 (slightly aged paper tone) - **Neon electric orange:** #ff6b35 (primary accent -- used sparingly for maximum impact) - **Neon electric dimmed:** #cc5528 (darker orange for hover states) - **Text primary:** #2a2a28 (near-black for body text) - **Text secondary:** #6a6a64 (medium gray for metadata) - **Line rule:** #c8c4bc (warm gray for grid lines, rules) - **Tech accent:** #4a4a44 (dark gray for technical illustrations) ## Imagery and Motifs **Core visual motifs:** - **Paper-aged card textures:** Each card background has a subtle noise texture (CSS SVG feTurbulence at very low intensity) in warm cream tones, creating the feel of vintage print advertisements on slightly yellowed paper. - **Tech line illustrations:** Small, precise technical drawings (gears, cross-sections, geometric constructions) rendered as single-weight SVGs (1px stroke, #4a4a44) placed within cards or in the tech accent strip. Style references Dieter Rams' Braun product manuals. - **Counter-animate numbers:** Numeric content within cards counts up from 0 on scroll intersection. Uses requestAnimationFrame with ease-out timing over 1.5s. Numbers rendered in monospace (DM Mono) for stable width during animation. - **Neon electric as singular accent:** The neon orange is used for exactly one element per viewport -- a heading, a number, a border -- creating a "one" motif through color scarcity. The restraint makes each orange element feel precious. ## Prompts for Implementation **Mid-century exhibition catalog:** The site should feel like browsing a beautifully printed exhibition catalog from 1963. Cards are individual exhibit pieces. The grid is the gallery wall. The neon orange is the exit sign that guides your eye. **Card grid implementation:** - .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; max-width: 1100px; margin: 0 auto; } - .card { aspect-ratio: 4/5; padding: 28px; background: #f0ece4; } - No borders, no shadows -- cards differentiate through color alone. **Paper texture:** - Apply via CSS: background-image with SVG data URI containing feTurbulence (baseFrequency="0.9", numOctaves="4") rendered at 0.08 opacity, blended with base cream color. **Counter-animate:** - Intersection Observer triggers on .counter elements. - JavaScript: animate from 0 to data-target over 1500ms. - Easing: cubic-bezier(0, 0, 0.2, 1) (fast start, slow finish). - Update element.textContent each frame. **Single-accent orange rule:** - Only one element per visible viewport should use #ff6b35. - Implement via Intersection Observer: when multiple orange elements are visible, dim all but the most recently entered (opacity: 0.3 on others). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, excessive color usage. Maximum restraint, maximum impact. ## Uniqueness Notes **Differentiators from other designs:** 1. **Single-accent color rule (one orange element per viewport):** Programmatically ensuring only one element uses the neon accent color at any time creates a unique focusing mechanism that literally embodies the ".one" in the domain name. 2. **Mid-century technical illustrations as card content:** Using Dieter Rams-style technical line drawings (gear cutaways, geometric constructions) within exhibition-style cards creates a specific mid-century industrial design vocabulary. 3. **Counter-animated numbers in an exhibition context:** Numeric animation within a static, print-inspired card grid creates a surprising digital moment within an otherwise analog-feeling experience. **Chosen seed/style:** aesthetic: mid-century, layout: card-grid, typography: sans-grotesk, palette: neon-electric, patterns: counter-animate, imagery: paper-aged, motifs: tech, tone: luxurious **Avoided overused patterns:** photography imagery (90%), centered layout (98%), warm palette (94%), parallax patterns (99%), mono typography (81%), mysterious-moody tone (70%).