# Design Language for alth.ing ## Aesthetics and Tone alth.ing evokes the Althing -- the ancient Icelandic parliament founded in 930 AD at Thingvellir, the world's oldest surviving legislative assembly. The visual language channels the monumental clarity of Bauhaus institutional design (think Dessau's geometric facades) transplanted to Iceland's volcanic landscape: basalt column formations, glacial ice shelves, and the aurora borealis rippling over lava fields. Imagine a civic archive designed by Walter Gropius using only materials found in Iceland -- stacked basalt slabs for shelves, ice-blue glass panels, aurora-lit corridors. The tone is optimistic-bright and scholarly -- the excitement of democratic innovation, the pride of a thousand-year legacy. Every design element reflects structured governance: grids suggest parliamentary procedure, type hierarchies mirror legislative authority, and the palette draws directly from Icelandic geography. This is not nostalgic recreation but a Bauhaus reinterpretation of Viking-age civic ideals for the digital era. ## Layout Motifs and Structure The layout employs a **portfolio-grid** system inspired by the columnar basalt formations of Svartifoss and Reynisfjara. Content is organized in tall, narrow vertical columns that stand side by side like basalt pillars, creating a geological rhythm across the viewport. **Primary structure:** - **Opening viewport (100vh):** A panoramic Icelandic landscape abstracted into geometric Bauhaus blocks -- a horizon line at 40% viewport height divides a luminous aurora-gradient sky from a dark basalt-textured ground. The "alth.ing" logotype sits at the intersection of sky and earth, rendered in heavy slab-serif at massive scale (clamp(60px, 10vw, 140px)), with each letter appearing to be carved from stone -- inner shadows, subtle beveling, muted ochre fill. - **The Assembly Floor (main grid):** A 5-column portfolio grid (desktop) collapsing to 2 columns (tablet) and single column (mobile). Each column is a "pillar" with a thin basalt-dark border (#1C1C1E) and contains a vertically stacked sequence of content blocks. Column heights vary deliberately (some taller, some shorter) like natural basalt formations. Each content block has a colored header bar -- alternating between Aurora Green, Glacier Blue, and Ochre Gold. - **The Law Rock (featured section):** A full-width break in the grid -- a single massive panel representing the "Logberg" (Law Rock) where laws were recited. This section uses oversized display typography for key quotes or statements, centered on a basalt-textured background with an isometric projection effect (CSS transform: rotateX(5deg) perspective(800px)). - **The Chronicle (timeline):** A vertical timeline along the left margin traces the history of parliamentary democracy. Each node is a small isometric icon representing an era. The timeline uses slab-serif year labels and brief descriptions in body text. - **Bedrock (footer):** A dark volcanic section (#0D0D0F) with hexagonal basalt column cross-sections rendered as an SVG pattern -- a tessellating grid of hexagons in dark grays. Contact and attribution information sits within these hexagonal cells. ## Typography and Palette **Fonts:** - **Headlines:** "Roboto Slab" (Google Fonts) -- a geometric slab-serif with Bauhaus-compatible clean lines and authoritative weight. Weight 700 for primary headings, 500 for subheadings. Size: clamp(28px, 4.5vw, 80px). Letter-spacing: 0.01em. The slab serifs evoke carved runic inscriptions reinterpreted through a modernist lens. - **Body text:** "Source Sans 3" (Google Fonts) -- a clean, highly readable humanist sans-serif with excellent weight range. Weight 400, line-height: 1.75, size: clamp(15px, 1.1vw, 17px). Its rational, functional character embodies the Bauhaus design-for-purpose ethos. - **Data/Annotations:** "Overpass Mono" (Google Fonts) -- a geometric monospace that shares proportional DNA with the slab-serif headlines. Used for dates, reference numbers, and timeline markers. Size: 13px, weight 600, letter-spacing: 0.04em. Rendered in Aurora Green. **Palette:** - **Basalt Dark:** #1C1C1E -- primary background, volcanic stone - **Obsidian Black:** #0D0D0F -- deep background, footer, overlays - **Aurora Green:** #3DDC84 -- primary accent, life, growth, democratic optimism - **Glacier Blue:** #64B5F6 -- secondary accent, ice, clarity, transparency - **Ochre Gold:** #FFB74D -- tertiary accent, warmth, historical continuity - **Lava Grey:** #424242 -- mid-tone, borders, secondary text - **Snow White:** #F5F5F5 -- primary text, clean contrast ## Imagery and Motifs **Core visual motifs:** - **Basalt column patterns:** SVG hexagonal tessellation patterns used as section backgrounds, footer decoration, and decorative borders. The hexagons are rendered in varying shades of grey (#1C1C1E to #424242) with thin stroke borders, creating a geological texture. Some hexagons are filled with aurora-gradient color to create focal points. - **Isometric icons:** Instead of flat icons, all visual symbols use isometric projection (30-degree axonometric) -- miniature 3D-looking buildings, books, scrolls, and parliamentary symbols rendered in clean vector lines (2px stroke in Snow White or Aurora Green). These icons mark timeline nodes, category headers, and navigation elements. - **Aurora gradient bands:** Horizontal bands of color that shift from Aurora Green through Glacier Blue to Ochre Gold, used as section dividers and loading indicators. Implemented as CSS linear-gradients with animated background-position to create a slow shimmer effect (60s infinite animation cycle). - **Runic line decorators:** Thin decorative lines inspired by Icelandic runic patterns -- geometric angular paths (no curves, only 45/90-degree angles) rendered as SVG paths in Ochre Gold at 40% opacity. Used as borders around the Law Rock section and as dividers between chronicle entries. - **Tectonic rift line:** A thin vertical crack running down the center of certain sections (referencing the Thingvellir tectonic rift), rendered as an SVG path with slight randomized jitter. Colored with a glow effect: 1px line in Aurora Green with a 4px blur shadow. ## Prompts for Implementation **Full-screen narrative opening:** The page loads to the Basalt Dark background. The horizon line draws itself (left to right, 800ms, SVG line with stroke-dashoffset). Below the horizon, a basalt texture fades in (opacity 0 to 1, 400ms). Above, the aurora gradient animates into view with a slow vertical wave (CSS keyframes moving background-position-y). The "alth.ing" logotype bounces into position from above (translateY: -40px to 0, bounce-enter easing: cubic-bezier(0.34, 1.56, 0.64, 1), 600ms). **Basalt pillar grid:** Implement the portfolio grid with CSS Grid: `display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;`. Each column is a flex container with `flex-direction: column`. Vary the first visible item's height per column (grid-row: span 2 for some) to create the uneven basalt pillar effect. Column borders are 1px solid #1C1C1E with no border-radius -- sharp, geological edges. **Isometric icon system:** Create icons using SVG with consistent isometric transforms: `transform: rotateX(60deg) rotateZ(45deg)` on a container element, then draw shapes within the isometric plane. Alternatively, use pre-calculated isometric coordinates for each SVG path. Apply bounce-enter animation when icons scroll into view. **Law Rock typography:** The featured section uses Roboto Slab at extreme size (clamp(48px, 8vw, 120px)) with a slight perspective transform. Text appears line by line with stagger animation (each line delayed 200ms, translateY: 20px to 0, opacity 0 to 1). The basalt background texture behind it uses CSS `background-blend-mode: multiply` over a dark base. **Aurora shimmer:** Implement with a wide (200% width) linear-gradient background that animates its position: `@keyframes aurora { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }`. Duration: 60s, infinite, linear. Apply to horizontal divider bands (height: 3px) between major sections. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids. No card-grid with rounded corners. No stock photography. No cursor-follow effects. ## Uniqueness Notes **Differentiators from other designs:** 1. **Basalt column portfolio grid:** The vertical pillar-based grid system with deliberately uneven column heights mimicking natural basalt formations is structurally unique. No other design uses geological formations as a literal layout metaphor. 2. **Isometric icon system:** While isometric elements appear in the seed vocabulary, no other design in the collection commits to a full isometric icon language with consistent axonometric projection across all visual symbols. 3. **Tectonic rift as design element:** The thin glowing crack running through sections -- referencing the actual geological rift at Thingvellir where the Althing met -- is a site-specific design element that ties physical geography to digital layout in a way no other design attempts. 4. **Bauhaus-meets-Viking civic architecture:** The fusion of early 20th-century institutional modernism with 10th-century Icelandic democratic tradition creates an aesthetic crossover that is historically specific and visually distinct from any other design in the collection. **Planned seed:** bauhaus, portfolio-grid, slab-serif, aurora-gradient, bounce-enter, isometric-icons, book-scholarly, optimistic-bright **Avoided overused patterns:** centered as sole layout, card-grid, parallax scrolling, cursor-follow, mono typography, photography imagery, gradient-only palette, mysterious-moody tone