# Design Language for rational.group ## Aesthetics and Tone rational.group channels a zen aesthetic — the mindful, uncluttered tranquility of Japanese garden design applied to a rational group collaboration platform. The site breathes — generous emptiness surrounding each element, the deliberate placement of every component, and the contemplative stillness of a rock garden where each stone represents a collaborative insight. Inspiration draws from the karesansui dry gardens of Ryoan-ji temple, the minimalist architecture of Tadao Ando, the thoughtful spacing of traditional Japanese calligraphy, and the serene compositions of Hiroshi Sugimoto's seascape photography. The tone is warm-inviting — hospitable, welcoming language that makes rational collaboration feel like gathering in a comfortable, peaceful space. ## Layout Motifs and Structure The layout uses a **parallax-sections** architecture — content arranged in layered depth planes that create the garden-stroll quality of moving through different contemplative spaces in a Japanese garden. **Parallax Sections Architecture:** - Full-viewport sections as garden rooms - Content at varied depth planes (foreground, mid, background) - Generous negative space (40-50% of each viewport) - Feature sections: full stillness moments - Container: 100vw sections with max-width: 800px inner content - The parallax creates the garden-walk quality of moving between meditative spaces **Section Sequence:** 1. **Gate:** Hero with variable-fluid title on coastal-blend zen gradient, custom-illustration hand-crafted visual elements, futuristic clean accent lines 2. **Garden:** Group collaboration tools in parallax depth — parallax interactive layer movement with custom-illustration detailed illustrations 3. **Pavilion:** Featured group tool in full-stillness moment with futuristic precise accent elements and custom-illustration immersive illustration 4. **Path:** Secondary tools along contemplative path with custom-illustration simplified sketches 5. **Rest:** Footer as meditation seat — warm-inviting closing with futuristic settled lines and peaceful farewell ## Typography and Palette **Typography:** - **Headlines:** "Literata" (Google Fonts) — variable serif at 2.2rem-3rem, weight 700, using optical size axis. Its fluid variable nature embodies zen's acceptance of impermanence and continuous change. - **Body Text:** "Nunito" (Google Fonts) — rounded sans at 0.95rem, weight 400, line height 1.9. - **Accent:** "Literata" at 1.1rem, weight 400, italic for contemplative annotations and group insights. - **Labels:** "Nunito" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Zen Sand:** #f4efe4 — warm zen sand for backgrounds - **Stone Surface:** #e4dcd0 — warm stone for panels - **Coastal Blue:** #5088a0 — muted coastal blue for primary accent - **Coastal Sage:** #789878 — warm sage for secondary accent - **Coastal Coral:** #c08870 — soft coral for tertiary accent - **Text Stone:** #2c2820 — warm stone dark for body text - **Shadow Sand:** #a89880 — sand shadow for secondary text - **Border Zen:** rgba(80,136,160,0.08) — coastal blue border ## Imagery and Motifs **Custom-Illustration Contemplative Visuals:** Group collaboration concepts illustrated through bespoke, hand-crafted SVG illustrations — simplified natural forms (rocks, water ripples, bamboo, 30-60px) in Coastal Blue and Coastal Sage with 1.5px strokes. The illustrations create the garden-element quality of each collaborative concept as a carefully placed garden stone. **Parallax Garden Depth:** Sections create depth through parallax movement — background elements at 0.3x scroll speed, midground at 0.6x, foreground at 1.0x. The depth creates the garden-perspective quality of foreground, middle-ground, and distant scenery in Japanese garden design. **Futuristic Clean Accent Lines:** Thin structural lines (1px) in Coastal Blue at 0.06 opacity creating minimal brackets and corner marks around content panels. The futuristic accents provide analytical structure against zen organic warmth. **Coastal-Blend Zen Atmosphere:** Background uses warm coastal tones — radial-gradient(at 50% 40%, rgba(80,136,160,0.03), transparent 40%), radial-gradient(at 40% 70%, rgba(120,152,120,0.02), transparent 35%). The coastal blend creates the seaside-garden quality of a zen space with ocean proximity. **Rock Garden Texture:** Panel surfaces feature subtle sand-raked texture — repeating-linear-gradient(170deg, transparent, transparent 8px, rgba(44,40,32,0.006) 8px, rgba(44,40,32,0.006) 9px). The texture creates the karesansui quality of carefully raked sand patterns. ## Prompts for Implementation Build the page as a zen rational group garden. Parallax: .zen-room { min-height: 100vh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .zen-content { max-width: 800px; margin: 0 auto; padding: 80px 24px; position: relative; z-index: 2; } Parallax depth: .garden-bg { transform: translateY(calc(var(--scroll) * 0.3)); } .garden-mid { transform: translateY(calc(var(--scroll) * 0.6)); } .garden-fg { transform: translateY(calc(var(--scroll) * 1.0)); } Sand texture: .raked-sand { position: relative; } .raked-sand::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(170deg, transparent, transparent 8px, rgba(44,40,32,0.006) 8px, rgba(44,40,32,0.006) 9px); pointer-events: none; } Custom illustration: .garden-svg svg { stroke: var(--garden-color, #5088a0); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } Futuristic brackets: .bracket { position: relative; } .bracket::before, .bracket::after { content: ''; position: absolute; width: 12px; height: 12px; border: 1px solid rgba(80,136,160,0.06); } .bracket::before { top: -4px; left: -4px; border-right: none; border-bottom: none; } .bracket::after { bottom: -4px; right: -4px; border-left: none; border-top: none; } AVOID: Corporate group collaboration dashboards, standard team platforms, and minimal meeting tools. Let zen tranquility and warm-inviting hospitality create a rational group space where collaboration feels like gathering in a peaceful garden for contemplative, purposeful work. ## Uniqueness Notes 1. **Zen for group collaboration:** Japanese garden tranquility makes rational teamwork feel like contemplative practice rather than corporate process. 2. **Parallax as garden stroll:** Layered depth creates the physical experience of walking through different garden rooms. 3. **Rock garden texture as surface:** Sand-raked patterns create the karesansui quality of carefully maintained contemplative space. 4. **Custom-illustration as garden elements:** Hand-crafted natural forms make collaborative concepts feel like carefully placed garden stones. 5. **Variable-fluid typography:** Optical size axis creates the impermanence-accepting quality of zen philosophy applied to letterforms. **Seed/Style:** aesthetic: zen, layout: parallax-sections, typography: variable-fluid, palette: coastal-blend, patterns: parallax, imagery: custom-illustration, motifs: futuristic, tone: warm-inviting **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 zen aesthetic, parallax-sections layout, coastal-blend palette, custom-illustration imagery, and warm-inviting tone.