# Design Language for nonri.day ## Aesthetics and Tone nonri.day channels a blobitecture aesthetic — the fluid, organic forms of blob-shaped architecture and biomorphic design applied to a daily activity and lifestyle platform. The site flows like liquid — rounded corners everywhere, undulating section boundaries, and the soft, approachable quality of objects designed without a single sharp edge. Inspiration draws from the organic architecture of Zaha Hadid, the blob-form furniture of Karim Rashid, the fluid interfaces of Notion's marketing pages, and the soft, bubbly quality of Studio Ghibli's environmental design. The tone is calm-serene — gentle, breathing language that treats each day as a pool of still water to be entered mindfully. ## Layout Motifs and Structure The layout uses a **card-grid** architecture — content organized in rounded, blob-influenced cards that feel like smooth stones arranged in a zen garden. **Card Grid Architecture:** - CSS Grid: repeat(auto-fill, minmax(280px, 1fr)) - Cards: border-radius: 24px (blob-rounded) - Feature cards span 2 columns with extra large radius (32px) - Gap: 18px between cards - Container: max-width: 1040px centered - Every edge softened — no sharp corners anywhere **Section Sequence:** 1. **Sunrise:** Hero with rounded-sans title on aurora-gradient, glassmorphic-cards translucent overlay panels, floating-elements soft blob shapes drifting 2. **Flow:** Daily activities in card grid — lottie-animation interactive micro-animations with glassmorphic-card surfaces 3. **Pool:** Featured moments in expanded blob-cards with floating-elements ambient shapes and aurora atmospheric treatment 4. **Drift:** Evening wind-down activities in softened grid with glassmorphic-cards translucent treatment 5. **Stillness:** Footer as day's end — calm-serene closing with floating-elements settling into rest and gentle sign-off ## Typography and Palette **Typography:** - **Headlines:** "Nunito" (Google Fonts) — rounded sans at 2.2rem-3rem, weight 700. Its soft, circular letterforms perfectly match the blob aesthetic's commitment to rounded forms. - **Body Text:** "Nunito" at 0.95rem, weight 400, line height 1.75. - **Accent:** "Nunito" at 1rem, weight 600 for daily highlights and featured moments. - **Labels:** "Nunito" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Aurora Violet:** #6848b8 — soft aurora violet for primary accent - **Aurora Teal:** #38b8a8 — calm aurora teal for secondary accent - **Aurora Pink:** #c870a0 — gentle aurora pink for tertiary accent - **Cloud White:** #f6f4f8 — soft cloud white for backgrounds - **Mist Lavender:** #e8e0f0 — lavender mist for card surfaces - **Deep Calm:** #181420 — deep calm for dark sections - **Text Soft:** #28202c — soft near-black for body text - **Border Glass:** rgba(104,72,184,0.1) — glassy border ## Imagery and Motifs **Glassmorphic-Cards Translucent Surfaces:** Activity cards use glassmorphism — background: rgba(246,244,248,0.7), backdrop-filter: blur(12px), border: 1px solid rgba(104,72,184,0.08), border-radius: 24px. The frosted-glass quality creates the floating, weightless sensation of clouds viewed through morning mist. **Lottie-Animation Micro-Interactions:** Activity cards feature small animated illustrations (implemented as CSS-animated SVGs) — gentle bobbing (translateY(0) to translateY(-4px) over 3s ease-in-out infinite), rotating slowly (rotate(0) to rotate(360deg) over 20s linear infinite). The micro-animations create the living, breathing quality of a calm ecosystem. **Floating-Elements Ambient Blobs:** Soft blob shapes (SVG with organic border-radius equivalents, 40-120px) in Aurora Violet, Teal, and Pink at 0.03-0.06 opacity floating in background. No animation — static, carefully positioned organic shapes that create atmospheric depth without demanding attention. **Aurora-Gradient Atmospheric Warmth:** Section backgrounds use aurora-inspired gradients — linear-gradient(135deg, rgba(104,72,184,0.04), rgba(56,184,168,0.04), rgba(200,112,160,0.03)). The multi-color aurora creates a sunrise-to-sunset atmospheric cycle through the page. **Blob-Rounded Everything:** Every interactive element uses maximum border-radius — buttons: border-radius: 50px; cards: 24px; input fields: 16px; images: 20px. The universal softness creates the biomorphic quality where no element has a harsh edge. ## Prompts for Implementation Build the page as a blobitecture daily flow. Grid: display: grid, grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)), gap: 18px. Container: max-width: 1040px, margin: 0 auto, padding: 60px 24px. Glassmorphic: .glass-card { background: rgba(246,244,248,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(104,72,184,0.08); border-radius: 24px; padding: 28px; } Lottie animation: .micro-anim { animation: gentleBob 3s ease-in-out infinite; } @keyframes gentleBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } Floating blobs: .ambient-blob { position: absolute; border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; background: var(--blob-color, rgba(104,72,184,0.04)); width: var(--size, 80px); height: var(--size, 80px); } Aurora gradient: .aurora-section { background: linear-gradient(135deg, rgba(104,72,184,0.04), rgba(56,184,168,0.04), rgba(200,112,160,0.03)); } AVOID: Angular, grid-heavy dashboards, corporate daily planners, and sharp-edged productivity tools. Let blobitecture softness and calm-serene language create a daily platform where every interaction feels as gentle as stepping into still water. ## Uniqueness Notes 1. **Blobitecture for daily platform:** Biomorphic, rounded forms make daily activities feel organic and flowing rather than scheduled and rigid. 2. **Card-grid as zen garden:** Rounded cards arranged like smooth stones create a contemplative rather than functional browsing experience. 3. **Glassmorphic as morning mist:** Translucent card surfaces create the floating quality of objects seen through morning fog. 4. **Aurora-gradient as day cycle:** Multi-color atmospheric gradients map the sunrise-to-sunset cycle of a complete day. 5. **Blob-rounded everything:** Universal soft corners create a world where no interaction feels sharp, abrupt, or harsh. **Seed/Style:** aesthetic: blobitecture, layout: card-grid, typography: rounded-sans, palette: aurora-gradient, patterns: lottie-animation, imagery: glassmorphic-cards, motifs: floating-elements, tone: calm-serene **Avoided Overused Patterns:** corporate aesthetic (84%), parallax patterns (90%), asymmetric layout (88%), mono typography (91%), warm palette (93%), friendly tone (84%), minimal imagery (89%). This design uses blobitecture aesthetic, card-grid layout, aurora-gradient palette, glassmorphic-cards imagery, and calm-serene tone.