# MyDamii Consumer App (Global) - Design Concept

> K-Beauty Global B2B2C Platform | Target: Japan, US (1st) > EU, Russia (2nd)
> Brand: **MyDamii** (다미) — "Luminous Earth K-Beauty"

---

## 1. Design Philosophy

### Core Value: "The Sculpted Glow"
- **Trust**: EWG ingredient safety scores front-and-center
- **Discovery**: AI-powered skin matching + KOC short-form commerce
- **Global**: Culture-specific UX (JP precision / US minimalism / EU compliance)

### Brand Story
MyDamii(다미) embodies the warmth of sun-dried clay and the luminosity of healthy skin. The design rejects cold, flat digital interfaces in favor of an organic, high-end aesthetic inspired by the tactile quality of soft clay, hand-poured creams, and the ethereal radiance of beauty.

### Design Positioning
```
                    Premium
                       ↑
         ┌─────────────┼─────────────┐
         │   Amore     │   MyDamii   │  ← Target position
         │   Pacific   │    🎯       │
    Data-driven ←──────┼─────────────→ Emotional
         │   Hwahae    │  Olive Young│
         │             │  Global     │
         └─────────────┼─────────────┘
                       ↓
                    Casual
```
**MyDamii = Hwahae's ingredient transparency + Olive Young's shopping experience + Luminous Earth premium branding**

---

## 2. Color System — Luminous Terracotta

> ⚠️ **Design Language**: "No-Line Rule" — Borders are avoided for sectioning. Boundaries defined by background shifts and tonal transitions.

### 2.1 Primary Palette — Luminous Terracotta

| Role | Color | HEX | Usage |
|------|-------|-----|-------|
| **Primary** | Terracotta | `#9f402d` | Logo, active states, CTA buttons |
| **Primary Container** | Coral | `#e2725b` | Accent actions, soft CTA |
| **Primary Fixed** | Blush | `#ffdad3` | Featured card backgrounds, pastel CTA |
| **Primary Fixed Dim** | Warm Peach | `#ffb4a5` | Soft accent, hover states |
| **Secondary** | Clay Brown | `#845144` | Secondary text, supporting UI |
| **Secondary Container** | Peach | `#ffbcab` | Secondary card fills |
| **Secondary Fixed** | Rose Cream | `#ffdbd1` | Secondary CTA background |
| **Tertiary** | Sage Olive | `#55624f` | Natural/organic elements |
| **Background** | Warm White | `#fbf9f7` | Page background |
| **Surface** | Silk | `#f5f3f1` | Card backgrounds |
| **Surface Container** | Clay Mist | `#efedec` | Section dividers |
| **Text Primary** | Charcoal | `#1b1c1b` | Headings, body text |
| **Text Secondary** | Warm Gray | `#56423e` | Captions, metadata |
| **Text Tertiary** | Clay Gray | `#89726d` | Placeholders, hints |
| **Outline Variant** | Blush Border | `#ddc0ba` | Ghost borders (15% opacity only) |

### 2.2 EWG Safety Colors — Warm Harmonized

| Grade | Color | HEX | Background | Border |
|-------|-------|-----|------------|--------|
| **Safe (1-2)** | Warm Sage | `#2e7d5b` | `#f0f7f2` | `#cce5d4` |
| **Caution (3-6)** | Warm Ochre | `#c27a1e` | `#fdf5eb` | `#f5e2c4` |
| **Danger (7-10)** | Clay Red | `#ba1a1a` | `#fef1f0` | `#fad4d2` |

### 2.3 Brand Tier Colors — Terracotta Family

| Tier | Color | HEX | Background | Border | Usage |
|------|-------|-----|------------|--------|-------|
| **MEGA** | Terracotta | `#9f402d` | `#fdf0ed` | `#fad8d2` | Large verified brands |
| **DERMA** | Warm Blue-Gray | `#5a6f82` | `#eef2f5` | `#d4dde4` | Dermatology brands |
| **INDIE** | Warm Olive | `#6b7f52` | `#f2f5ee` | `#d8e4cc` | Independent brands |

### 2.4 Semantic Colors — Warm Tones

| Role | Color | HEX | Usage |
|------|-------|-----|-------|
| Success | Warm Sage | `#2e7d5b` | Completion, success states |
| Warning | Warm Ochre | `#c27a1e` | Caution, warnings |
| Error | Clay Red | `#ba1a1a` | Errors, delete, notification dots |
| Info | Blue-Gray | `#5a6f82` | Information, tips |
| Star Rating | Warm Gold | `#d4a054` | Star ratings, reviews |

---

## 3. Typography

### 3.1 Font Stack

