# Design Language for haru.club ## Aesthetics and Tone A spring-morning social space -- "haru" (하루/春) means both "one day" in Korean and "spring" in Japanese, and this .club domain becomes a warm gathering place for daily micro-celebrations. The aesthetic is pastel-pop: soft cherry-blossom pinks, mint greens, and lavender blues create a gentle color world inspired by Japanese 春 (spring) season palettes and Korean cafe culture. Rounded shapes, bubbly typography, and playful micro-interactions create an inviting, youthful atmosphere. The tone is cheerful-inclusive -- bright, encouraging, and community-oriented, like a cozy club where each day brings something small to celebrate. ## Layout Motifs and Structure The layout uses a **card-mosaic** architecture -- content is arranged as a mosaic of rounded cards in varying sizes, organized in a CSS Grid with organic-feeling placement. **Mosaic System:** - CSS Grid: 3 columns on desktop, 2 on tablet, 1 on mobile - Cards have generous border-radius (20px) and soft shadows (0 4px 16px rgba(0,0,0,0.06)) - Cards vary in height based on content, creating a Pinterest-like mosaic - 16px grid gaps with a soft #f8f5ff background behind the grid **Section Flow:** 1. **Welcome Bubble (Hero):** A large rounded card spanning all 3 columns with "haru.club" in bubbly display type, cherry blossom pink background (#fce4ec), and a subtitle "every day is a little celebration" in lighter text. 2. **Today's Moments:** A mosaic of smaller cards, each representing a daily moment -- morning coffee, first smile, favorite song. Cards have pastel background colors cycling through the palette. 3. **Club Activities:** Medium cards describing community features with playful icons (CSS-drawn: circles, hearts, stars using border-radius and transforms). 4. **Join Section:** A full-width soft-gradient card (pink to lavender) with a welcoming message and a styled "join" element (decorative, not functional). 5. **Footer:** A row of small circular avatars (CSS gradient circles) representing community members, with the domain name centered below. ## Typography and Palette **Typography:** - **Display:** "Quicksand" (Google Fonts) -- a rounded geometric sans-serif with friendly, approachable character. Used at 2rem-4rem, weight 700, line-height 1.2. - **Body:** "Nunito" (Google Fonts) -- a warm rounded sans with excellent readability. Used at 1rem, weight 400, line-height 1.75. - **Accent:** "Quicksand" at 0.8rem, weight 600, for labels, tags, and category names. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Cloud White | Soft background | #f8f5ff | Page background | | Sakura Pink | Cherry blossom | #f8bbd0 | Primary accent, hero bg | | Mint | Fresh green | #b2dfdb | Secondary accent, cards | | Lavender | Soft purple | #d1c4e9 | Tertiary accent, cards | | Sky Blue | Pastel blue | #bbdefb | Quaternary accent, cards | | Cream | Warm peach | #ffe0b2 | Fifth accent, cards | | Text Dark | Warm charcoal | #37474f | Headlines, primary text | | Text Mid | Soft gray | #607d8b | Body text | | Text Light | Light gray | #90a4ae | Captions, metadata | ## Imagery and Motifs **Rounded Everything:** All UI elements use generous border-radius (16-24px for cards, 50% for avatars, 8px for buttons). No sharp corners anywhere -- the entire experience feels soft and approachable. **Pastel Card Backgrounds:** Cards cycle through the five pastel colors (pink, mint, lavender, blue, cream), creating a colorful mosaic without any single color dominating. **CSS Shape Icons:** Simple decorative icons built from CSS: circles (border-radius: 50%), hearts (two rotated rounded squares), stars (clip-path polygons). These appear as small (24-32px) decorations within cards. **Soft Shadows:** Every elevated element uses a diffuse shadow: 0 4px 16px rgba(0,0,0,0.06). No hard edges, no borders visible -- shadows alone create the visual hierarchy. **Hover Bounce:** Cards respond to hover with a gentle upward bounce: transform: translateY(-4px); transition: 300ms cubic-bezier(0.34, 1.56, 0.64, 1) -- a slightly springy easing that matches the cheerful tone. ## Prompts for Implementation Build this as the coziest corner of the internet. The pastel palette should feel like a Japanese stationery store in spring -- cheerful but not overwhelming. Cards populate the mosaic with a gentle stagger animation on load: each card fades in with translateY(12px) to translateY(0) over 400ms, with 60ms delays between cards. The hero bubble should feel warm and inviting, with "haru.club" in Quicksand creating an instant sense of friendliness. Micro-interactions matter: the hover bounce on cards, subtle background-color shifts on interactive elements, and the springy easing curve all contribute to the playful, welcoming atmosphere. The CSS-drawn icons should feel handmade and charming rather than polished. AVOID: dark themes, sharp corners, monospace fonts, corporate layouts, harsh colors, aggressive animations, dense text blocks. ## Uniqueness Notes 1. **Pastel-pop card mosaic:** The combination of soft pastel cycling colors with rounded mosaic cards creates a uniquely warm, stationery-inspired web aesthetic. 2. **Spring-culture dual meaning:** Bridging Korean "하루" (one day) and Japanese "春" (spring) in the visual language creates a cross-cultural celebration. 3. **CSS-drawn charming icons:** Simple geometric icons built from pure CSS (hearts, stars, circles) add handmade character. 4. **Springy hover bounce easing:** The cubic-bezier overshoot on hover interactions gives cards a physically playful personality. Document chosen seed/style: aesthetic: pastel-pop, layout: card-mosaic, typography: rounded-sans, palette: sakura-pastel, patterns: hover-bounce, imagery: css-shapes, motifs: spring-celebration, tone: cheerful-inclusive Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), parallax patterns (98%), tech motifs (97%), minimal imagery (96%)