# Design Language for koomimi.com ## Aesthetics and Tone koomimi.com (꾸미미/꾸미기 — Korean for "decorating/styling") embraces a dark-academia aesthetic — the rich intellectual atmosphere of candlelit libraries, antique collections, and scholarly pursuits applied to the art of personal decoration and styling. The site presents the act of decorating as a form of scholarly study, where each styling choice is an intellectual decision rooted in history, aesthetics, and cultural knowledge. Inspiration draws from Oxford University press design, antique cabinet-of-curiosities displays, and the warm darkness of old bookshop interiors. The tone is raw-authentic — styling advice delivered with honest, unfiltered perspective rather than glossy commercial veneer. The diagonal-sections layout creates dynamic visual tension that prevents the dark academic atmosphere from feeling static. ## Layout Motifs and Structure The layout uses **diagonal-sections** — content bands that angle across the viewport at slight diagonal, creating dynamic movement and visual energy within the scholarly dark palette. **Diagonal Section Architecture:** - Sections use CSS clip-path or transform: skewY(-3deg) to create angled boundaries - Content within sections is counter-rotated to remain readable (transform: skewY(3deg)) - Each section overlaps the next by 40-60px, creating a layered/stacked paper effect - Alternating dark and light sections maintain readable contrast **Section Sequence:** 1. **Library Entrance:** Dark hero with an art-deco-styled display title and moody atmospheric gradient 2. **The Collection:** Styling categories presented in angled cards with decorative frames 3. **Study Notes:** Analysis content in a lighter diagonal band with serif text 4. **Cabinet of Curiosities:** Gallery of styling examples in a darker angled section 5. **Colophon:** Footer that straightens (0deg) suggesting emergence from the diagonal flow ## Typography and Palette **Typography:** - **Headlines:** "Cinzel Decorative" (Google Fonts) — ornamental serif with art-deco styling at 2rem-3.5rem, weight 400-700. Its decorative nature embodies the "꾸미기" (decorating) theme. - **Body Text:** "EB Garamond" (Google Fonts) — classical text serif at 1.02rem, weight 400, line height 1.8. - **Korean:** "Nanum Myeongjo" (Google Fonts) — Korean serif for any Korean content. - **Labels:** "Josefin Sans" (Google Fonts) — geometric sans at 0.75rem, weight 600, uppercase for category labels. **Color Palette:** - **Library Dark:** #1a1612 — deep warm black for primary dark backgrounds - **Aged Gold:** #c4a050 — burnished gold for ornamental elements and headlines - **Parchment:** #ede4d0 — warm paper for light section backgrounds - **Earth Brown:** #6a5040 — rich brown for secondary text and card backgrounds - **Burgundy Accent:** #8a3030 — deep red for emphasis and hover states - **Ivory Text:** #f0ece4 — warm white for text on dark backgrounds - **Dusty Rose:** #c4a0a0 — muted pink for subtle feminine accents - **Tarnished Silver:** #8a8880 — aged silver for borders and dividers ## Imagery and Motifs **Abstract Shapes as Decorative Specimens:** Geometric and organic abstract shapes (circles, spirals, tessellations) rendered in SVG with palette colors, displayed like specimens in a curiosity cabinet — each within a simple frame border. **Futuristic Motif Tension:** Despite the dark-academia base, occasional futuristic elements intrude — thin neon lines, subtle holographic reflections on surfaces, glitch-like text effects. This creates tension between antique styling and cutting-edge aesthetics. **Hover-Lift on Specimens:** Gallery items lift 6px on hover with deepening shadow (0 8px 24px rgba(0,0,0,0.3)), simulating picking up an object from a display surface. **Candlelight Glow Effects:** Warm radial gradients (#c4a050 at 0.05-0.1 opacity) positioned behind key content areas simulate candlelight pools, adding warmth to the dark palette. **Art Deco Display Typography:** Decorative initial caps and headline treatments use geometric patterns within letterforms — thin line details and ornamental serifs characteristic of 1920s display type. ## Prompts for Implementation Build the page with diagonal-section architecture. Each section div uses transform: skewY(-3deg) with an inner content wrapper using transform: skewY(3deg) to keep text readable. Overlapping is achieved with negative margins (-40px to -60px) and z-index layering. The diagonal clip-path alternative: clip-path: polygon(0 4%, 100% 0%, 100% 96%, 0% 100%) creates angled top and bottom edges. Each section uses slightly different angles for variety. Candlelight glow: large (400-600px) radial-gradient from #c4a050 at 0.06 opacity to transparent, positioned behind key content zones using absolutely positioned pseudo-elements. Specimen hover-lift: transition: transform 0.3s ease, box-shadow 0.3s ease. On hover: transform: translateY(-6px), box-shadow: 0 8px 24px rgba(0,0,0,0.3). Art-deco headlines: use CSS text-decoration or border-based ornaments — thin lines above and below headlines with small diamond shapes at center (rotated 4px squares). AVOID: CTA-heavy layouts, pricing blocks, stat-grids. Let the dark-academia styling and diagonal dynamism create an intellectually rich decoration showcase. ## Uniqueness Notes 1. **Dark-academia for decoration/styling:** Applying scholarly library aesthetics to personal decoration creates an intellectual framework for styling choices. 2. **Diagonal sections with counter-rotated content:** The angled layout creates dynamic energy within the otherwise contemplative dark palette. 3. **Curiosity cabinet gallery format:** Presenting styling examples as museum specimens adds scholarly weight to decorative content. 4. **Candlelight glow effects in dark UI:** Warm light pools simulating candles add atmospheric warmth that prevents the dark theme from feeling cold. 5. **Art-deco display typography for 꾸미기:** Using ornamental letterforms to represent the decorating concept creates visual-conceptual alignment. **Seed/Style:** aesthetic: dark-academia, layout: diagonal-sections, typography: art-deco-display, palette: earth-tones, patterns: hover-lift, imagery: abstract-shapes, motifs: futuristic, tone: raw-authentic **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses dark-academia aesthetic, diagonal-sections layout, earth-tones palette, abstract-shapes imagery, and raw-authentic tone.