# Design Language for valuator.dev ## Aesthetics and Tone valuator.dev is an anti-design experiment that questions the very notion of "value" in digital design -- a deliberately ugly, confrontational interface that challenges users to look past aesthetics and find the genuine utility beneath. The anti-design approach strips away every convention: no consistent alignment, no harmonious colors, no pleasing proportions. Yet within this chaos, the content about valuation and assessment tools is rigorously useful. The tone is playful and irreverent -- a punk-rock developer who writes excellent code but refuses to make it pretty. Think of David Carson's Ray Gun magazine layouts applied to a developer tool: text runs off edges, hierarchy is inverted, and the "mistakes" are the point. Inspiration from anti-design zines, Dada collage, punk gig posters, and the deliberate ugliness of early Craigslist. ## Layout Motifs and Structure A **bento-box** layout that looks like someone assembled the bento while riding a rollercoaster -- all the right pieces are there, but they are tilted, overlapping, and slightly wrong. **Primary structure:** - **Chaos hero (100vh):** A forest green background (#1a3a1a) with the title "VALUATOR.DEV" rendered in retro-display type at a slight angle (transform: rotate(-3deg)). Around the title: misaligned rectangles in clashing colors, each containing a different definition of "value" in different font sizes. One rectangle is upside down (rotate(180deg)). - **Anti-bento grid:** A grid that follows bento proportions but with deliberate imperfections -- cells have varying rotation (±1-3deg), inconsistent padding, and borders that change width mid-stroke (impossible in CSS but faked with layered pseudo-elements). Each cell contains a genuinely useful tool or concept, presented with anti-design styling. - **Vintage warning section:** A full-width band styled as a vintage warning sign -- diagonal yellow-black stripes, bold sans-serif text, as if the site itself is cautioning you about the value of things. - **Pulse attention elements:** Key interactive elements (buttons, links) have a persistent pulse animation -- a rhythmic scale(1.0) to scale(1.05) that demands attention like an old alarm. **Spatial relationships:** Anti-bento uses standard grid with intentional transform: rotate() on cells. Rotation varies: -3deg to 3deg. Cell gaps vary: 8px to 24px irregularly. Max-width: 1000px. ## Typography and Palette **Fonts:** - **Display/Titles:** "Bungee" (Google Fonts) -- a heavy, layered display font designed for signage, used at clamp(36px, 6vw, 80px). Weight 400 (only weight, inherently heavy). The blocky, attention-demanding letterforms match the anti-design ethos of maximum visual impact. - **Body text:** "Roboto Mono" (Google Fonts) -- a monospace for body text (deliberately wrong for long-form reading, which IS the point) at 15px/1.65 line-height. Weight 400. Using monospace for body text subverts readability conventions. - **Accent/Labels:** "Bangers" (Google Fonts) -- a comic-book display font at 18px for labels, callouts, and the "warning" section. Weight 400. The casual loudness reinforces the anti-design tone. **Color Palette:** - **Forest green:** #1a3a1a (dark green primary background) - **Lime clash:** #88cc22 (electric lime for accents -- deliberately clashing) - **Warning yellow:** #e8d420 (yellow for attention/warning elements) - **Error red:** #cc3344 (red for "wrong" elements) - **Text white:** #f0f0e8 (off-white for primary text) - **Text dim:** #88aa88 (muted green for secondary text) - **Cell surface:** #223822 (slightly lighter green for grid cells) - **Vintage cream:** #f5f0d0 (cream for the warning section background) ## Imagery and Motifs **Core visual motifs:** - **Icon-heavy anti-design:** Large, blunt icons (32-48px) scattered across the page -- magnifying glasses, dollar signs, scales, check marks -- rendered as single-color SVGs in clashing colors. Some icons are deliberately oversized, others are tilted. The iconography is useful (indicating tool functions) but presented chaotically. - **Vintage warning stripes:** Diagonal repeating stripes (CSS repeating-linear-gradient: 45deg, #e8d420 10px, #1a1a1a 10px) used as borders, dividers, and background accents. The construction-zone aesthetic signals "under evaluation." - **Pulse-attention animations:** Key elements pulse rhythmically: transform: scale(1.0) to scale(1.05) over 1s, infinite, ease-in-out. Combined with a subtle box-shadow pulse (0px to 4px blur in lime green). Maximum 3-4 elements pulse simultaneously to avoid seizure-inducing overload. - **Rotation chaos:** Multiple elements rotated by small amounts (±1-5deg), creating a sense of instability and irreverence. The rotation is subtle enough to feel intentional, not broken. ## Prompts for Implementation **Anti-design with genuine utility:** The critical balance is that despite the deliberately ugly presentation, the actual content and tools must be genuinely useful and findable. Anti-design is not about being unusable -- it is about being usable despite appearances. **Anti-bento grid implementation:** - Standard CSS grid: grid-template-columns: repeat(3, 1fr); gap: 16px; - Apply per-cell rotation: .cell:nth-child(1) { transform: rotate(-2deg); } .cell:nth-child(2) { transform: rotate(1.5deg); } etc. - Vary padding per cell: :nth-child(odd) { padding: 20px; } :nth-child(even) { padding: 28px 16px; } **Warning stripes:** - background: repeating-linear-gradient(45deg, #e8d420, #e8d420 10px, #1a1a1a 10px, #1a1a1a 20px); - Apply to header of warning section, borders of certain cells. **Pulse animation:** - @keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(136,204,34,0); } 50% { transform: scale(1.05); box-shadow: 0 0 8px rgba(136,204,34,0.4); } } - animation: pulse 1s ease-in-out infinite; **AVOID:** CTA-heavy layouts (by default, the anti-design inverts CTA conventions), pricing blocks, stat-grids, harmonious color schemes, consistent alignment. Embrace controlled chaos. ## Uniqueness Notes **Differentiators from other designs:** 1. **Anti-design bento with intentional rotation chaos:** The bento-box layout with deliberately rotated and misaligned cells creates a unique visual tension between order (grid structure) and disorder (rotated contents) not found in other designs. 2. **Construction-zone warning aesthetic for valuation tools:** Using yellow-black warning stripes and alarm-style pulse animations to frame valuation content creates an ironic visual metaphor -- assessing value is dangerous work. 3. **Monospace body text as anti-convention statement:** Deliberately using monospace for long-form body text (conventionally "wrong") is a purposeful subversion that makes the anti-design philosophy tangible in the reading experience itself. **Chosen seed/style:** aesthetic: anti-design, layout: bento-box, typography: retro-display, palette: forest-green, patterns: pulse-attention, imagery: icon-heavy, motifs: vintage, tone: playful **Avoided overused patterns:** photography imagery (90%), centered layout (98%), card-grid layout (96%), warm palette (94%), parallax patterns (99%), mysterious-moody tone (70%).