# Design Language for xity.one ## Aesthetics and Tone Brutalist neubrutalism meets sunset warmth — raw, confrontational structure softened by volcanic amber and burnt coral heat. The site radiates bold-confident energy: unapologetically heavy borders, exposed grid scaffolding, and hard-edged hexagonal cells that glow as if lit from within by a dying sun. Inspiration draws from urban concrete architecture bathed in golden-hour light, brutalist zines printed on sun-bleached paper, and the cracked-heat texture of desert asphalt at dusk. Nothing is hidden, nothing is polished away — every structural decision is visible and intentional. The tone is declarative and authoritative: xity.one occupies space without apology. ## Layout Motifs and Structure The primary structural motif is a hexagonal honeycomb grid — interlocking hex cells arranged in offset rows that tile edge-to-edge across the viewport. Each cell is a discrete content unit with a thick 3px border (color: #2d1a0e) and visible drop shadow offset at 4px/4px creating a flat-press brutalist depth effect. The grid does not center-align conventionally: it bleeds past viewport edges, implying infinite extension beyond the frame. Navigation uses a single sticky horizontal bar with all-caps mono labels, pinned flush against the top edge with a 4px bottom border. Section transitions are hard cuts — no gradients between regions, just abrupt boundary lines. The hero occupies a full-bleed hex cell cluster spanning 3 rows and 5 columns, with overlapping organic blob shapes layered beneath the text as background fill. Below the hero, a 4-column hex grid holds secondary content. The footer is a single full-width hex row with content packed left. ## Typography and Palette **Typefaces (Google Fonts only):** - Primary: "Space Mono" — used for all headings, navigation, and UI labels at weights 400 and 700. All caps for headings above 2rem. - Secondary: "Roboto Mono" — used for body text, captions, and fine print at weight 400. - Accent/Display: "Share Tech Mono" — used for oversized single-word display moments (hero word, section openers) at enormous scale (clamp 8rem–20vw). **Palette — Sunset Warm:** - `#FF4E1A` — volcanic orange-red (primary accent, hex cell borders on active/hover) - `#FF8C42` — sunset amber (secondary accent, large display text color) - `#FFD166` — golden hour yellow (highlight fills inside hex cells, blob fills at 40% opacity) - `#2D1A0E` — deep charcoal-brown (primary border color, body text, structural lines) - `#FFF3E0` — warm ivory (page background — not pure white, carries warmth) - `#C0392B` — deep crimson (error state, lens-flare radial overlay accent) - `#1A0A00` — near-black brown (footer background, max-contrast text) ## Imagery and Motifs **Organic Blobs:** SVG blob shapes generated with border-radius polygon path curves — not circles, not rectangles. 3–5 blobs per section layered at z-index -1 beneath hex cells. Colors pull from sunset palette at 25–50% opacity. Blobs animate slowly (20–40s infinite rotate-morph loop using CSS keyframes with filter: blur(1px) applied). **Lens Flare:** Radial gradient lens-flare bursts placed at key focal points — hero top-right, and at the intersection of content sections. CSS radial-gradient with `#FFD166` center → `#FF8C42` mid → transparent edge. Multiple overlapping flare rings (4–6 layers) at different scales create a believable optical artifact. One large flare (800px diameter) anchored bottom-left of hero. **Border Animation:** Hex cell borders pulse using a CSS @keyframes animation cycling the border-color through `#FF4E1A` → `#FF8C42` → `#FFD166` → `#FF4E1A` on a 3s loop. Active/focused cells have the animated border; idle cells have static `#2D1A0E` borders. On hover, a cell's border switches to animated within 0.15s. **Texture Overlay:** A subtle noise/grain CSS background (SVG feTurbulence filter or repeating tiny dot pattern) at 3% opacity applied to the page background to simulate brutalist printed-matter texture. **Iconography:** None. No icon libraries. All UI indicators are typographic — arrows are typed `→`, bullets are `■`, section markers are `//`. ## Prompts for Implementation - **Hex Grid:** Implement using CSS clip-path `polygon()` with offset row positioning. Each hex cell is a `div` with `clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)`. Use CSS Grid with `grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))` and offset odd rows using `margin-top: -45px; margin-left: 90px`. - **Border Animate Pattern:** Apply `animation: hexPulse 3s ease-in-out infinite` via @keyframes cycling border-color values. Only cells in viewport trigger animation (use IntersectionObserver to add/remove `is-active` class). - **Organic Blobs:** Use CSS `border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%` on colored divs and animate with `@keyframes blobMorph` cycling through 4 different border-radius shapes over 25s. Apply `transform: rotate(0deg) scale(1)` → `rotate(360deg) scale(1.05)` on alternate keyframe. - **Lens Flare:** Layer `radial-gradient(ellipse 800px 400px at 80% 20%, rgba(255,209,102,0.35) 0%, rgba(255,140,66,0.15) 40%, transparent 70%)` as `::before` pseudo-element on hero section. Stack 3–4 such gradients at varying positions and opacities for multi-ring flare. - **Typography Scale:** `--font-display: clamp(4rem, 15vw, 12rem)` for hero word. `--font-heading: clamp(1.5rem, 4vw, 3rem)` for section titles. `--font-body: 0.95rem` for all body copy. Line-height: 1.3 for headings, 1.6 for body. - **Brutalist Border Treatment:** All structural containers get `border: 3px solid #2D1A0E; box-shadow: 4px 4px 0 #2D1A0E`. On hover, `box-shadow: 6px 6px 0 #FF4E1A`. No border-radius except on blob elements. - **Narrative Flow:** The page opens with a single massive typography word ("CITY" or a brand word) across the full hero hex cluster, overlaid with lens-flare and blob backgrounds. Scrolling into the hex content grid reveals each cell with a stagger animation (`animation-delay: calc(var(--i) * 0.08s)` with `transform: translateY(20px) → translateY(0)`). The experience should feel like walking through an illuminated brutalist structure at sunset — hard forms, warm light. - **AVOID:** No call-to-action button grids. No pricing tables. No testimonial carousels. No stock photo backgrounds. No rounded card shadows. No soft gradients as section backgrounds. ## Uniqueness Notes 1. **Hexagonal honeycomb as primary structural system** — not decorative but functional, every piece of content lives inside a hex cell. This is rare (only 4% frequency) and pairs unexpectedly with brutalist aesthetics. 2. **Brutalist + Sunset Warm palette collision** — most brutalist designs use monochrome or stark blue/black. The volcanic orange/amber/ivory palette gives brutalism unusual warmth and emotional heat. 3. **Lens flare as structural element** — typically decorative; here it acts as a wayfinding beacon marking section transitions within the hex grid. 4. **All-mono typography stack (Space Mono + Roboto Mono + Share Tech Mono)** — three monospace fonts differentiated by weight and scale, creating a code-terminal aesthetic within a bold visual system. 5. **Organic blobs underneath hard hex geometry** — the tension between the rigid hexagonal grid and the freely morphing organic blob backgrounds creates deliberate visual contradiction: machine vs. nature, city vs. wilderness. 6. **Planned seed:** aesthetic: brutalist, layout: hexagonal-honeycomb, typography: mono, palette: sunset-warm, patterns: border-animate, imagery: lens-flare, motifs: organic-blobs, tone: bold-confident 7. **Avoided overused patterns:** parallax (73%), photography imagery (87%), mono typography as generic (74% but all three fonts are monospace specialists, not the generic sans-mono default), stagger (50% — used only on hex grid reveal, not globally).