밀프레드 디자인 명세서
따뜻한 베이지·피치 톤 표준

디자인 철학

밀프레드는 영유아 부모를 위한 따뜻하고 안심되는 브랜드. 메인 사이트 mealfred.com이 디자인 정답. 모든 페이지·문서는 이 톤을 그대로 따른다.

핵심 4원칙

• 따뜻함 — 베이지·피치·살구 그라데이션. 다크 X · 차가운 톤 X
• 안심 — 둥근 라운드(14-24px), 부드러운 그림자, 반투명 frosted 카드
• 친근 — 카피톤 권유형("~해보실래요?"), 이모지 적극 활용
• 학술 신뢰 — 따뜻한 톤 위에 정확한 출처·숫자·근거 명시

컬러 시스템 (메인 정합)

2-1. Hero·배경 베이지 (브랜드 코어)

모든 hero·랜딩 배경의 기본. 차가운 톤 사용 금지.

2-2. 오렌지 액센트 (CTA·강조 전용)

본문 배경 사용 금지. CTA·링크·강조·active chip에만 사용.

2-3. 네이비 (heading 텍스트 전용)

배경 사용 금지. h1·h2·brand-name 등 heading 색상으로만 사용.

2-4. 브라운 (body 텍스트)

본문·캡션 텍스트. 검정(#000) 사용 금지 — 너무 강함.

2-5. Status 라이트 (의미 전달 한정)

신호등·value-card·평가 등 의미가 명확할 때만. 일반 강조엔 오렌지 사용.

2-6. Grade (S/A/B/C/D 진단 결과 전용)

식단 평가·신호등 등급 표시에만. 일반 디자인 컬러 X.

2-7. 사용 규칙

• 다크 배경 금지 — Footer 외 (Footer만 #2A2016 다크 브라운, 다크 네이비 X)
• 오렌지(#FF6B1A)는 CTA·강조에만. 본문 텍스트·hero 배경 X
• 네이비는 텍스트로만. 본문 배경 X
• 그라데이션은 hero·카드 배경에만. 텍스트 그라데이션 금지
• Status·Grade는 의미가 명확할 때만. 디자인 톤으로 사용 X

타이포그래피

3-1. 스케일

3-2. 색상 사용

• Heading (h1·h2·brand): navy #1a2b4a 또는 navy-deep #0F1D35
• 본문: brown-mid #5a4a3a · hero 본문은 brown-deep #3a2a1a
• 강조 strong: orange-deep #C45A00 또는 navy
• 캡션·서브: brown-soft #8a7a6a
• 링크: orange-main #FF6B1A · hover 시 underline

Hero 표준 (모든 페이지 통일)

4-1. 표준 hero CSS (복사·붙여넣기)

.hero{
  background: linear-gradient(160deg,#FFF5EB 0%,#FFE8D0 40%,#FFDBB8 70%,#FFD0A0 100%);
  padding: 64px 20px 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #3a2a1a;
}
.hero::before{
  content:''; position:absolute; top:-40%; left:-40%;
  width:180%; height:180%;
  background: radial-gradient(circle at 30% 70%, rgba(255,120,50,0.08) 0%, transparent 50%),
              radial-gradient(circle at 70% 20%, rgba(255,255,255,0.3) 0%, transparent 50%);
  pointer-events:none;
}
.hero h1{ font-size:clamp(28px,5vw,38px); font-weight:800; color:#1a2b4a; }
.hero h1 .accent{ color:#FF8A47; }      /* 강조 텍스트는 오렌지 */
.hero p{ font-size:15px; color:#5a4a3a; }
.hero p strong{ color:#C45A00; }
.hero .tag{
  background: rgba(255,107,26,0.1);
  border: 1px solid rgba(255,107,26,0.25);
  color: #C45A00;
  padding: 7px 18px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
}

4-2. ✅ DO vs ❌ DON'T

4-3. 카운터·서브 hero

• hero 바로 아래 카운터·trust 영역도 베이지·흰색 톤 유지
• 다크 띠(예전 #1F2D3D counter) 사용 금지
• 예: background: #FFFBF5 또는 linear-gradient(135deg, #E8F5E9, #C8E6C9) (green pill)

컴포넌트 라이브러리

5-1. 버튼

5-2. 칩

5-3. 카드

5-4. 게이지

5-5. 신호등

5-6. 샘플 스코어 카드

레이아웃

6-1. 모바일 우선

• Mobile (default): 풀스크린 100dvh, max-width:430px, viewport-fit=cover
• Desktop (≥500px): 폰 프레임 시뮬레이션 (90vh, max-height:900px, border-radius:36px, dark bg #1B2A4A 외부만)
• safe-area-inset 적용: status-bar padding-top + tab-bar padding-bottom

6-2. 핵심 컨테이너 (앱)

#app{
  max-width:430px; margin:0 auto;
  height:100vh; height:100dvh;
  background:#FFFBF5;     /* 메인 톤 베이지 */
  display:flex; flex-direction:column;
}

6-3. 4-Tab 구조 (앱)

• 🏠 홈 — 영양점수·신호등·진단·레시피CTA
• 📖 도감 — 식재료 친해지기
• 📝 기록 — 식단 입력
• 🍳 레시피 — 4원칙 분류

마이크로 인터랙션

• hover (desktop): transform:translateY(-2px); transition:0.15s ease
• tap (mobile): scale(0.97); transition:0.1s
• frosted hover: background rgba(255,255,255,0.7) → 0.95
• 모달 슬라이드업: translateY(100%) → 0, 0.25s ease
• 토스트: opacity 0→1, translateY -10→0, 0.2s
• 이모지 펄스: AI 분석 중 60px 이모지 scale 1↔1.15 1.5s

이모지 활용 원칙

이모지는 텍스트 보조 X — 의미 전달의 핵심 매체. 따뜻한 베이지 톤 위에서 더 자연스럽게 작동.

8-1. 카테고리별 표준

8-2. 기능 이모지

• 🏠 홈 · 📖 도감 · 📝 기록 · 🍳 레시피 (4 tab)
• 📊 평가 · 💡 인사이트 · 🎯 챌린지 · 🎁 키트 · 💛 즐겨찾기
• 📋 식단표 · 📷 사진 · ✨ AI · 🔔 알림 · 💬 댓글
• 🌸 봄 제철 · 🍂 가을 제철 · 🌍 다국 cuisine

접근성 (WCAG AA 준수)

• 색 대비: 본문 4.5:1, 큰 텍스트 3:1 이상 (베이지 배경 + 네이비/브라운 텍스트 통과)
• 색에만 의존 금지: 신호등은 색 + 이모지 + 라벨 텍스트 3중
• 키보드 네비: 모든 CTA tab focus + outline 2px solid var(--orange-main)
• aria-label: 이모지 단독 버튼은 aria-label 필수
• min font: 본문 14px+ · 캡션 11px+ · 작은 글씨 9.5px 절대 금지
• 터치 영역: 44×44px 이상

톤앤매너 (카피)

10-1. 어조 원칙

• 지시 X · 권유 O: "~해야 합니다" → "~해보실래요?"
• 판단 X · 정보 O: "잘못된 식단" → "이번 주 부족한 영양"
• 전문 용어 → 자연어 번역: "RNI 65% 충족" → "주 3-4회 만남"
• 긍정 강조: "철 결핍" → "철이 가장 부족 — 채우면 다음 주 A 등급"
• 1인칭 회피, 친근 2인칭: "당신" 대신 "지우 엄마", "우리 아이"

10-2. Before / After 예시

10-3. 금지 표현

• ❌ "엄마가" (아빠 사용자 배제) → ✓ "보호자"
• ❌ "정상 아이" / "비정상" → ✓ "또래 평균"
• ❌ "조속히" / "반드시" → ✓ "오늘부터", "한 번 시도"
• ❌ "전문가의 지시에 따라" → ✓ "함께 알아봐요"
• ❌ "[브랜드명] 이용 시 효과" → ✓ "이렇게 해보면 보통..."