```css
/* Display & Headlines */
font-family: 'Noto Serif', 'Pretendard', serif;

/* Body & Labels */
font-family: 'Manrope', 'Pretendard', -apple-system, sans-serif;

/* CJK Support */
font-family: 'Pretendard', 'Noto Sans JP', 'Noto Sans SC', sans-serif;
```

### 3.2 Type Scale

| Purpose | Size | Weight | Line Height | Font | Usage |
|---------|------|--------|-------------|------|-------|
| Hero Title | 28px | 700 | 1.1 | Noto Serif | Main banner text |
| Page Title | 22px | 700 | 1.2 | Noto Serif | Screen headers |
| Section Title | 18px | 600 | 1.4 | Noto Serif | Section headers |
| Card Title | 15px | 600 | 1.4 | Manrope | Product names |
| Body | 14px | 400 | 1.6 | Manrope | Descriptions |
| Price | 18px | 700 | 1.2 | Manrope | Price display |
| Caption | 12px | 400 | 1.5 | Manrope | Metadata |
| Badge | 11px | 600 | 1.0 | Manrope | Badge text |
| Label | 10px | 700 | 1.0 | Manrope | Uppercase labels, tracking-widest |

---

## 4. Component System — Tactile Objects

### 4.0 Card Design Principle — Soft Neomorphism

> 🎨 **Core Rule**: Cards use **tonal layering** and **ambient shadows** instead of hard borders.
> **NO box-shadows** with harsh edges — use sculpted, diffused shadows.
> **NO 1px border lines** for sectioning — use background shifts.

**Elevation & Depth:**

| Level | Technique | CSS |
|-------|-----------|-----|
| **Flat** | Background shift | `background: #f5f3f1` on `#fbf9f7` parent |
| **Raised** | Sculpted shadow | `box-shadow: 0px 20px 40px rgba(86,66,62,0.06)` |
| **Pressed** | Inner glow | `box-shadow: inset 4px 4px 10px rgba(255,255,255,0.8), inset -4px -4px 10px rgba(137,114,109,0.1)` |
| **Floating** | Glassmorphism | `background: rgba(251,249,247,0.8); backdrop-filter: blur(20px)` |

**CSS Patterns:**
```css
/* Primary CTA — Terracotta Gradient */
.btn-primary {
  background: linear-gradient(135deg, #9f402d, #e2725b);
  color: white;
  padding: 14px 24px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0px 20px 40px rgba(159,64,45,0.2);
}

/* Secondary — Borderless */
.btn-secondary {
  background: #efedec;
  color: #845144;
  border: none;
}

/* Sculpted Card */
.card-sculpted {
  background: #ffffff;
  border-radius: 1.5rem;
  box-shadow: inset 2px 2px 5px rgba(255,255,255,0.7),
              inset -2px -2px 5px rgba(86,66,62,0.05),
              0px 20px 40px rgba(86,66,62,0.06);
}
```

### 4.1 Bottom Navigation (4-Tab)

```
┌──────┬──────┬──────┬──────┐
│  ✦   │  ✧   │  🏛  │  👤  │
│Radiance│Rituals│Atelier│Profile│
└──────┴──────┴──────┴──────┘
```
- Active: Terracotta `#9f402d` + label bold + bg `rgba(159,64,45,0.08)` pill
- Inactive: `#89726d` (clay gray)
- Container: Glassmorphic `bg-stone-50/80 backdrop-blur-2xl rounded-t-[2rem]`

### 4.2 Logo

```
┌──────────────────────────────┐
│ MyDamii                      │  Noto Serif italic, text-2xl
│                              │  Color: #9f402d (terracotta)
└──────────────────────────────┘
```

---

## 5. Layout

### Mobile Constraint
```css
body {
  max-width: 393px;  /* iPhone 14 Pro */
  margin: 0 auto;
}
```

### Spacing Tokens
- `--r: 2rem` (hero sections)
- `--r2: 1.5rem` (cards)
- `--r3: 0.75rem` (buttons)
- Page padding: `0 24px`
- Card gap: `24px` (generous breathing room)

---

## 6. Cultural UX Adaptation

### Japan 🇯🇵 (1st Market)
- Precise, detailed information architecture
- Warm clay tones align with wabi-sabi aesthetic
- Detailed filter options, ranking systems

### US 🇺🇸 (1st Market)
- Clean, generous whitespace — "atelier" feel
- Social proof: Star ratings + curated reviews
- Customs: Estimated duty clearly displayed

---

## 7. CSS Variable Reference (`:root` block)

