# Design Language for rational.group ## Aesthetics and Tone The domain **rational.group** is a collision of two words that should not coexist with such comfort. *Rational* is the language of proof, ledger, and theorem — cold Enlightenment certainty pressed into a single adjective. *Group* is the language of the hearth, the salon, the convivial table where ideas are argued over brandy and candlelight. The site lives in the precise historical moment when these two registers were one: **the Victorian natural-philosophy salon**, where savants in frock coats built elaborate cabinets of wonders and illustrated them with baroque hand-drawn plates, where reason was communicated in the most ornamented visual language imaginable. The aesthetic is **victorian-ornate at full saturation** — not the sepia nostalgia of stock photography, not the genteel gray of antique paper, but the actual chromatic richness of a hand-colored 1870s natural history folio: amber, sienna, ochre, burnt umber, verdigris, old gold. The page functions as a **cabinet of rational curiosities** — a collector's vitrine where logical structures are displayed like mounted specimens, each one labeled in the hand of an enthusiastic naturalist who cannot stop annotating. Tone: **opulent-grand** without irony. The page takes its own ornamentation seriously. It is not tongue-in-cheek Victorian pastiche; it is a sincere expression of the belief that rigor and beauty are not opposites, that the most careful thinking deserves the most elaborate frame. Every visual decision asks: *what would the Victorian Natural Philosophy Society commission if it had a website?* The mood is warm, amber-lit, and inviting — a reading room with a fire — but under the warmth is absolute structural clarity. The ornament serves the logic. The borders exist to frame the argument. The flourishes are the punctuation of a precise mind. ## Layout Motifs and Structure The primary structural conceit is **diagonal-sections** — not the thin CSS `clip-path: polygon` chevrons ubiquitous in marketing templates, but something drawn from the visual grammar of Victorian scientific diagrams: **the field transect**. A field transect is a diagonal cut through a landscape, showing stratigraphy — what lies beneath the surface at each depth. This page is a transect through the body of work of rational.group, each diagonal band revealing a different layer of thought. The page is divided into **five diagonal bands**, each tilted at exactly 7° from horizontal. The bands alternate between `Amber` (#F5C842) and `Cream` (#F9F3E3), with the first and last bands using `Sienna` (#8B4513) as a dark bookend. The diagonal cuts are not simple parallelograms — they are bordered by a 4px hand-drawn SVG rule that feathers and trembles slightly at the edges, imitating the quill line of a scientific illustrator. Within each diagonal band, content is set on a **counter-rotated grid** — rotated −7° to compensate for the band's tilt, so text reads perfectly horizontal while the container tilts. This creates the effect of text and images *sliding inside* an angled vitrine, like specimens displayed at a resting angle on a tilted specimen board. Macro structure: - **Band 1 (Sienna/dark):** Wordmark hero — large handwritten logotype, two-line tagline, no navigation. - **Band 2 (Cream/light):** Primary subject matter — the philosophical core, set in long serif prose with dropped capitals. - **Band 3 (Amber/warm):** Specimen cases — three organic-blob SVG frames containing illustrative content, arranged in a loose triangular cluster. - **Band 4 (Cream/light):** Secondary content or roster — names, concepts, or items in a loosely-spaced typographic list with ornamental bullets. - **Band 5 (Sienna/dark):** Colophon — a dense block of text set in small italic, signed with a flourish SVG, no footer links. Navigation: **none**. The page is a single scroll, top to bottom. The five diagonal bands are the structure; a fixed sidebar `TOC` of tiny roman numerals (I–V) floats at the right edge, each numeral anchored to its band. Margins are generous within bands — approximately 12% left/right on desktop — but the bands themselves are full-bleed, edge to edge. The diagonal cut bleeds off both sides of the viewport. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Wordmark / Display Headlines:** [Almendra](https://fonts.google.com/specimen/Almendra), weight 700. A richly detailed serif with calligraphic terminals and deep optical contrast — it reads as a typeface cut by a Victorian punch-cutter who had spent thirty years illuminating manuscripts. Used at clamp(5rem, 11vw, 11rem) for the wordmark, clamp(2.8rem, 5vw, 5rem) for band headlines. Set in `OldGold` (#B8860B) on dark bands, `Sienna` (#8B4513) on light bands. - **Running Text / Body:** [Lora](https://fonts.google.com/specimen/Lora), weight 400 regular and 400 italic. Lora's ink traps and pen-angle serifs evoke a 19th-century compositor's text face — warm, readable at length, slightly calligraphic. Body text set at 1.2rem / 1.95 line-height in `Umber` (#3D2B1F). Drop capitals use Almendra italic at 4× scale. - **Annotations / Labels / TOC:** [Caveat](https://fonts.google.com/specimen/Caveat), weight 400. The sole handwritten face in the palette — used exclusively for specimen labels, margin annotations, the sidebar TOC numerals, and the colophon signature line. Caveat reads as genuine handwriting (pencil, not ink), which contrasts with the formal serif body. Used at 0.85rem for labels, 1.1rem for TOC, 2rem for the signature. Color: `Umber` (#3D2B1F) with 70% opacity on light backgrounds; `Cream` (#F9F3E3) on dark. - **Ornamental Rule / Section Breaks:** SVG not a font — hand-drawn flourish SVGs in `OldGold`, injected inline. No icon font. **Palette (warm-earthy):** | Name | Hex | Role | |------|-----|------| | `Cream` | #F9F3E3 | Light band background, base canvas | | `Amber` | #F5C842 | Warm band background, accent highlight | | `OldGold` | #B8860B | Headlines, ornamental rules, key borders | | `Sienna` | #8B4513 | Dark band backgrounds, heavy borders | | `Umber` | #3D2B1F | Body text, annotation ink | | `Verdigris` | #4A7C6F | Accent — specimen frame borders, cross-links | | `Ochre` | #CC7A00 | Hover states, emphasis, pulled-quote rules | No black. No white. No grays. Every value is a hue drawn from the warm-earth mineral spectrum. The palette is the exact set of pigments a Victorian watercolorist would grind from ochre, sienna, umber, malachite, and orpiment. ## Imagery and Motifs All imagery is **organic-blob SVG**, hand-drawn inline. No photography. No stock illustration. No icon library. The sole exception is a decorative border system (also custom inline SVG). **The specimen blob system:** Each content container in Band 3 is enclosed in an **organic-blob frame** — an irregular closed SVG path that resembles a pressed botanical sample, a cross-section of a cell seen under a Victorian brass microscope, or an ink blot that has been carefully annotated by someone who believed it had meaning. The blobs are: - Irregular, asymmetric, with 8–14 control points - Stroke-only, 2.5px, in `Verdigris` (#4A7C6F) — the color of oxidized copper, of malachite, of a botanist's glass jar - Filled with `Cream` (#F9F3E3) at 90% opacity, so the band background bleeds slightly through - Sized approximately 320px × 380px, no two alike - Each blob has a `Caveat`-font label at its widest point, positioned as if written in the margin by the illustrator **Bubble-playful motifs:** Scattered across the diagonal bands at low opacity (15–25%) are small circular SVG elements — not modern flat circles, but **Victorian soap-bubble illustrations**: perfect spheres drawn with a highlight arc, a refracted rainbow ring, and a faint shadow below. These derive from the 19th-century physical-optics demonstrations of figures like James Clerk Maxwell, who famously photographed soap bubbles to study interference colors. The bubbles float between content zones, sized between 40px and 180px, with no two the same size. They are decorative but also structural — they visually separate text from frame and suggest the lightness of ideas held briefly before they pop. **Ornamental border system:** Band edges are decorated with a repeating SVG motif — a chain of small linked ellipses (like a Victorian pearl border or a chain of logic symbols) that traces the diagonal cut line on both edges. The chain is `OldGold` (#B8860B) at 60% opacity, 1.5px stroke. **Scale-hover interaction:** The three specimen blobs in Band 3 scale on hover. Specifically: on `mouseenter`, the hovered blob grows to 1.12× scale over 400ms (`cubic-bezier(0.34, 1.56, 0.64, 1)` — the overshoot spring curve), and its label swells from 0.85rem to 1.05rem. Simultaneously, the other two blobs shrink to 0.94× scale, pulling their labels inward. On `mouseleave`, all three return to 1× over 300ms. The effect reads as **a specimen being lifted from the tray for closer inspection** while the others settle back. This scale-hover choreography (scale-hover at 2% in the corpus) is the primary interaction pattern; no parallax, no scroll-triggered stagger. ## Prompts for Implementation **The story to tell.** A visitor opens a large-format folio volume, bound in burgundy cloth with a gold-stamped spine reading *Rational.Group — Collected Observations*. The folio lies open on a reading table. The visitor scrolls downward through the folio, reading each diagonal section as a page in the volume. The soap bubbles drifting across the pages are the speculative ideas that have not yet been captured in specimens — they might burst, or they might one day be framed and labeled. The specimen blobs in Band 3 are the captured ideas — pinned, bordered, annotated. The handwritten labels are the naturalist's own script. **Implementation guidance:** - Build the diagonal-sections as `position: relative; overflow: hidden` wrappers, with the diagonal cut achieved via `clip-path: polygon()` on each band. The band itself should be wider than the viewport (105vw, left: -2.5vw) so the diagonal never reveals white gaps at corners. - The counter-rotation technique: each band has an inner `.content` div with `transform: rotate(-7deg)` and `transform-origin: center center`. The band itself is `transform: skewY(7deg)` applied to the band's bottom edge using clip-path rather than skew (to avoid content distortion). Preferred approach: the `clip-path` is calculated per-band in JS at load time, based on viewport width, so diagonal depth is always exactly 80px at the widest viewport point. - The organic blobs are hardcoded SVG path data — not generated. Write three distinct blob paths (approximately D="M 160,20 C 230,10 310,60 320,140 C 330,220 280,310 200,330 C 120,350 40,290 20,210 C 0,130 50,50 120,30 Z" as a starting template). Each must be visually distinct — one elongated-vertical, one wide-horizontal, one roughly equilateral. - Soap bubbles: render as SVG `` with `fill: none; stroke: currentColor; opacity: 0.2` plus a `` highlight arc (top-left quarter of the circle, 2px white stroke, 40% opacity). Scatter 12–18 bubbles across the full page height, random sizes 40–180px, random X positions 5–95vw, attached to a fixed SVG layer behind all content. - The Caveat font annotations: position each blob label as `position: absolute` in the blob's coordinate space, set with `font-family: 'Caveat', cursive; font-size: 0.85rem; color: #3D2B1F; opacity: 0.7; transform: rotate(-3deg)`. Slight rotation on labels makes them read as genuinely handwritten rather than typeset. - Scale-hover: Use a single `mouseover`/`mouseleave` handler on the `.specimens-band` wrapper. On `mouseover`, check `event.target.closest('.specimen-blob')`. If found, apply `transform: scale(1.12)` to that blob and `transform: scale(0.94)` to siblings. Use CSS `transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1)` on hover-in and `transition: transform 300ms ease-out` on hover-out (toggle a class to swap the transition timing). - The TOC sidebar: `position: fixed; right: 2rem; top: 50%; transform: translateY(-50%)`. Five `` elements in `Caveat` font, spaced 2rem apart vertically, each with a `data-band` attribute. Active band highlights in `Ochre` (#CC7A00). Use IntersectionObserver to track which band is in viewport. - Typography loading: preconnect to fonts.googleapis.com. Load `Almendra:wght@400;700`, `Lora:ital,wght@0,400;1,400`, `Caveat:wght@400` in a single Google Fonts request. Add `font-display: swap`. - AVOID: hero CTAs, "Get started" buttons, pricing tables, stat grids, feature cards, testimonials, social proof rails, logo bars, sticky navigation, hamburger menus, parallax scrolling (overused at 75%), scroll-triggered stagger animations (overused at 35%), any gradient backgrounds (overused at 77%). The page must have no interactive element beyond the scale-hover on specimens and the passive TOC scrollspy. - AVOID: photography, stock imagery, generative gradients, blur overlays, glassmorphism cards. ## Uniqueness Notes **Differentiators from every other design in the registry:** 1. **Diagonal-section layout as Victorian field transect, not CSS marketing chevrons.** The corpus shows `diagonal-sections` at 3% — rare — but in those prior uses, diagonals are decorative separators between otherwise conventional sections. This design makes the diagonal the *primary structural unit*, with counter-rotated content grids inside each tilted band, creating the effect of a tilted specimen board. No other registry entry uses diagonal-sections as stratigraphy. 2. **Handwritten annotation typography as specimen labeling system, not headline style.** Handwritten faces appear in the corpus at 17% — moderate — but they are uniformly used as headline or display faces, large and dominant. Here, `Caveat` is used exclusively at *small scale* (0.85–2rem) and *low opacity* (70%), positioned as margin annotations and specimen labels within a formal serif text context. The contrast is between the formality of Almendra headlines and Lora body versus the intimacy of a penciled note in the margin. 3. **Victorian soap-bubble motifs as floating structural separators derived from 19th-century optics demonstrations.** The `bubble-playful` motif is assigned in the seed but nothing in the corpus has combined Victorian-ornate with a bubble system. Prior bubble/circle uses in the registry are uniformly modern, flat, or geometric (Bauhaus dots, abstract circles). This design roots the bubble visually in physical-optics illustration — the highlight arc, the refraction ring, the cast shadow — making them identifiably Victorian scientific objects rather than decorative dots. 4. **Scale-hover as specimen-lift choreography with sibling-shrink.** `scale-hover` appears in the corpus at 2% — the lowest-use interaction pattern in the registry. This design extends it beyond simple hover-scale by adding sibling attenuation (sibling blobs shrink while hovered blob grows), creating a tactile specimen-examination interaction that has no precedent in the registry. 5. **Warm-earthy palette drawn from Victorian mineral pigments, with no black, no white, no gray.** `warm-earthy` appears at 3% — rare. But the specific constraint of *zero achromatic values* (no black, no white, no gray) and *all values drawn from the historical Victorian watercolor pigment set* (ochre, sienna, umber, verdigris, malachite) is unprecedented. Most warm palettes in the registry use warm accent + neutral base; this inverts by making the warmest, most saturated values the neutrals and the midtones. **Seed:** aesthetic: victorian-ornate, layout: diagonal-sections, typography: handwritten, palette: warm-earthy, patterns: scale-hover, imagery: organic-blobs, motifs: bubble-playful, tone: opulent-grand