# Design Language for gur.al ## Aesthetics and Tone A brutalist-industrial portal that treats the domain "gur.al" as an ancient cipher -- raw concrete textures meet copper-wire circuitry in a design that evokes abandoned telegraph stations repurposed as digital archives. The aesthetic is industrial-raw: exposed grid lines, monospaced data readouts, and oxidized metal gradients create an environment where information feels physically etched rather than digitally rendered. Heavy horizontal rules and stamped letterforms suggest machinery and permanence. The tone is stoic-archival -- measured, authoritative, and deliberately unhurried, as if each piece of content has survived decades of transmission. ## Layout Motifs and Structure The layout uses a **magazine-grid** architecture -- a 12-column CSS grid where content blocks snap to varying column spans, creating an editorial rhythm reminiscent of broadsheet newspapers and technical manuals. **Grid System:** - 12-column grid with 16px gutters on a max-width 1200px container - Hero section spans full 12 columns with a centered monospaced title block - Content cards alternate between 4-column, 6-column, and 8-column spans - A persistent 1px horizontal rule separates each row of content - Sidebar metadata occupies 3 columns on the right, fixed on scroll **Section Flow:** 1. **Header Bar:** A thin 48px strip with the domain in monospace, left-aligned. A copper-colored 2px bottom border. 2. **Hero Block:** Full-width. The word "GUR.AL" rendered at 8rem in condensed type, with a background of repeating thin horizontal lines (1px, 8px apart) in copper (#b87333) at 15% opacity. 3. **Content Grid:** Mixed-width cards with heavy borders (2px solid #2a2a2a). Cards have no border-radius -- sharp corners only. Each card has a small stamped index number in the top-left corner. 4. **Archive Footer:** A dense, data-table-style footer with metadata in 4 tight columns, evoking a library catalog card. ## Typography and Palette **Typography:** - **Headlines:** "IBM Plex Mono" (Google Fonts) -- an industrial monospace that reinforces the brutalist-archival character. Used at 2rem-8rem, weight 700, letter-spacing: 0.05em, line-height 1.0, text-transform: uppercase. - **Body:** "IBM Plex Sans" (Google Fonts) -- the sans companion for readable body text within the industrial system. Used at 1rem, weight 400, line-height 1.7. - **Data/Index:** "IBM Plex Mono" at 0.75rem, weight 400, for metadata, index numbers, timestamps. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Concrete Dark | Near-black | #1a1a1a | Primary background | | Concrete Mid | Dark gray | #2a2a2a | Card borders, dividers | | Concrete Light | Medium gray | #4a4a4a | Secondary backgrounds | | Copper | Oxidized copper | #b87333 | Primary accent, hover states | | Copper Light | Bright copper | #d4956a | Active states, highlights | | Patina | Verdigris green | #5a8a6a | Secondary accent, links | | Text Primary | Off-white | #e8e4e0 | Body text | | Text Muted | Warm gray | #8a8480 | Metadata, captions | ## Imagery and Motifs **Horizontal Line Textures:** The primary visual motif is dense horizontal rules -- thin 1px lines repeated at 6-8px intervals, rendered in copper at 10-15% opacity. These create a subtle lined-paper or telegraph-tape texture behind content sections. **Stamped Index Numbers:** Each content card carries a large, faded index number (01, 02, 03...) in the background, rendered at 6rem in IBM Plex Mono at 5% opacity, positioned top-left. This creates a systematic, archival feel. **Copper Wire Accents:** Decorative SVG paths drawn as thin copper lines (#b87333, 1px) connecting card corners to the grid edges, suggesting wiring diagrams. These are static, not animated. **Border-Heavy Cards:** Cards use 2px solid borders with no radius, no shadows. On hover, the border transitions from #2a2a2a to #b87333 over 200ms, and the stamped index number brightens to 15% opacity. ## Prompts for Implementation Build the page as a brutalist archive terminal. The grid should feel rigid and mechanical -- no curved edges, no gradients on cards, no playful animations. Content blocks snap to the 12-column grid with mathematical precision. The horizontal line texture behind the hero creates depth without using gradients or images -- just repeated 1px borders via a CSS repeating-linear-gradient. The copper accent color appears sparingly: on the header border, on hover states, and on the wire-diagram SVG paths. The overall impression should be of a well-maintained industrial system -- functional, precise, and built to last. Avoid rounded corners, gradient backgrounds, card shadows, and decorative illustrations. ## Uniqueness Notes 1. **Brutalist-industrial aesthetic with copper accents:** The combination of raw concrete textures with oxidized copper creates a unique material palette rarely seen in web design. 2. **Magazine-grid with stamped index numbers:** The editorial grid layout combined with large faded index numbers creates an archival system aesthetic. 3. **Telegraph-tape horizontal line textures:** Using repeating thin horizontal lines as a background motif evokes analog transmission technology. 4. **Stoic-archival tone:** The measured, unhurried communication style contrasts with the urgency typical of modern web design. Document chosen seed/style: aesthetic: brutalist, layout: magazine-grid, typography: mono-industrial, palette: copper-concrete, patterns: border-heavy, imagery: line-texture, motifs: wire-diagram, tone: stoic-archival Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)