# Design Language for a6c.dev ## Aesthetics and Tone a6c.dev is a personal developer space that feels like peering into a living mathematical organism. The domain -- six characters of pure alphanumeric compression -- demands a design language built from the same ethos: density that reveals beauty when you look closely enough. The visual direction draws from the tradition of generative art systems: Conway's Game of Life, reaction-diffusion patterns, Perlin noise fields, and the strange organic structures that emerge when simple rules iterate thousands of times. Imagine a page where the background itself is alive -- not flashy, not performative, but quietly computing, quietly evolving, like the screen of a researcher's terminal left running overnight, revealing at dawn that the simulation has produced something unexpectedly gorgeous. The tone is **calm-serene** with an undercurrent of intellectual curiosity. Not cold, not sterile -- warm in the way that watching a campfire or a lava lamp is warm. There is a sense of patience here, of processes that unfold over time. The user should feel as if they've entered a space where time moves differently, where the digital substrate has been given permission to breathe and grow. This is not a portfolio shouting for attention; it is a garden that rewards contemplation. ## Layout Motifs and Structure The layout follows a **bento-box** composition wrapped in an **organic-flow** progression. Rather than a single scrolling column or a rigid grid, content is arranged in discrete rectangular cells of varying proportions -- some wide and shallow, some tall and narrow, some square -- arranged in a way that suggests a Japanese bento or a Mondrian painting, but with rounded corners and generous spacing that softens the geometry. **Primary structure:** - **The Canvas Layer**: Behind everything, occupying the full viewport, sits a persistent generative art canvas. This is not a static background image. It is a continuously evolving pattern -- a reaction-diffusion simulation rendered in the site's color palette at low saturation. It moves slowly, like clouds or smoke. As the user scrolls, the simulation parameters shift subtly (the feed rate, the kill rate), causing the pattern to transition between spots, stripes, and labyrinthine forms. The canvas never repeats. It is unique to every visit. - **The Bento Surface**: Floating above the canvas, a collection of content cells arranged in a bento-box grid. On desktop, this is a 12-column CSS Grid with cells spanning 2-6 columns and 1-3 rows. Cells have semi-translucent backgrounds (rgba with 0.85 alpha) and a frosted-glass blur effect (backdrop-filter: blur(12px)) so the generative canvas bleeds through slightly, giving each cell a living, breathing quality. Cells are separated by 16px gaps that reveal slivers of the canvas beneath. - **The Identity Cell**: The top-left cell is always the largest (spanning 6 columns, 2 rows). It contains only the "a6c" logotype rendered in a single oversized geometric sans character treatment, plus a single sentence of description. No navigation links, no hamburger menu. Navigation exists as subtle labels along the right edge of the viewport, styled as axis markers on a graph. - **Content Cells**: Remaining cells contain project descriptions, writing excerpts, and generative art experiments. Each cell is self-contained -- a micro-composition. Some cells are purely visual (a small embedded generative sketch), some are text-only, some combine both. The variety in cell content and proportion creates rhythm without symmetry. - **Mobile Adaptation**: On mobile, the bento collapses to a single column of stacked cells with full width, but each cell retains its internal composition. The generative canvas continues behind, now with touch-reactive parameters (tap to perturb the simulation). ## Typography and Palette **Typography:** - **Display / Logotype**: "Space Grotesk" (Google Fonts) -- a proportional sans-serif with geometric DNA and a distinctly technical personality. Used for the "a6c" logotype and section headings. Set at extreme sizes for the logo (clamp(5rem, 12vw, 14rem)) with letter-spacing: -0.04em for tight, confident packing. Its open apertures and squared terminals echo the hexadecimal feel of the domain name. - **Body / Prose**: "IBM Plex Sans" (Google Fonts) -- a neo-grotesque designed for sustained reading on screens, with humanist touches that keep it from feeling robotic. Set at 17px/1.75 line-height. Its relationship to IBM's engineering heritage creates a subtle narrative connection to computation without being as overused as system monospace fonts. - **Accent / Code / Labels**: "JetBrains Mono" (Google Fonts) -- a developer-focused monospace with increased x-height and distinctive ligatures. Used sparingly for inline code references, axis labels on the navigation, and metadata within content cells. Set at 13px with letter-spacing: 0.02em. **Palette:** The palette is built around the concept of **bioluminescence** -- the light that living organisms produce in deep ocean darkness. Cool and muted as a foundation, with isolated moments of warm luminous intensity. | Role | Color | Hex | |------|-------|-----| | Deep substrate | Near-black with blue undertone | #0a0e1a | | Canvas organisms | Muted teal-gray | #2a4a4f | | Canvas accent | Oxidized copper green | #3d7a6e | | Cell background | Dark translucent slate | rgba(16, 22, 36, 0.85) | | Primary text | Warm off-white | #e8e4dc | | Secondary text | Faded silver-blue | #8b99a8 | | Bioluminescent accent | Living cyan | #00e5c7 | | Warm spark | Amber phosphorescence | #f5a623 | | Alert / emphasis | Coral pulse | #e8574a | The bioluminescent cyan (#00e5c7) appears only in moments of interaction or emphasis -- hovered links, active navigation markers, the glow around a cell when it is in focus. It should feel earned, not ubiquitous. The amber (#f5a623) is rarer still -- used only for the most important call to presence (not call to action), such as a currently active project badge or a "now" indicator. ## Imagery and Motifs **Core Visual Motifs:** - **Reaction-diffusion patterns**: The primary visual identity of the site. These Alan Turing-inspired patterns (spots, stripes, and labyrinths that emerge from two interacting chemical species) are rendered in real-time on a `` element using WebGL shaders. The patterns use the palette's teal and copper-green tones against the deep substrate, creating an effect reminiscent of lichen on stone or coral under UV light. Parameters shift based on scroll position and time of day -- morning visitors see more spotted patterns (suggesting seeds, beginnings), evening visitors see more labyrinthine forms (suggesting complexity, depth). - **Cellular boundaries**: The bento-box cells have borders that are not simple CSS borders. Instead, each cell's edge is rendered as a thin (1px) line that occasionally "pulses" -- brightening to the bioluminescent cyan for a fraction of a second before fading back to the base dark tone. These pulses propagate from cell to cell like signals in a neural network, triggered at random intervals (every 4-8 seconds). The effect is subliminal: the grid feels alive without being distracting. - **Cursor organism**: On desktop, the cursor leaves a temporary trace on the generative canvas -- a small perturbation in the reaction-diffusion field that slowly dissipates. The user literally touches the living background. The trace uses the warm amber tone briefly before being absorbed back into the pattern. This is not a particle trail or sparkle effect; it is an intervention in a simulation. - **Typographic specimens**: Scattered within content cells, single characters or short words from Space Grotesk are displayed at enormous scale (200-400px) in the muted teal, partially clipped by their cell boundaries. These serve as both decoration and wayfinding -- the visible portion of a giant letter hints at the section's theme (an "R" for research, a "W" for writing, a "G" for generative experiments). - **No photographs. No icons from libraries.** All imagery is either generative (canvas-based), typographic (oversized letterforms), or structural (the grid itself). This reinforces the site's identity as a space built from code, not assembled from assets. ## Prompts for Implementation **Narrative Structure:** The site is not a traditional portfolio with hero-about-projects-contact flow. It is a **single-screen bento composition** that reveals depth through interaction rather than scrolling. On initial load, the user sees the full bento grid with the generative canvas behind it. Scrolling does not move to new sections -- instead, it adjusts the generative canvas parameters and shifts which cells are "foregrounded" (slightly larger, brighter borders, revealed content). The experience is more like navigating a living map than reading a document. **Animation Philosophy:** 1. **Morph transitions**: When a user clicks a content cell, it morphs smoothly to fill the viewport (using FLIP animation technique or CSS `view-transition-api`). The other cells fade to near-invisibility but remain as dim outlines on the edges. The generative canvas continues behind the expanded cell. Clicking again (or pressing Escape) morphs back. This is the primary interaction pattern -- expand, read, collapse. 2. **Blur-focus depth**: Cells that are not currently "active" (neither hovered nor expanded) exist in a subtle blur state (filter: blur(1px) and opacity: 0.9). When hovered, they snap to focus (blur(0), opacity: 1) with a 200ms ease-out. This creates a depth-of-field effect that makes the bento grid feel three-dimensional. 3. **Zoom-focus on generative details**: Double-clicking on the generative canvas (in the gaps between cells) triggers a smooth zoom into that region of the simulation, with cells sliding out of view. The user can explore the generative art full-screen, then scroll or click to return. The simulation at close range reveals fractal-like detail. 4. **Cellular pulse propagation**: The border pulse effect uses CSS custom properties and `@keyframes` with `animation-delay` calculated per-cell based on distance from the origin cell. When a pulse is triggered (randomly, or by user interaction with a cell), it spreads outward through adjacent cells with a 100ms delay per hop, creating a wave effect across the grid. 5. **Time-based evolution**: The generative canvas subtly shifts its color mapping over the course of a day. Visiting at different hours produces a different ambient atmosphere. This is achieved by passing `new Date().getHours()` as a uniform to the WebGL shader and using it to rotate the hue mapping. **Technical Guidance:** - The reaction-diffusion simulation should use a ping-pong framebuffer technique in WebGL for performance. Target 60fps at 1/4 resolution, upscaled with bilinear filtering. - The bento grid should use CSS Grid with `grid-template-areas` for semantic layout and `grid-auto-flow: dense` for optimal packing. - Cell translucency requires `backdrop-filter: blur(12px)` -- test in Safari (which pioneered this) and Chrome. Provide a solid fallback for Firefox if needed. - The morph transition on cell expansion should use the View Transitions API where supported, with a FLIP fallback. - All generative parameters should be seedable from the URL hash (e.g., `a6c.dev/#seed=42`) so users can share specific states. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, newsletter signup modals, hero sections with stock photography, cookie banners that obscure the experience, hamburger menus, footer link farms. ## Uniqueness Notes **Differentiators from other designs:** 1. **Living generative background as primary identity**: While other designs use static gradients, photography, or decorative illustrations, a6c.dev's entire visual identity is a real-time simulation that is never the same twice. The generative canvas is not decoration -- it IS the design. It responds to time, scroll position, and cursor movement. No other design in the portfolio uses a persistent, interactive, mathematically-driven background as its foundational visual element. 2. **Bento-box spatial composition instead of scroll-based narrative**: Rather than the dominant immersive-scroll or full-bleed patterns (which appear in 45-65% of existing designs), a6c.dev uses a single-screen bento grid where depth is achieved through cell expansion (morph) and focus shifting (blur-focus), not vertical scrolling. The user navigates spatially, not sequentially. This is aligned with the underused bento-box layout pattern (5%). 3. **No imagery from external sources whatsoever**: Every visual element is either generated by code (reaction-diffusion canvas), derived from typography (oversized letterforms), or structural (the grid itself). This is a zero-asset design -- the entire visual experience could be recreated from a single HTML file with inline styles and scripts. This purity of means is unique in the portfolio. 4. **Time-of-day responsive atmosphere**: The site looks and feels different depending on when you visit. Morning visits produce sparse, spotted patterns in lighter tones; evening visits produce dense, labyrinthine patterns in deeper tones. This is not a dark-mode toggle -- it is a continuous, automatic evolution that makes the site feel like a living space rather than a static document. 5. **Cursor as simulation participant**: The cursor does not merely hover over elements -- it perturbs the underlying generative system. Users leave temporary marks on the living canvas, creating a sense of physical presence in a digital space that goes beyond standard cursor-follow effects (which appear in 30% of existing designs). This is an intervention, not an animation. **Chosen seed/style:** generative art background **Avoided patterns from frequency analysis:** - Avoided corporate aesthetic (75% overused) -- chose calm-serene generative instead - Avoided photography/minimal imagery (85%/70% overused) -- all imagery is code-generated - Avoided card-grid/centered layouts (85%/80% overused) -- used bento-box (5%) with organic-flow - Avoided gradient/warm/muted palettes (95%/90%/70% overused) -- used cool bioluminescent palette with analogous teal-copper range - Avoided mono typography (75% overused) -- used geometric-sans (Space Grotesk, 5%) as primary with JetBrains Mono only for code/labels - Avoided scroll-triggered as primary pattern (90% overused) -- primary patterns are morph (5%), blur-focus (5%), and zoom-focus (5%)