# Design Language for rational.group ## Aesthetics and Tone rational.group lives in the visual world of a private members' club where the lighting is always amber and the leather is always warm -- a space where ideas are discussed over slow-poured spirits in heavy crystal glasses, where decisions are made not with urgency but with considered gravity. The aesthetic is **luxury-premium**, but not the cold chrome-and-marble luxury of fashion houses or the ostentatious gold-leaf maximalism of casino lobbies. This is the quieter, older kind of luxury -- the luxury of time, of patience, of things that age well. Think: the reading room of a century-old London club, the walnut-paneled study of a Kyoto ryokan's owner, the tasting room of a Burgundy winemaker who has never needed to advertise. The tone is **approachable-casual** -- a deliberate counterweight to the visual opulence. The site speaks in the voice of someone who is deeply knowledgeable but wears it lightly, who can explain complex rational frameworks the way a favorite professor might explain them over dinner. There is warmth here, and a gentle humor -- the kind of intellectual confidence that doesn't need formality to assert itself. The combination of luxury visuals and casual voice creates a productive tension: the environment says "this matters," while the language says "and you're welcome here." The mood draws from the golden hour light of late autumn -- that specific amber-honey quality of afternoon sun filtering through old glass, casting warm pools on dark wood. Every surface has depth. Every element has weight. Nothing floats or glows with the ethereal vacancy of tech-startup design. Things sit firmly in their places, casting subtle shadows, occupying real visual space. ## Layout Motifs and Structure The layout follows a **hero-dominant** architecture where each major section commands the full viewport before yielding to the next. This is not the rapid-fire hero-carousel of e-commerce; it is the slow, deliberate progression of a curated exhibition where each room is experienced fully before moving on. **Spatial Architecture:** - **Hero Proscenium:** The opening hero occupies 100vh and establishes the entire visual language in a single frame. The domain name sits at roughly 40% vertical height, left-aligned at a 12% left margin. Below and to the right, a single sentence of explanation drifts into view. The background is a deep, warm bokeh field that shifts almost imperceptibly with scroll position. No navigation is visible until the user scrolls -- the hero is a threshold, an entrance hall. - **Section Cadence:** After the hero, content unfolds in full-height sections (minimum 90vh) that alternate between two compositional modes: (a) **Left-weighted text blocks** occupying 50-60% of the viewport width, with the remaining space given over to atmospheric bokeh imagery or flowing decorative curves; and (b) **Center-staged statements** -- single sentences or short paragraphs presented at display scale in the exact center of the viewport, functioning as chapter titles or philosophical provocations. - **The Gutter as Breathing Room:** Between sections, a 15vh gap filled with nothing but the base background color and a single, hair-thin horizontal line (1px, #C9A96E at 20% opacity) provides visual rest. These gutters are not transitions -- they are pauses, the typographic equivalent of a held breath. - **Depth Through Layering:** Content sections use a subtle z-axis. The primary text layer sits at z-index 2, while behind it (z-index 1) soft bokeh circles drift upward at 0.3x scroll speed, creating a parallax depth that makes the text feel physically closer to the viewer. A third layer (z-index 0) holds the warm base gradient. This three-layer depth system replaces the flatness of typical single-page designs with genuine spatial feeling. - **Navigation Emergence:** A minimal navigation bar appears only after the user scrolls past the hero section. It materializes as a single row of text links (no hamburger menu, no icons) pinned to the top of the viewport with a frosted-warm backdrop filter. Links are set in the body typeface at 0.85rem with generous letter-spacing. ## Typography and Palette **Typography:** - **Display / Headlines:** "Cormorant Garamond" (Google Fonts) -- weight 600 (SemiBold) and 700 (Bold), used at fluid sizes defined with `clamp()`: `clamp(2.8rem, 5vw + 1rem, 5.5rem)` for primary hero headings, `clamp(1.8rem, 3vw + 0.6rem, 3.2rem)` for section titles. Cormorant Garamond carries the precise balance needed here: it is luxurious without being fussy, its high-contrast strokes (thin horizontals, swelling verticals) evoke the engraved lettering of invitation cards and fine wine labels. Always used in sentence case -- never uppercase, which would push the tone toward fashion-brand aggression. Color: primarily #2C1810 on light backgrounds, #F5E6D0 on dark sections. - **Body / Running Text:** "Source Sans 3" (Google Fonts) -- weight 300 (Light) and 400 (Regular). The approachable-casual tone requires a body face that reads easily and doesn't impose formality. Source Sans 3 is clean, warm, and slightly wider than typical grotesques, which gives body text a relaxed, unhurried quality. Fluid sizing: `clamp(1rem, 1.1vw + 0.45rem, 1.2rem)`. Line-height: 1.78 -- generous enough to breathe. Letter-spacing: +0.005em. Color: #3D2A1E on light backgrounds, #E8D5C0 on dark sections. - **Accent / Annotations:** "DM Mono" (Google Fonts) -- weight 400, used sparingly for metadata, dates, labels, and small annotations that provide structural context. Set at 0.8rem with letter-spacing +0.06em. Color: #C9A96E. This monospace accent creates a subtle informational register that contrasts with the flowing elegance of the serif and sans-serif voices. **Variable-Fluid System:** All typography uses `clamp()` for fluid scaling, but the key differentiator is that font-weight itself varies with viewport width using CSS `font-variation-settings`. On narrow viewports (< 640px), Cormorant Garamond headings lighten to weight 500, and body text thickens to weight 400, maintaining optical balance across screen sizes. On wide viewports (> 1200px), headings strengthen to weight 700 and body text thins to weight 300, emphasizing the contrast between display and reading type. **Palette:** The honeyed-neutral palette draws from the specific amber-brown-cream spectrum of aged wood, old leather, warm candlelight, and golden honey. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Ground | Espresso Umber | #2C1810 | Dark section backgrounds, primary heading text on light | | Warm Base | Honeyed Parchment | #F5E6D0 | Light section backgrounds, body text on dark | | Golden Accent | Aged Brass | #C9A96E | Accent lines, link hover states, annotation text, decorative elements | | Mid Tone | Caramel Shadow | #8B6B4A | Secondary text, subtle borders, inactive states | | Blush Warm | Dusty Rose Undertone | #D4A882 | Hover backgrounds, highlighted passages, warm emphasis | | Ambient Dark | Charred Walnut | #1A0F08 | Deepest backgrounds (hero section), text shadows | | Soft Cream | Linen White | #FAF3EA | Card backgrounds, pulled quotes, content blocks on dark | | Tarnished Gold | Patina Copper | #A67C52 | Gradient endpoints, bokeh particle tints, secondary accents | The palette deliberately avoids pure white (#FFF) and pure black (#000). The warmest light is #FAF3EA (a cream with a faint yellow undertone) and the deepest dark is #1A0F08 (a brown-black that reads as very dark chocolate). This compressed tonal range creates a sense of being inside a warm, enclosed space rather than on an open, lit screen. ## Imagery and Motifs **Bokeh Background System:** The primary imagery mode is **bokeh-background** -- fields of soft, out-of-focus light circles that evoke the optical qualities of candlelight seen through old glass, or city lights viewed through rain-streaked windows. These are not photographic bokeh images; they are generated entirely in CSS and JavaScript: 1. **Bokeh Particle Field:** 15-25 circular `div` elements per section, each with `border-radius: 50%`, sizes ranging from 40px to 200px, filled with radial gradients that transition from #C9A96E at 10% opacity in the center to transparent at the edges. Each particle has a unique combination of `top`, `left`, `opacity` (0.04-0.15), and `filter: blur()` (20px-60px) values. They are positioned absolutely within each section container and drift slowly upward (translateY: -30px to -80px) on scroll using the tilt-3d interaction system. 2. **Bokeh Breathing Animation:** Each bokeh circle has a CSS animation (`@keyframes bokeh-breathe`) that slowly scales between 0.9 and 1.1 and adjusts opacity by +/- 0.02, with durations staggered between 6s and 14s using `animation-delay` offsets. This creates a gentle, living quality -- the background breathes. 3. **Depth Layering:** Bokeh circles exist in three depth tiers. Tier 1 (closest, largest, most blurred, lowest opacity) scrolls at 0.2x speed. Tier 2 (medium) scrolls at 0.5x speed. Tier 3 (smallest, sharpest, highest opacity) scrolls at 0.8x speed. This differential parallax creates genuine depth perception. **Flowing Curves Motif:** The decorative motif system is built on **flowing-curves** -- sinuous, organic SVG paths that function as section dividers, container borders, and ambient decorative elements: 1. **Section Dividers:** Instead of straight horizontal rules, sections are separated by SVG curves that flow from left to right in gentle sine-wave-like undulations. These paths are stroked in #C9A96E at 0.5px weight and 30% opacity, drawn using `path-draw` animation on scroll entry (the curve traces itself from left to right over 1.2 seconds as the section enters view). 2. **Container Accents:** Key content blocks (pulled quotes, featured text) are bordered not by rectangles but by partial curves -- an open parenthesis of flowing line on the left side, curving in from above and sweeping away below, rendered as a single cubic Bezier SVG path. These curves suggest embrace rather than containment. 3. **Background Flourishes:** In wider viewports (> 1024px), two or three large-scale decorative curves (spanning 60-80% of the viewport height) are layered behind content at very low opacity (#C9A96E at 8%). These are pure ornamentation -- they carry no information but establish a visual grammar of fluidity and organic movement that counters the rigid geometry of the viewport and text blocks. **Tilt-3D Interaction:** All content cards, pulled-quote blocks, and the hero text block respond to mouse movement with a subtle **tilt-3d** effect: - On hover, elements rotate on both X and Y axes (maximum rotation: 3 degrees) based on the cursor's position relative to the element's center, calculated using `perspective(1000px) rotateX(Xdeg) rotateY(Ydeg)`. - A directional shadow shifts opposite to the tilt direction, deepening from `2px 2px 8px rgba(26, 15, 8, 0.1)` at rest to `6px 6px 20px rgba(26, 15, 8, 0.2)` at maximum tilt. - The tilt animation uses spring physics (damping: 0.7, stiffness: 150) via JavaScript, so elements settle back with a natural, slightly oscillating ease rather than a mechanical CSS transition. - On touch devices, the tilt effect is triggered by device gyroscope data (where available) or disabled entirely, never faked with scroll position. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport hero of #1A0F08 background with the bokeh particle field already alive and breathing. After a 400ms pause (giving the bokeh time to register), the domain name "rational.group" fades in at 40% vertical height, left-aligned at 12% from the left edge, set in Cormorant Garamond SemiBold at `clamp(2.8rem, 5vw + 1rem, 5.5rem)`, color #F5E6D0, opacity transitioning from 0 to 1 over 700ms with a concurrent translateY from 15px to 0. The `.group` portion is rendered in #C9A96E to subtly distinguish domain from TLD. Below the domain name (24px gap), a tagline in Source Sans 3 Light at 1.1rem fades in with a 200ms delay after the domain name, color #D4A882. No buttons, no calls to action, no navigation. The hero section is purely atmospheric -- an invitation to scroll. **Scroll-Triggered Section Reveals:** As the user scrolls past 85vh, the hero section's bokeh particles accelerate their upward drift slightly (scroll multiplier increases from 1x to 1.3x), and the hero content fades to opacity 0.3. The navigation bar materializes at the top with a 300ms fade-in and a `backdrop-filter: blur(12px) saturate(1.2)` over a #2C1810 background at 85% opacity. Each subsequent section uses a staggered reveal: the section's background transitions from opacity 0 to 1 first (300ms), then the flowing-curve divider draws itself (800ms, eased), then text content fades in from below (translateY: 20px to 0, opacity 0 to 1, 500ms, staggered 80ms between paragraphs). This three-stage reveal creates a sense of each section assembling itself as the viewer arrives. **Center-Stage Statements:** Between content sections, full-viewport "statement" sections display a single sentence in Cormorant Garamond Bold at `clamp(2rem, 4vw + 0.8rem, 4rem)`, centered both horizontally and vertically, color #C9A96E on a #2C1810 background. These statements use a tilt-3d effect that responds to mouse position across the entire viewport (not just hover), giving them an almost physical, placard-like presence. On scroll entry, they scale from 0.92 to 1.0 over 600ms with an ease-out-back curve. **Avoid:** - CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels - Hamburger menus, icon navigation, or any UI that requires explanation - Flat, unshaded backgrounds -- every surface must have at least subtle depth (gradient, bokeh, or shadow) - Pure geometric shapes (circles, squares, triangles) as decorative elements -- all decoration uses flowing organic curves - Neon or saturated accent colors -- the palette stays within the honeyed-neutral range at all times **Storytelling Emphasis:** The site should feel like reading a beautifully typeset essay in a private library. Content flows as narrative, not as feature lists or bullet-pointed selling points. Each section tells part of a story, and the flowing-curve section dividers function as visual paragraph breaks. The tilt-3d interactions give the user agency and presence -- the content responds to them, acknowledging their attention. The bokeh background provides constant, gentle visual interest without competing with the text, the way a fireplace provides warmth and movement without demanding attention. ## Uniqueness Notes **Differentiators from other designs:** 1. **Luxury-Premium Aesthetic at 0% Frequency:** The luxury-premium aesthetic has zero representation in the existing portfolio. This design introduces it not as cold corporate opulence but as warm, aged, intellectual luxury -- the walnut-and-whiskey register rather than the chrome-and-marble register. This reinterpretation makes the aesthetic feel inhabited and personal rather than aspirational and distant. 2. **Bokeh as Generative Environment, Not Photography:** Where bokeh-background (3% frequency) appears in other designs, it is typically used as a static photographic background image. Here, bokeh is generated entirely in CSS/JS as a living particle system with breathing animations, depth-layered parallax, and tilt-3d reactivity. The bokeh is not decoration -- it is the environment, the equivalent of ambient light in a physical space. 3. **Tilt-3D with Spring Physics on Typography:** The tilt-3d pattern (4% frequency) is typically applied to cards or product images. This design applies it to typography itself -- the center-stage statement sections tilt in response to mouse movement across the full viewport, giving text blocks the physical weight and presence of engraved placards. The spring-physics easing (damping/stiffness rather than CSS `transition`) makes the tilt feel natural and material rather than mechanical. 4. **Variable-Fluid Typography with Weight Variation:** While variable-fluid (3%) typically means fluid font sizing via `clamp()`, this design extends the principle to font-weight, using `font-variation-settings` to adjust weight based on viewport width. This optical compensation (lighter headings on small screens, bolder on large) is a typographic refinement rarely seen in web design and demonstrates genuine understanding of type at different scales. 5. **Flowing Curves as Structural Grammar:** The flowing-curves motif (3% frequency) replaces all straight-line structural elements -- section dividers, container borders, decorative flourishes -- creating a visual language where nothing is rigid or angular. This organic structural system, combined with the path-draw scroll animation, gives the layout a handcrafted, calligraphic quality that stands apart from the geometric precision of most web layouts. **Chosen Seed/Style:** - aesthetic: luxury-premium - layout: hero-dominant - typography: variable-fluid - palette: honeyed-neutral - patterns: tilt-3d - imagery: bokeh-background - motifs: flowing-curves - tone: approachable-casual **Avoided Patterns (from frequency analysis):** - playful aesthetic (95% -- massively overused) - centered layout (99% -- near-universal) - mono typography (99% -- near-universal) - warm palette (100% -- universal, though honeyed-neutral inherits warmth it is a distinct named palette) - scroll-triggered patterns (96% -- overused as primary pattern; this design uses scroll-triggering as secondary to tilt-3d) - minimal imagery (95% -- overused) - vintage motifs (87% -- overused) - friendly tone (98% -- overused)