# Design Language for a6c.dev ## Aesthetics and Tone a6c.dev channels the spirit of the Bauhaus school -- where form follows function with mathematical precision, where every circle, square, and line serves both aesthetic and structural purpose. The visual identity draws from Josef Albers' color interaction studies, Herbert Bayer's universal typeface experiments, and the Dessau building's clean geometric facades. As a developer-facing domain, the Bauhaus philosophy of unifying craft with industrial precision maps perfectly: code is craft, structure is art. The tone is tech-tutorial -- instructive, clear, and methodical. Information is presented with the confidence of a well-organized technical reference, but the Bauhaus visual layer adds warmth and artistic intention. Imagine MDN Web Docs redesigned by Moholy-Nagy: every diagram is a composition, every code block is framed by considered geometry. ## Layout Motifs and Structure The layout follows an **f-pattern** reading structure -- acknowledging how developers scan documentation: eyes track across the top, then down the left edge, making horizontal forays into content. This natural reading behavior is reinforced rather than fought. **Primary structure:** - **Top bar (8vh):** A persistent horizontal band containing the "a6c" mark (rendered as three overlapping Bauhaus circles in primary colors) and minimal navigation as text links in a single row. - **Left rail (220px, fixed):** A vertical navigation column with section links styled as geometric labels -- each link preceded by a small colored shape (circle, square, triangle) that corresponds to its content category. This rail scrolls independently. - **Main content area:** Content flows in a single-column within the remaining space, with generous left margin (clamp(24px, 4vw, 80px)) that creates breathing room against the nav rail. - **Geometric section dividers:** Between major content blocks, full-width SVG compositions of Bauhaus-inspired shapes (overlapping circles, right-angle lines, primary-color blocks) serve as visual breathing points. These are not decorative afterthoughts but compositional elements that echo the content's themes. - **Code blocks:** Styled as recessed panels with a 2px left border in Deep Ocean blue, set in a slightly darker background (#0A1628) to create the impression of looking into a depth layer. ## Typography and Palette **Fonts:** - **Headlines:** "Commissioner" (Google Fonts) -- a versatile variable font with a wide weight range (100-900). Used at weight 700 for section titles and 300 for subtitles. Its geometric underpinnings align with Bauhaus principles while remaining highly legible. Size: clamp(28px, 4vw, 56px). - **Body text:** "IBM Plex Sans" (Google Fonts) -- engineered for technical readability, with a humanist touch that prevents sterility. Weight 400 for prose, 600 for inline emphasis. Line-height: 1.7 for comfortable reading of dense technical content. - **Code/Mono:** "IBM Plex Mono" (Google Fonts) -- paired naturally with its sans sibling for code blocks and inline code. Weight 400, font-size: 0.9em relative to body. Ligatures enabled for common programming sequences. **Color Palette -- Ocean Bauhaus:** - **Deep Ocean:** #16213E -- the primary dark background, evoking depth and focus - **Midnight Ink:** #0F3460 -- secondary dark for code blocks and recessed panels - **Bauhaus Red:** #E94560 -- primary accent for interactive elements, errors, and emphasis - **Signal Blue:** #1A73E8 -- secondary accent for links, active states, and category markers - **Compass Gold:** #F0C040 -- tertiary accent for warnings, highlights, and geometric decorations - **Paper White:** #F4F1EB -- slightly warm white for main content backgrounds - **Graphite:** #2C2C3A -- text color on light backgrounds, softer than pure black ## Imagery and Motifs **Core visual motifs:** - **Primary shape trio:** Circle (Signal Blue), Square (Bauhaus Red), Triangle (Compass Gold) -- these three shapes appear throughout as category markers, decorative elements, and navigation indicators. Each shape is associated with a content type (circle = concepts, square = code examples, triangle = warnings/notes). - **Geometric section illustrations:** Each major section opens with a full-width SVG composition inspired by Bauhaus poster design -- intersecting circles, overlapping rectangles, diagonal lines -- using the three accent colors at varying opacities. These are generative in spirit: built from simple mathematical relationships. - **Leaf-organic accents:** Subtle organic curve elements (SVG paths with bezier curves suggesting leaf veins or branch patterns) overlay the rigid geometry at low opacity (5-8%), creating a tension between natural and mechanical that reflects code's relationship with organic problem-solving. - **Grid overlay:** A faint (#16213E at 3% opacity) grid of thin lines underlies all content areas, making the mathematical structure visible. Grid intersections align with content block corners. - **3D-rendered geometric objects:** Key hero moments feature CSS 3D transforms applied to the primary shapes -- a rotating cube, a spinning circle-to-sphere illusion -- created purely with CSS transforms and gradients, no external assets. - **Blueprint-style diagrams:** Technical explanations are accompanied by line-drawn diagrams styled as architectural blueprints -- white lines on Deep Ocean backgrounds, with dimension annotations in IBM Plex Mono. **Icon treatment:** Monoline SVG icons with 1.5px stroke weight in Signal Blue. Icons use only straight lines and perfect arcs (no freehand curves), maintaining the geometric discipline. ## Prompts for Implementation **Full-screen narrative opening:** The page begins with a full-viewport Deep Ocean background. Three shapes -- circle, square, triangle -- enter from different edges of the screen with elastic easing (CSS spring-like cubic-bezier(0.34, 1.56, 0.64, 1)). They collide at center, overlap to form the "a6c" mark, then settle into their positions. The word ".dev" types itself below in IBM Plex Mono with a blinking cursor that persists for 2s before fading. **Section-by-section reveal:** As the user scrolls, each content section enters with a bounce-enter animation: the section's geometric divider animates first (shapes drawing themselves via stroke-dashoffset), then content fades in with a 200ms delay. Use IntersectionObserver with threshold: 0.15. **Interactive geometry:** The Bauhaus shapes in section dividers respond to scroll position -- circles rotate, squares shift slightly along their axes, triangles tilt -- creating subtle kinetic energy. Use CSS custom properties updated via scroll event (throttled to rAF). **Code block interaction:** Code blocks feature line-number highlighting on hover (background-color transition to Midnight Ink). A small "copy" button appears in the top-right corner on hover, styled as a Bauhaus square icon. **F-pattern reinforcement:** The left navigation rail highlights the current section with a geometric shape that scales up (transform: scale(1.5)) and fills with color. Smooth scroll-spy behavior ties navigation state to scroll position. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids. No hero images with stock photography. No card grids with shadows -- use the Bauhaus geometric language instead of material design elevation. ## Uniqueness Notes **Differentiators from other designs:** 1. **Bauhaus primary-shape category system:** The circle/square/triangle visual language tied to content types (concepts/code/notes) is a unique information architecture device. No other design uses geometric shape categories as a navigation and wayfinding system. 2. **F-pattern with geometric section dividers:** While f-pattern is a known layout, the use of full-width generative Bauhaus compositions as section dividers (rather than simple lines or whitespace) makes each divider a mini-artwork that rewards scrolling. 3. **Blueprint-style technical diagrams:** Styling explanatory diagrams as architectural blueprints (white-on-dark, dimension lines, monospace annotations) creates a visual language specific to this developer-oriented domain. 4. **Elastic shape collision opening:** The three-shape entry animation with spring physics and collision resolution is a distinctive motion design moment that immediately communicates both the geometric aesthetic and the technical precision. 5. **Organic-geometric tension layer:** The barely-visible leaf/branch SVG curves overlaid on rigid Bauhaus geometry creates an unusual visual tension that subtly suggests the organic nature of creative coding. **Planned seed/style:** aesthetic: bauhaus, layout: f-pattern, typography: commissioner-versatile, palette: ocean-deep, patterns: elastic, imagery: 3d-render, motifs: leaf-organic, tone: tech-tutorial **Avoided overused patterns:** Centered layout (90%), card-grid (70%), parallax (85%), scroll-triggered (80%), mono typography (85%), gradient palette (95%), mysterious-moody tone (60%). Instead uses f-pattern (10%), elastic (5%), commissioner-versatile (0%), ocean-deep (10%), and tech-tutorial tone (rare).