# Design Language for reasoner.studio ## Aesthetics and Tone reasoner.studio inhabits the visual territory of a speculative research interface -- the kind of display you might find on the desk of a theoretical physicist in a near-future drama, where complex reasoning chains unfold across layered flat panels with the clarity of architectural blueprints. The aesthetic is **flat-design** in its purest philosophical form: no shadows, no gradients, no skeuomorphic pretense. Every element is rendered as a precise, opaque plane of color, creating a visual language that treats the screen as a sheet of high-quality matte paper printed with exacting care. The tone is **calm-serene** -- not the hushed calm of a meditation app, but the focused, unhurried serenity of deep intellectual work. Think of the atmosphere in a university library's rare manuscripts room at 7 AM: silent, lit by diffuse north-facing windows, every surface clean and purposeful. The site communicates that reasoning is not frantic computation but patient, deliberate thought -- the kind that benefits from stillness and careful attention. The flat-design language here is deliberately austere. Where modern flat design has been softened by subtle shadows and gentle gradients (Material Design's "elevation"), reasoner.studio returns to the original promise of flatness: shapes are shapes, colors are colors, typography does the heavy lifting. This austerity is not cold -- it is warm in the way that a well-made Moleskine notebook is warm. The warmth comes from typographic care and generous spacing, not from decorative embellishment. The overall mood draws from three specific reference points: (1) Edward Tufte's information design -- the belief that visual clarity is an ethical obligation; (2) Dieter Rams' "less but better" principle applied to web surfaces; (3) the visual language of Japanese train station signage -- flat color fields, impeccable typography, zero decoration, yet somehow beautiful in their functional precision. ## Layout Motifs and Structure The layout follows an **F-pattern** reading architecture, designed around the well-documented eye-tracking behavior where users scan horizontally across the top, then move down the left side with shorter horizontal scans. Rather than fighting this natural reading tendency, the design embraces it as a structural principle, placing the most critical content along the top bar and left column, then rewarding rightward scanning with supporting details. **Spatial Architecture:** - **Top Horizon Bar:** The uppermost 80px of the viewport is a continuous flat color band (#0A0E17) containing the domain name flush-left and a minimal set of navigation labels flush-right. This bar is fixed during scroll, functioning as a persistent reference anchor -- the "headline" of the F-pattern's first horizontal scan. - **Primary Content Column:** Content flows in a left-aligned column occupying 58% of the viewport width, positioned with a 7% left margin. This is the "stem" of the F-pattern -- the vertical axis the eye follows downward. Each content block is a flat, clearly delineated panel: crisp borders (1px solid #2A3142), no rounded corners, no shadows. Panels stack vertically with 48px gaps between them. - **Secondary Information Field:** The right 30% of the viewport (with 5% right margin) contains contextual information that rewards the shorter horizontal scans of the F-pattern: annotations, metadata, cross-references, and small bokeh-effect imagery. This column scrolls independently of the primary column on viewports wider than 1200px, creating a dual-axis reading experience. - **Section Demarcation:** Sections are not separated by decorative dividers or whitespace alone. Instead, each major section is introduced by a full-width flat color band -- a 4px horizontal rule in one of the palette accent colors -- followed by the section heading set in the left column. This creates a clear visual hierarchy without ornament. - **Terminal-Width Constraint:** No content line ever exceeds 72 characters in width (approximately 680px at body text size). This constraint, borrowed from terminal standards and academic typesetting, ensures sustained readability and gives the layout an inherent sense of discipline. - **Viewport Breathing:** The bottom 15% of the initial viewport is intentionally empty -- a flat expanse of the background color that signals calm and invites the user to scroll at their own pace. No fold-anxiety, no urgency cues. ## Typography and Palette **Typography:** - **Display / Headlines:** "Playfair Display" (Google Fonts) at weights 500 and 700. The serif-revival philosophy manifests here through Playfair's deliberate evocation of 18th-century transitional serifs -- the era when typefaces like Baskerville and Didot represented the Enlightenment's faith in reason and clarity. Headlines are set at 2.8rem-4.2rem, always in sentence case, with tight letter-spacing of -0.02em. The contrast between Playfair's hairline serifs and bold strokes creates visual rhythm even in flat, shadow-free layouts. - **Body Text:** "Source Serif 4" (Google Fonts) at weight 400 (regular) and 300 (light). This typeface continues the serif-revival thread with its robust, highly legible letterforms designed specifically for screen reading. Body text is set at 1.05rem with line-height 1.78 -- unusually generous, creating vertical airiness that reinforces the calm-serene tone. Paragraph spacing is 1.4em. - **Annotations and Metadata:** "IBM Plex Sans" (Google Fonts) at weight 300 and 400, used exclusively in the secondary information column and for small labels. Set at 0.82rem with letter-spacing +0.03em. This sans-serif provides essential contrast against the serif-dominant main column, and its "designed for engineering" quality reinforces the reasoning/analytical character of the site. - **Monospace Accents:** "IBM Plex Mono" (Google Fonts) at weight 400 for any code-like content, reference numbers, or structured data. Used sparingly -- only where the content demands fixed-width treatment. Set at 0.88rem. **Palette:** The palette is **high-contrast** -- deliberately dramatic in its value range, creating visual impact through stark luminance differences rather than through saturation or chromatic variety. - **Primary Background:** #0A0E17 -- a near-black blue-charcoal that reads as deep space. Not pure black (which is harsh on screens) but dark enough to create maximum contrast with text. - **Primary Text:** #E8ECF2 -- a cool off-white with the faintest blue cast, softer than pure white but maintaining high contrast against the dark background. Contrast ratio against #0A0E17: 15.8:1. - **Accent Warm:** #D4A054 -- a muted gold that functions as the primary accent, used for section divider rules, active states, and key UI markers. This warm tone against the cool dark background creates the characteristic "calm command center" feeling. - **Accent Cool:** #4A8FBF -- a desaturated cerulean blue, used for links, the secondary column's interactive elements, and hover states. Provides directional contrast against the warm gold accent. - **Panel Background:** #111827 -- a slightly lighter shade of the primary background, used for content panels. The difference is subtle (only visible in direct comparison) but creates enough depth separation to delineate flat panels without resorting to shadows or borders. - **Muted Text:** #6B7A8D -- a mid-tone blue-gray for secondary text, timestamps, and de-emphasized content. Contrast ratio against #0A0E17: 4.8:1 (sufficient for large text per WCAG but deliberately quieter). - **Alert/Emphasis:** #BF4A4A -- a desaturated red used only for error states or critical emphasis. Appears rarely, so when it does appear, it commands immediate attention. - **Surface Highlight:** #1E2736 -- used for hover states on panels and interactive elements, providing a subtle brightening effect that signals interactivity without animation. ## Imagery and Motifs **Bokeh Background Imagery:** The primary visual motif is **bokeh-background** -- the soft, circular out-of-focus light patterns familiar from photography with wide aperture lenses. On reasoner.studio, bokeh serves a specific conceptual purpose: it represents the unfocused field of possibilities from which clear reasoning emerges. The in-focus content (sharp serif text, crisp flat panels) sits against a background that subtly suggests the blur of pre-reasoning cognition. Implementation specifics: - Bokeh circles are generated via CSS radial gradients and pseudo-elements, not raster images. Each circle is a radial-gradient from a translucent accent color (either #D4A054 at 0.04 opacity or #4A8FBF at 0.03 opacity) to transparent. Diameters range from 120px to 400px. Circles are positioned using CSS custom properties, enabling repositioning via JavaScript without layout recalculation. - Bokeh appears only in the secondary information column and in full-width interstitial sections between major content blocks. The primary content column remains clean -- bokeh never interferes with reading. - A maximum of 6-8 bokeh circles are visible at any time. More would become distracting; fewer would lose the effect. Their positions shift slowly (transform: translate over 20-30 second durations using CSS animation) to create a living, breathing quality without being attention-grabbing. **Sci-Fi HUD Motifs:** The **sci-fi-hud** motif manifests not as a full-screen overlay but as subtle structural decorations that frame content without overwhelming it: - **Corner Brackets:** Each major content panel is marked at its top-left and bottom-right corners with thin L-shaped bracket lines (1px, #4A8FBF at 0.5 opacity, 16px long on each arm). These brackets are pure CSS (border-left + border-top on a pseudo-element) and evoke targeting reticles or data readout frames from science fiction interfaces. - **Grid Underlay:** Behind the primary content column, a very faint grid of horizontal lines (#1E2736, 1px, spaced 48px apart) provides a ruled-paper quality that reinforces the analytical, reasoning-oriented character. This grid is visible only on hover over the column area, fading in at 0.15 opacity. - **Data Ticks:** Along the left margin of the primary column, small horizontal tick marks (8px wide, 1px tall, #6B7A8D) appear at regular intervals aligned with the hidden grid. These ticks suggest measurement scales and data axes, reinforcing the "instrument for thinking" metaphor. - **Scan Line:** A single horizontal line (#D4A054 at 0.08 opacity) slowly traverses the viewport from top to bottom over 45 seconds, then resets. This persistent, barely-visible animation creates a sense of continuous processing -- the site is always "thinking," always scanning. **Iconography:** No traditional icons are used. Where visual markers are needed, the design employs typographic symbols and Unicode characters: arrows (→), bullets (·), brackets ([ ]), and mathematical operators (∴, ∵, ≈). These are set in IBM Plex Mono and serve as the site's entire icon system, maintaining the flat-design purity. ## Prompts for Implementation **Full-Screen Narrative Entry Experience:** The site opens to a full-viewport dark field (#0A0E17) with nothing visible for 400ms. Then the domain name "reasoner.studio" fades in -- not at center-screen, but at the F-pattern's primary fixation point: flush-left, 7% from the left edge, 30% from the top. It is set in Playfair Display at weight 700, 3.6rem, color #E8ECF2. Below it, after a 200ms delay, a single line of body text appears in Source Serif 4 Light: a subtitle that describes the site's purpose. No animation beyond opacity transitions (0 to 1 over 600ms, cubic-bezier(0.4, 0, 0.2, 1)). During this entry sequence, 4-5 bokeh circles fade in across the right side of the viewport at staggered intervals (200ms apart), establishing the background atmosphere. The corner brackets of the first content panel draw themselves in: each arm of the L-bracket extends from 0 to 16px over 300ms. This is the only path-draw animation on the entire site. **Hover-Lift Interactions:** The primary interaction pattern is **hover-lift** -- but reinterpreted for flat design. Since true elevation (shadows, z-index layering) contradicts the flat aesthetic, hover-lift is achieved through chromatic shift: when a user hovers over a content panel, its background color transitions from #111827 to #1E2736 over 180ms (ease-out), and its border color shifts from #2A3142 to #4A8FBF over the same duration. The panel does not move, grow, or cast a shadow. The "lift" is purely perceptual -- the brightening creates the sensation of the panel rising toward the light source without any actual spatial displacement. Interactive text links use a complementary hover effect: on hover, the link text color transitions from #4A8FBF to #D4A054 (cool to warm) over 150ms, and a 1px underline draws itself from left to right using a background-size animation (0% to 100% width). This underline-draw is the only micro-animation applied to text. **Scroll Behavior:** Scrolling is the primary navigation method. As the user scrolls, content panels in the primary column enter the viewport with a simple fade-in (opacity 0 to 1 over 400ms, triggered when the panel's top edge crosses 85% of the viewport height). There is no translate, no slide, no scale -- just opacity. This restraint reinforces the calm-serene tone: the site does not perform for the user; it simply reveals. The secondary column (right side) scrolls at 0.7x the rate of the primary column on viewports wider than 1200px, creating a subtle parallax that suggests depth without violating flatness. On narrower viewports, the secondary column collapses below the primary content as standard stacked blocks. **Narrative Structure:** The site is structured as a reasoning chain -- each section builds on the previous one, connected by explicit logical connectors ("Therefore...", "Given this...", "It follows that...") set in Playfair Display Italic. The site tells the story of what reasoner.studio is and does, not through bullet points or feature lists, but through a continuous argumentative thread. AVOID: pricing blocks, testimonial carousels, stat-grids, CTA buttons. The only actionable element is a single contact/inquiry link at the bottom of the reasoning chain, styled identically to body text links. **Responsive Considerations:** Below 1200px: secondary column moves below primary. Below 768px: content column expands to 88% viewport width with 6% margins. Bokeh circles reduce to 3. Corner brackets remain. Typography scales down proportionally using clamp() functions. ## Uniqueness Notes **Differentiators from other designs:** 1. **Flat-Design Meets Serif-Revival -- Aesthetic Paradox:** Flat design is almost always paired with sans-serif typography (the iOS/Google convention). By pairing true flatness (no shadows, no gradients, no elevation) with serif-revival typography (Playfair Display, Source Serif 4), this design creates an unusual visual tension: the typography suggests historical depth and humanist tradition while the layout insists on absolute surface-level honesty. This combination appears in only 1% of designs for both flat-design and serif-revival independently, making their intersection essentially unique in the portfolio. 2. **Chromatic Hover-Lift Without Spatial Displacement:** The hover-lift pattern (3% frequency) is typically implemented with transform: translateY and box-shadow. Here, it is reinterpreted as pure color transition -- a "perceptual lift" that maintains flat-design integrity. No other design in the portfolio achieves hover feedback through chromatic shift alone without any spatial or shadow-based elevation cue. 3. **Bokeh as Cognitive Metaphor, Not Decoration:** Bokeh backgrounds (3% frequency) are typically used as aesthetic wallpaper. On reasoner.studio, bokeh carries specific conceptual meaning -- it represents the out-of-focus field of pre-reasoning possibility from which sharp, focused thought emerges. The bokeh is confined to secondary areas and interstitial spaces, never interfering with primary content, making it function as meaningful visual storytelling rather than ambient decoration. 4. **F-Pattern as Explicit Structural Principle:** The F-pattern layout (2% frequency) is usually an implicit consequence of standard web layouts. Here, it is the explicit organizing principle, with the dual-column structure deliberately engineered around eye-tracking research: primary reasoning in the left column, contextual annotations in the right, top bar as persistent reference. No other design in the portfolio explicitly names and engineers around F-pattern reading behavior as a structural philosophy. 5. **Reasoning Chain Narrative Structure:** Rather than the typical section-based website structure (hero, features, testimonials, CTA), the site is organized as a continuous logical argument. Sections are connected by logical connectors, and the content reads as a single sustained chain of reasoning. This narrative approach, combined with the calm-serene tone, creates a reading experience closer to a well-structured essay than a typical marketing page. **Chosen seed/style:** aesthetic: flat-design, layout: f-pattern, typography: serif-revival, palette: high-contrast, patterns: hover-lift, imagery: bokeh-background, motifs: sci-fi-hud, tone: calm-serene **Avoided overused patterns:** playful aesthetic (95%), centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered patterns (96%), minimal imagery (95%), vintage motifs (88%), friendly tone (98%). None of these appear as primary choices in this design.