```css
:root {
  /* Brand — Luminous Terracotta */
  --primary: #9f402d;
  --primary-soft: #e2725b;
  --primary-light: #ffdad3;
  --primary-bg: rgba(159,64,45,0.04);
  --primary-gradient: linear-gradient(135deg, #9f402d, #e2725b);
  --accent: #845144;
  --accent-light: #ffdbd1;

  /* Neutral — Warm Earth */
  --bg: #fbf9f7;
  --white: #FFFFFF;
  --text: #1b1c1b;
  --text2: #56423e;
  --text3: #89726d;
  --text4: #ddc0ba;
  --border: #efedec;

  /* EWG Safety — Warm Harmonized */
  --ewg-safe: #2e7d5b;
  --ewg-safe-bg: #f0f7f2;
  --ewg-safe-border: #cce5d4;
  --ewg-caution: #c27a1e;
  --ewg-caution-bg: #fdf5eb;
  --ewg-caution-border: #f5e2c4;
  --ewg-danger: #ba1a1a;
  --ewg-danger-bg: #fef1f0;
  --ewg-danger-border: #fad4d2;

  /* Brand Tier — Terracotta Family */
  --mega: #9f402d;
  --mega-bg: #fdf0ed;
  --mega-border: #fad8d2;
  --derma: #5a6f82;
  --derma-bg: #eef2f5;
  --derma-border: #d4dde4;
  --indie: #6b7f52;
  --indie-bg: #f2f5ee;
  --indie-border: #d8e4cc;

  /* Semantic — Warm */
  --success: #2e7d5b;
  --warning: #c27a1e;
  --error: #ba1a1a;
  --info: #5a6f82;
  --star: #d4a054;

  /* Radius — Organic */
  --r: 16px;
  --r2: 14px;
  --r3: 12px;
  --r4: 8px;

  /* Transition */
  --ease: cubic-bezier(.4,0,.2,1);
}
```

---

## 8. Screens (27 files + Landing)

| # | Screen ID | File | Description |
|---|-----------|------|-------------|
| 1 | CON-HOME-001 | Consumer_Home.html | Home (Bento grid) |
| 2 | CON-KOC-001 | Consumer_KOC_Shorts.html | KOC Short-form Commerce |
| 3 | CON-KOC-002 | Consumer_KOC_Shorts_Duo.html | KOC Duo Mode |
| 4 | CON-PROD-001 | Consumer_Product_List.html | Product List/Category |
| 5 | CON-PROD-002 | Consumer_Product_Detail.html | Product Detail |
| 6 | CON-CART-001 | Consumer_Cart.html | Shopping Cart |
| 7 | CON-CHKT-001 | Consumer_Checkout.html | Checkout |
| 8 | CON-ORDR-001 | Consumer_Order_Complete.html | Order Complete |
| 9 | CON-AUTH-001 | Consumer_Login.html | Login |
| 10 | CON-AUTH-002 | Consumer_Register.html | Registration |
| 11 | CON-SKIN-001 | Consumer_Skin_Quiz.html | Skin Match Quiz |
| 12 | CON-DERMA-001 | Consumer_Derma_Booking.html | Derma Booking |
| 13 | CON-MYPAGE-001 | Consumer_MyPage.html | My Page |
| 14 | CON-ORDR-002 | Consumer_Order_History.html | Order History |
| 15 | CON-SRCH-001 | Consumer_Search.html | Search |
| 16 | CON-REVW-001 | Consumer_Review_Write.html | Review Write |
| 17 | CON-MAJOR-001 | Consumer_Major.html | MEGA Brand Hub |
| 18 | CON-INDIE-001 | Consumer_Indie.html | INDIE Brand Hub |
| 19 | CON-CUPN-001 | Consumer_Coupon.html | Coupon |
| 20 | CON-RFND-001 | Consumer_Refund.html | Refund |
| 21 | CON-SHIP-001 | Consumer_Shipping_Track.html | Shipping Track |
| 22 | CON-INQR-001 | Consumer_Inquiry.html | Customer Inquiry |
| 23 | CON-NOTI-001 | Consumer_Notification.html | Notifications |
| 24 | CON-WISH-001 | Consumer_Wishlist.html | Wishlist |
| 25 | CON-BRND-001 | Consumer_Brand_Detail.html | Brand Detail |
| 26 | CON-ADDR-001 | Consumer_Address.html | Address Management |
| 27 | CON-STNG-001 | Consumer_Settings.html | Settings |
| — | — | MyDamii_Landing.html | PC Landing Page (responsive) |

---

## 9. Design Reference

Based on **Luminous Earth & Tactile Silk** design system from `02_Development/stitch_design_concept/`.
- Creative North Star: "The Sculpted Glow"
- Key principles: Soft neomorphism, tonal depth, intentional asymmetry
- No borders for sectioning — use background shifts and tonal transitions
- Glassmorphism for floating elements (nav, modals)
- Warm terracotta tint on all neutrals