# Design Language for continu.ax ## Aesthetics and Tone continu.ax channels an anti-design aesthetic -- a deliberate rejection of conventional polish in favor of raw, honest, confrontational visual language. The domain plays on "continua" (plural of continuum) and the ".ax" TLD evokes an axe, a tool of decisive cutting. Imagine a brutalist concrete gallery where exhibition walls are covered in torn kraft paper, overlapping worksheets, and hand-scrawled mathematical notation about continuous functions. The visual direction draws from David Carson's experimental typography, Wolfgang Weingart's deconstructed Swiss style, and the zine culture of 1990s punk publishing. Colors are earthy and warm, grounded in the material reality of clay, dried leaves, and sun-baked soil. The tone is energetic and urgent -- the site feels like walking into a working studio mid-creation, where continuity and discontinuity are being actively explored, debated, and diagrammed on every surface. ## Layout Motifs and Structure The layout employs a **bento-box** structure -- content is arranged in a grid of differently-sized rectangular compartments, like a Japanese bento or the specimen trays of a natural history museum. Each box contains one discrete idea about continuity. **Primary structure:** - **Hero compartment (100vh):** A single large bento cell fills the viewport. The title "continu.ax" is set in massive expressive type, deliberately off-center (positioned at 15% from left, 35% from top). Behind the text, a hand-torn paper texture (SVG filter simulating ripped edges) creates an irregular frame. The background is warm parchment. - **Bento grid (variable height, ~300vh):** A CSS Grid layout with template areas defining 8-12 compartments of varying sizes (1x1, 2x1, 1x2, 2x2 cells on a 4-column base). Each compartment has a distinct background treatment -- some are solid earthy colors, some have torn paper edges, some contain abstract shape patterns. Content within each compartment is typeset independently, creating a museum-of-ideas feel. - **Continuity strip (100vh):** A full-width horizontal band where a single continuous SVG line draws itself from left to right, never lifting -- the visual embodiment of "continu." This line passes through waypoints labeled with concepts, bending and curving but never breaking. - **Fracture zone (80vh):** The anti-design climax. The bento grid reappears but with deliberate "breaks" -- cells overlap, rotate slightly (2-5deg), and clip into each other. Colors intensify. This represents the ".ax" -- the cutting point where continuity is challenged. - **Grounding footer (40vh):** A calm, warm brown surface with minimal content -- a reset after the fracture zone's intensity. **Spacing philosophy:** Within bento cells, generous internal padding (clamp(20px, 3vw, 40px)). Between cells, a visible gap (8px) filled with the warm parchment background color, creating the bento-box divider effect. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Archivo Black" (Google Fonts) -- an expressive, heavy grotesque that feels bold and confrontational, perfect for anti-design. Weight 400 (it's inherently black-weight). Size clamp(40px, 7vw, 96px). Letter-spacing: -0.04em for aggressive density. Used with deliberate CSS transforms (slight rotations of 1-3deg) for deconstructed placement. - **Body text:** "Work Sans" (Google Fonts) -- a humanist sans-serif with warmth and excellent readability. Weight 400 for body, 600 for emphasis. Size clamp(15px, 1.1vw, 18px). Line-height: 1.65. - **Annotations/Labels:** "Caveat" (Google Fonts) -- a handwritten font that adds a personal, zine-like quality to labels, margin notes, and diagram annotations. Weight 400, size clamp(14px, 1vw, 16px). **Palette:** - **Raw Linen** `#F2E8D5` -- primary background, the color of unbleached linen or kraft paper - **Charred Earth** `#2A1F14` -- primary text, a deep warm brown-black like burnt umber - **Terracotta Blaze** `#C4542A` -- primary accent, the color of fired clay or autumn maple leaves - **Moss Stone** `#6B7B52` -- secondary accent for diagrams, completed elements, and balance - **Ochre Dust** `#D4A03C` -- tertiary accent for highlights, interactive states, and warmth - **Ash Gray** `#9B9486` -- muted neutral for borders, dividers, and inactive elements ## Imagery and Motifs **Core visual motifs:** - **Torn paper edges:** Bento cell boundaries use SVG clipPath with feTurbulence displacement to create torn/ripped paper edges instead of clean rectangles. Each cell's tear pattern is uniquely seeded (different feTurbulence seed values), ensuring no two cells look identical. - **Abstract shapes as section punctuation:** Between bento compartments, abstract shapes (circles cut in half, triangles, organic blobs) in muted colors serve as visual punctuation -- they don't represent anything specific but add rhythm and the deconstructed quality of anti-design. - **Continuous line drawing:** The centerpiece SVG line that draws itself across the continuity strip section. This line is a single SVG path with no breaks, animated via stroke-dashoffset. It uses a hand-drawn stroke effect (stroke-linecap: round, with slight feTurbulence displacement) so it looks sketched rather than mechanical. - **Tropical fish accent:** Small, stylized fish shapes (3-4 simple SVG silhouettes) appear as unexpected decorative elements within certain bento cells -- a playful nod to the "tropical" vocabulary item and a disruption of the otherwise earthy, serious aesthetic. They are rendered in Terracotta Blaze and Ochre Dust, swimming slowly via CSS animation (translateX over 15-20s). - **Handwritten margin notes:** Scattered throughout the bento grid, small text snippets in Caveat font appear at slight angles, as if someone scribbled notes in the margins of a workbook. These contain mathematical symbols, short observations, or humorous asides about continuity. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like exploring a curated exhibition about continuity and discontinuity. Each bento compartment is a mini-exhibit. The progression moves from calm introduction through increasing complexity to the fracture zone's controlled chaos, then resolves in the grounding footer. **Opening animation sequence:** - Frame 0-300ms: Raw Linen background. Nothing visible. - Frame 300-800ms: "continu" appears in Archivo Black, sliding in from the left (translateX(-40px) to 0) with a fade-reveal. The text is positioned off-center. - Frame 800-1100ms: ".ax" appears separately, offset below and to the right, in Terracotta Blaze, entering with a slight rotation (rotate(5deg) to rotate(0deg)) and fade. - Frame 1100-1800ms: A torn paper frame (SVG clipPath) reveals itself around the title area, the tear-line drawing itself as a path animation. - Frame 1800-2500ms: The first row of bento cells fades in below, each with a 200ms stagger. **Scroll behavior:** Bento cells enter the viewport with fade-reveal animations (opacity 0 to 1, translateY(15px) to 0, 400ms duration, staggered 100ms per cell). The continuity strip's SVG line draws itself as the user scrolls through that section (scroll-linked stroke-dashoffset). In the fracture zone, cells enter with slight rotations and overlaps that resolve to their final positions over 500ms. **Interaction details:** - Bento cells respond to hover with a subtle elevation increase (box-shadow deepens from 0 2px 8px rgba(0,0,0,0.1) to 0 4px 16px rgba(0,0,0,0.15)) and the torn edges become slightly more pronounced (feTurbulence scale increases). - The tropical fish SVG elements pause their animation on hover, "looking at" the cursor. - Handwritten margin notes increase opacity on hover (from 0.5 to 1) and scale slightly (1 to 1.05). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Anti-design bento-box fusion:** Combining the orderly bento-box grid structure with anti-design aesthetic treatments (torn edges, deconstructed type, deliberate misalignment) creates a tension between order and chaos that is structurally unique. The grid provides readability while the anti-design elements provide visual excitement. 2. **Continuous line as literal content metaphor:** The single unbroken SVG line that draws across the continuity strip section is a direct, physical representation of the mathematical concept of continuity. No other design uses a single-path SVG drawing as both decoration and conceptual illustration. 3. **Fracture zone as narrative climax:** The deliberate breaking of the bento grid in the fracture zone -- where cells rotate, overlap, and clip into each other -- creates a designed "failure" of the layout that visually represents the ".ax" (cutting) theme. This controlled destruction of the design's own structure is unique. 4. **Tropical fish as anti-design disruption:** The unexpected appearance of stylized fish in an otherwise earthy, serious aesthetic is a deliberate anti-design choice that challenges the viewer's expectations and adds playful warmth. **Chosen seed/style:** aesthetic: anti-design, layout: bento-box, typography: expressive-variable, palette: warm-earthy, patterns: fade-reveal, imagery: abstract-shapes, motifs: tropical-fish, tone: energetic **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow (65%) patterns. Avoided centered (94%) and card-grid (85%) layouts. Avoided photography (82%) imagery. Avoided gradient (92%) palette. Avoided mono (92%) typography. Avoided mysterious-moody (74%) tone. Used bento-box (5%) layout and tropical-fish (1%) motifs -- both significantly underused.