# Design Language for goomimi.com ## Aesthetics and Tone A customization playground where decorating is democratized -- goomimi.com (꾸미기, decorating) renders as a friendly tool-palette interface where color swatches, pattern samples, and styling options are laid out like an art supply store. The tool-palette aesthetic organizes creative options visually: grids of color chips, rows of pattern swatches, and stacks of font samples invite browsing and selection. The tone is workshop-inviting: "Pick a color. Choose a pattern. Make it yours." ## Layout Motifs and Structure **Palette System:** Content organized as selectable swatches and samples in a grid. **Section Flow:** 1. **The Palette:** Hero with the title surrounded by floating color swatches. 2. **The Colors:** A grid of color chips with hex labels. 3. **The Patterns:** A grid of pattern samples (CSS patterns in small tiles). 4. **The Showcase:** Examples showing combinations in action. ## Typography and Palette - **Headlines:** "Gowun Dodum" at 2.5rem-4rem, weight 400. - **Body:** "Noto Sans KR" at 1rem, weight 400, line-height 1.7. **Palette:** Rainbow of 12 curated swatches from warm to cool, on a light grey (#f4f4f4) background, with dark text (#2a2a2a). ## Imagery and Motifs **Color Chip Grid:** Small squares (48px) with various colors, slight border-radius (4px), arranged in a grid with hex values below each. **Pattern Swatches:** Tiles (80px) showing CSS-generated patterns (stripes, dots, checks, waves) in various color combinations. **Floating Color Chips:** Small color squares with gentle drift animation around the hero area. **Combination Showcase:** Larger panels showing color + pattern + typography combinations as mini design mockups. ## Prompts for Implementation Build as a creative supply store. Color chips load in a rainbow sequence (staggered 30ms). Pattern swatches demonstrate CSS pattern variety. Hovering swatches scales them slightly (1.1x) and shows the CSS code for the pattern. The showcase section demonstrates that combinations matter more than individual choices. Korean typography creates cultural connection. ## Uniqueness Notes 1. **Art-supply-store as interface metaphor:** Organizing creative options as physical store inventory is distinctive. 2. **CSS pattern swatch gallery:** A showcase of pure-CSS patterns as interactive swatches is technically interesting. 3. **Korean craft-culture focus:** The 꾸미기 cultural concept of decoration drives the entire design philosophy. 4. **Combination showcase as teaching tool:** Demonstrating how individual choices combine creates educational value. Document chosen seed/style: aesthetic: tool-palette, layout: swatch-grid, typography: korean-sans, palette: rainbow-curated, patterns: css-patterns, imagery: color-chips, motifs: floating-swatches, tone: workshop-inviting