# Design Language for reasoner.studio ## Aesthetics and Tone reasoner.studio channels an avant-garde aesthetic — the boundary-pushing, convention-defying energy of experimental art applied to a reasoning studio and creative workspace platform. The site provokes — unexpected typographic compositions, rule-breaking color relationships, and the intellectual boldness of a studio that treats reasoning itself as a creative medium. Inspiration draws from the typographic experiments of Neville Brody, the installation art of James Turrell, the experimental publications of Irma Boom, and the conceptual design of Experimental Jetset. The tone is grounded-earthy — practical, rooted language that keeps avant-garde visual experimentation anchored in solid, usable studio guidance. ## Layout Motifs and Structure The layout uses a **portfolio-grid** architecture — content organized in a masonry-style grid that showcases reasoning projects with the curated quality of an avant-garde gallery exhibition. **Portfolio Grid Architecture:** - CSS Grid: repeat(auto-fill, minmax(280px, 1fr)) with varied heights - Cards: diverse styling (border variety, background shifts) - Feature cards span 2 columns for major reasoning projects - Gap: 16px between cards - Container: max-width: 1060px centered - The portfolio creates the gallery-wall quality of reasoning projects as exhibited works **Section Sequence:** 1. **Studio:** Hero with rounded-sans title on gold-black-luxury avant-garde gradient, lens-flare dramatic studio lighting, futuristic clean analytical markers 2. **Works:** Reasoning projects in portfolio grid — underline-draw interactive title emphasis with lens-flare spotlight accents 3. **Exhibition:** Featured project in double-span with futuristic precise annotation frames and lens-flare immersive lighting 4. **Process:** Studio methodology in grid with lens-flare process lighting 5. **Close:** Footer as exhibition closing — grounded-earthy farewell with futuristic settled markers and practical sign-off ## Typography and Palette **Typography:** - **Headlines:** "Nunito" (Google Fonts) — rounded sans at 2.2rem-3rem, weight 700. Its warm, accessible roundness contrasts with avant-garde visual intensity, creating approachable entry points to experimental work. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.8. - **Accent:** "Nunito" at 1rem, weight 600 for project titles and studio labels. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Luxury Black:** #0c0a08 — deep luxury black for backgrounds - **Gold Surface:** #1c1810 — warm dark for panels - **Studio Gold:** #c8a848 — rich gold for primary accent - **Studio Ivory:** #f0e8d0 — warm ivory for text - **Studio Bronze:** #a07838 — muted bronze for secondary accent - **Shadow Luxury:** #383020 — luxury shadow for secondary text - **Border Gold:** rgba(200,168,72,0.1) — gold tint border ## Imagery and Motifs **Lens-Flare Studio Lighting:** Project showcases feature dramatic studio lighting — radial-gradient(at var(--light-x, 50%) var(--light-y, 30%), rgba(200,168,72,0.08), transparent 30%) creating the gallery-spotlight quality of reasoning projects illuminated by professional studio lighting. **Underline-Draw Title Emphasis:** Project titles feature animated underlines — pseudo-element width growing from 0 to 100% in Studio Gold (height: 2px) over 300ms ease-out on hover. The underline-draw creates the gallery-label quality of works being actively selected for examination. **Futuristic Clean Annotations:** Thin analytical frames — corner brackets (10px, 1px), measurement notations, and small cross markers in Studio Gold at 0.06 opacity. The annotations create the curatorial quality of gallery works labeled with precise exhibition data. **Gold-Black-Luxury Atmosphere:** Background uses deep black with warm gold illumination — radial-gradient(at 40% 20%, rgba(200,168,72,0.03), transparent 35%), radial-gradient(at 60% 80%, rgba(160,120,56,0.02), transparent 30%). The luxury palette creates the high-end gallery quality of a studio that values the precious nature of reasoning work. **Grid Registration System:** Subtle grid dots (2px circles) at regular intervals (60px) in Studio Gold at 0.03 opacity. The dots create the blueprint quality of a studio grid system underlying all creative work. ## Prompts for Implementation Build the page as an avant-garde reasoning studio gallery. Portfolio: .studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; max-width: 1060px; margin: 0 auto; padding: 80px 24px; } .featured-project { grid-column: span 2; } Underline-draw: .project-title { position: relative; display: inline-block; } .project-title::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #c8a848; transition: width 300ms ease-out; } .project-title:hover::after { width: 100%; } Lens-flare: .studio-light { position: relative; } .studio-light::before { content: ''; position: absolute; inset: 0; background: radial-gradient(at 50% 30%, rgba(200,168,72,0.08), transparent 30%); pointer-events: none; } Futuristic brackets: .exhibit-frame { position: relative; } .exhibit-frame::before, .exhibit-frame::after { content: ''; position: absolute; width: 10px; height: 10px; border: 1px solid rgba(200,168,72,0.06); } .exhibit-frame::before { top: -4px; left: -4px; border-right: none; border-bottom: none; } .exhibit-frame::after { bottom: -4px; right: -4px; border-left: none; border-top: none; } Grid dots: .studio-dots { background: radial-gradient(circle, rgba(200,168,72,0.03) 1px, transparent 1px); background-size: 60px 60px; } Studio panel: .project-card { background: #1c1810; border: 1px solid rgba(200,168,72,0.1); border-radius: 6px; padding: 24px; } AVOID: Standard portfolio platforms, corporate studio showcases, and minimal project galleries. Let avant-garde experimentation and grounded-earthy guidance create a reasoning studio where intellectual projects are exhibited with the gallery-quality lighting and curatorial precision of premium art exhibitions. ## Uniqueness Notes 1. **Avant-garde for reasoning studio:** Experimental art energy makes intellectual projects feel like exhibited gallery works rather than technical demos. 2. **Underline-draw as active selection:** Animated title underlines create the gallery quality of actively choosing works for examination. 3. **Gold-black-luxury as premium studio:** Rich gold on deep black creates the high-end quality of a studio that values reasoning work as precious. 4. **Lens-flare as studio spotlight:** Dramatic lighting gives each project the professional illumination of gallery exhibition. 5. **Grid dots as studio blueprint:** Registration dot system creates the underlying-structure quality of systematic creative work. **Seed/Style:** aesthetic: avant-garde, layout: portfolio-grid, typography: rounded-sans, palette: gold-black-luxury, patterns: underline-draw, imagery: lens-flare, motifs: futuristic, tone: grounded-earthy **Avoided Overused Patterns:** corporate aesthetic (87%), parallax patterns (92%), asymmetric layout (90%), mono typography (93%), warm palette (94%), friendly tone (88%), minimal imagery (92%). This design uses avant-garde aesthetic, portfolio-grid layout, gold-black-luxury palette, lens-flare imagery, and grounded-earthy tone.