--- id: hwahae name: Hwahae display_name_kr: 화해 country: KR category: consumer-tech homepage: "https://www.hwahae.co.kr" primary_color: "#00d5ce" logo: type: favicon slug: "https://www.google.com/s2/favicons?domain=hwahae.co.kr&sz=128" verified: "2026-06-26" added: "2026-06-26" omd: "0.1" tokens: source: live-extract extracted: "2026-06-26" note: "brand = turquoise flower mark (#00d5ce logo / #22d3d6 live blog accent / #00a5aa darker UI teal); amber (#ffaa3c) is the functional rating-star accent and the single most visible hue on the product surface. Product web runs Pretendard Variable on a #f7f7f7 canvas; the official tech blog runs Spoqa Han Sans." colors: brand: "#00d5ce" brand-bright: "#22d3d6" brand-deep: "#00a5aa" tint: "#eefbfb" rating: "#ffaa3c" info: "#467dff" alert: "#ff5555" ink: "#000000" ink-soft: "#111111" ink-blog: "#212529" body: "#3d3d3d" muted: "#666666" faint: "#999999" placeholder: "#aaaaaa" divider: "#d8d8d8" hairline: "#e8e8e8" canvas: "#ffffff" surface: "#f7f7f7" on-brand: "#ffffff" typography: family: { product: "Pretendard Variable", blog: "Spoqa Han Sans" } blog-display: { size: 32, weight: 700, lineHeight: 1.44, tracking: -1.0, use: "Blog section heads, Spoqa Han Sans Bold" } section: { size: 18, weight: 600, lineHeight: 1.33, tracking: -0.2, use: "Product section titles, Pretendard SemiBold" } nav: { size: 15, weight: 600, lineHeight: 1.5, use: "Top nav item (active 600 / inactive 400)" } card-title: { size: 14, weight: 600, lineHeight: 1.5, use: "Card / category labels, Pretendard SemiBold" } body: { size: 16, weight: 400, lineHeight: 1.5, use: "Standard body text, Pretendard" } label: { size: 14, weight: 400, lineHeight: 1.5, use: "Search / dense UI text, Pretendard" } caption: { size: 12, weight: 400, lineHeight: 1.5, use: "Button labels, metadata" } spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32, section: 48 } rounded: { xs: 4, sm: 8, md: 16, lg: 20, full: 99999 } shadow: card: "rgba(0, 0, 0, 0.08) 0px 2px 8px 0px" hairline-ring: "rgb(232, 232, 232) 0px 0px 0px 1px" none: "none" components: button-primary: { type: button, bg: "#00d5ce", fg: "#ffffff", radius: "8px", font: "16px / 600", use: "Brand turquoise primary action — app-install / key CTA" } button-outline: { type: button, bg: "#ffffff", fg: "#3d3d3d", border: "1px solid #e8e8e8", radius: "4px", padding: "0 8px", height: "24px", font: "12px / 400", use: "Secondary chip (로그인) — white with hairline" } nav-tab: { type: tab, fg: "#111111", active: "text #111111 weight 600", font: "15px / 400", use: "Top nav (홈 / 랭킹 / 어워드)" } product-card: { type: card, bg: "#ffffff", radius: "16px", shadow: "rgba(0, 0, 0, 0.08) 0px 2px 8px", use: "Product / ranking card — 1px #e8e8e8 hairline ring" } tint-card: { type: card, bg: "#eefbfb", fg: "#000000", radius: "16px", use: "Pale-mint brand tint section / card" } search-input: { type: input, bg: "#ffffff", border: "1px solid #e8e8e8", radius: "8px", fg: "#000000", use: "Header search — #aaaaaa placeholder" } rating-badge: { type: badge, bg: "#ffffff", fg: "#ffaa3c", radius: "4px", font: "12px / 600", use: "Amber star-rating value" } info-chip: { type: badge, bg: "#ffffff", fg: "#467dff", radius: "4px", font: "12px / 600", use: "Blue inline accent / info tag" } components_harvested: true --- # Design System Inspiration of Hwahae ## 1. Visual Theme & Atmosphere Hwahae (화해) is Korea's dominant cosmetics-review and ingredient-analysis platform, and its product web reads like a clean, content-dense beauty index rather than a glossy brand microsite. The canvas is a soft neutral grey (`#f7f7f7`) layered over pure white (`#ffffff`) cards, so the imagery — product shots, ranking thumbnails, brand tiles — carries all the color and the chrome stays quiet. Text sits in pure black (`#000000`) for headings and a softened near-black (`#111111`) for navigation, giving the page an honest, encyclopedic weight. The brand's signature is a vivid turquoise flower mark (`#00d5ce`), echoed live on the engineering blog as `#22d3d6` and in UI accents as the deeper teal `#00a5aa`, all resting on a barely-there pale-mint tint (`#eefbfb`) that appears in hero and section backgrounds. What dominates the live product surface, though, is amber (`#ffaa3c`) — the rating-star color. Because Hwahae is fundamentally a review and ranking service, the amber star appears more than any other accent on the page, training the eye to read it as "score / trust." A small functional palette rounds it out: an action blue (`#467dff`) for inline links and tags, and a coral (`#ff5555`) for sale and wishlist signals. The neutrals run a long, careful ladder — `#3d3d3d` body, `#666666` secondary, `#999999` captions, `#aaaaaa` placeholders, `#d8d8d8` dividers, `#e8e8e8` hairlines — the kind of granular grey scale you only get from a real design system. That design system is explicit: utility classes across the site are namespaced `hds-` (Hwahae Design System), and Hwahae's product-design team has publicly documented its construction — a Foundation layer (Color, Typography, Grid, Radius, Spacing) feeding Components and Templates, built in Figma and shipped through Storybook. The geometry is soft and consistent: 8px is the workhorse radius, 16px for cards, 4px for tight chips, full-round (99999px) for pills and 50% for avatars; the blog leans to a rounder 20px. Depth is minimal — a single light card shadow (`rgba(0, 0, 0, 0.08) 0px 2px 8px`) and a 1px `#e8e8e8` hairline ring do almost all the separating. Typography is split by surface: the product web is set in **Pretendard Variable** at a dense, app-like scale (18px section heads, 16px body, 14–15px UI), while the official tech blog is set in **Spoqa Han Sans** at a larger editorial 32px / weight 700. **Key Characteristics:** - Turquoise flower brand mark (`#00d5ce`) — quiet on chrome, loud as identity; live blog accent `#22d3d6`, deeper UI teal `#00a5aa` - Amber (`#ffaa3c`) as the most-present accent — it is the rating-star color of a review-first product - Pretendard Variable on the product web; Spoqa Han Sans on the engineering/design blog - Pure black (`#000000`) headings, softened `#111111` nav — honest, index-like text - Soft neutral `#f7f7f7` canvas with pure-white (`#ffffff`) cards carrying the imagery - Pale-mint tint (`#eefbfb`) for hero/section backgrounds — the brand turquoise at 5% presence - Granular grey ladder (`#3d3d3d` → `#666666` → `#999999` → `#aaaaaa`) from a real `hds-` design system - Minimal depth: one `rgba(0, 0, 0, 0.08)` card shadow + 1px `#e8e8e8` hairline ring - Soft radius scale — 8px workhorse, 16px cards, 4px chips, 99999px pills, 20px on the blog ## 2. Color Palette & Roles ### Brand - **Hwahae Turquoise** (`#00d5ce`): The flower-mark brand color and primary identity hue. Used for the logo, brand moments, and the primary action color. - **Turquoise Bright** (`#22d3d6`): The live turquoise measured on the official tech blog — the same brand hue rendered slightly brighter on screen. - **Turquoise Deep** (`#00a5aa`): A darker interactive teal used for accent text and small UI elements on the product surface. - **Mint Tint** (`#eefbfb`): A near-white pale mint, the brand turquoise at minimal presence — hero and section backgrounds. ### Functional Accents - **Rating Amber** (`#ffaa3c`): The star-rating color — the single most-present accent on the product web, signalling score and trust. - **Action Blue** (`#467dff`): Inline links, info tags, and interactive accents. - **Alert Coral** (`#ff5555`): Sale prices, wishlist/heart, and attention signals. ### Text & Ink - **Ink Black** (`#000000`): Primary headings and high-emphasis text. - **Ink Soft** (`#111111`): Navigation labels and strong UI text — a softened near-black. - **Ink Blog** (`#212529`): The blog body/heading text color (Spoqa Han Sans surface). - **Body** (`#3d3d3d`): Secondary body copy and button labels. - **Muted** (`#666666`): Tertiary text and descriptions. - **Faint** (`#999999`): Captions, metadata, low-emphasis labels. - **Placeholder** (`#aaaaaa`): Input placeholder text. ### Surface & Lines - **Canvas White** (`#ffffff`): Card surfaces, text on brand/dark, and the cleanest backgrounds. - **Surface Grey** (`#f7f7f7`): The page background — a soft neutral that lets imagery carry the color. - **Divider** (`#d8d8d8`): Heavier separators and segmented controls. - **Hairline** (`#e8e8e8`): Card outlines, dividers, and the 1px ring that replaces shadow. - **On-Brand** (`#ffffff`): Foreground text/icons on the turquoise brand color. ## 3. Typography Rules ### Font Family - **Product web**: `Pretendard Variable` (with system fallbacks: `-apple-system`, `Apple SD Gothic Neo`, `Noto Sans KR`, `Roboto`) — the de-facto Korean product font, used for all product-surface text. - **Blog**: `Spoqa Han Sans` (with `Roboto`, `Malgun Gothic` fallbacks) — used on the official engineering/design blog at editorial sizes. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |------|------|------|--------|-------------|----------------|-------| | Blog Display | Spoqa Han Sans | 32px (2.00rem) | 700 | 1.44 (46px) | -1.0px | Blog section heads ("Tech", "추천 아티클") | | Section Title | Pretendard Variable | 18px (1.13rem) | 600 | 1.33 | -0.2px | Product section titles ("급상승 랭킹") | | Nav Link | Pretendard Variable | 15px (0.94rem) | 600 / 400 | 1.5 | normal | Active 600, inactive 400 | | Card Title | Pretendard Variable | 14px (0.88rem) | 600 | 1.5 (21px) | normal | Category / card labels | | Body | Pretendard Variable | 16px (1.00rem) | 400 | 1.5 (24px) | normal | Standard reading text | | Label | Pretendard Variable | 14px (0.88rem) | 400 | 1.5 | normal | Search, dense UI text | | Caption | Pretendard Variable | 12px (0.75rem) | 400 | 1.5 | normal | Button labels, metadata | ### Principles - **Two surfaces, two fonts**: Pretendard Variable owns the product web (dense, app-like); Spoqa Han Sans owns the blog (editorial, larger). They never mix on one surface. - **Dense product scale**: The product web tops out at an 18px section head with a 16px body — a deliberately app-native, information-rich scale rather than a marketing-hero scale. - **Weight as hierarchy**: SemiBold (600) carries titles and active nav; Regular (400) carries body, inactive nav, and captions. Bold (700) is reserved for blog display. - **Tight tracking on heads**: Headings carry slight negative tracking (-0.2px product, -1.0px blog); body stays at normal tracking for hangul legibility. ## 4. Component Stylings ### Buttons **Primary (Brand Turquoise)** - Background: `#00d5ce` - Text: `#ffffff` - Radius: 8px - Font: 16px Pretendard weight 600 - Use: Brand turquoise primary action — app-install and key CTAs (the identity color carried into action) **Secondary Chip (Outline)** - Background: `#ffffff` - Text: `#3d3d3d` - Border: 1px solid `#e8e8e8` - Radius: 4px - Padding: 0px 8px - Height: 24px - Font: 12px Pretendard weight 400 - Use: Compact secondary action ("로그인") — white with hairline border **Language / Icon Button** - Background: transparent - Text: `#111111` - Radius: 8px - Padding: 10px - Height: 44px - Use: Header utility buttons ("한국어", icon toggles) — 44px touch target ### Inputs & Forms **Header Search** - Background: `#ffffff` - Border: 1px solid `#e8e8e8` - Radius: 8px - Text: `#000000` - Placeholder: `#aaaaaa` - Font: 14px Pretendard weight 400 - Use: Top search field ### Cards & Containers **Product / Ranking Card** - Background: `#ffffff` - Radius: 16px - Shadow: `rgba(0, 0, 0, 0.08) 0px 2px 8px` - Border: 1px solid `#e8e8e8` (hairline ring on shadowless variants) - Use: Product, ranking, and brand tiles — imagery carries the color **Mint Tint Card** - Background: `#eefbfb` - Text: `#000000` - Radius: 16px - Use: Pale-mint brand-tinted section / feature card ### Badges **Rating Star (Amber)** - Background: `#ffffff` - Text: `#ffaa3c` - Radius: 4px - Font: 12px Pretendard weight 600 - Use: Star-rating score value — the product's most-present accent **Info Chip (Blue)** - Background: `#ffffff` - Text: `#467dff` - Radius: 4px - Font: 12px Pretendard weight 600 - Use: Inline accent / info tag **Image Count Pill** - Background: `rgba(0, 0, 0, 0.4)` - Text: `#ffffff` - Radius: 4px - Padding: 4px 8px - Use: Image counter overlay on carousels ("1/10") ### Navigation - Background: `#ffffff` - Text: `#111111` - Font: 15px Pretendard weight 400 (active 600) - Active: weight 600, `#111111` - Use: Top horizontal nav ("홈", "랭킹", "어워드") --- **Verified:** 2026-06-26 (omd:add-reference CREATE — Tier 1 live inspect, 2 brand-owned surfaces) **Tier 1 sources:** https://www.hwahae.co.kr ; https://blog.hwahae.co.kr/ ; https://blog.hwahae.co.kr/all/tech/13236 **Tier 2 sources:** getdesign.md/hwahae — not listed ("No designs found for hwahae"); styles.refero.design — no hwahae-specific match (KR under-coverage) **Conflicts unresolved:** none ## 5. Layout Principles ### Spacing System - Base unit: 4px - Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px - Notable: Touch-utility buttons land at a 44px height with 10px padding; compact chips drop to 0px 8px ### Grid & Container - Centered, content-first layout: ranking and product cards arranged in horizontally scrolling rows and responsive grids - Section bands stack vertically with quiet section titles (18px) introducing each ranking/recommendation block - White (`#ffffff`) cards float on the soft `#f7f7f7` canvas; pale-mint (`#eefbfb`) tints mark hero/feature zones - Cards use 16px radius and cluster related products, rankings, and brands ### Whitespace Philosophy - **Imagery carries color, chrome stays quiet**: the neutral canvas and white cards keep product photography the loudest thing on the page - **Dense but breathable**: an app-native information density (many rankings/products) softened by generous card radii and consistent gutters - **Flat separation**: sections separate by background tint (`#f7f7f7` vs `#ffffff`) and `#e8e8e8` hairlines more than by elevation ### Border Radius Scale - Tight (4px): chips, small badges, count pills - Workhorse (8px): buttons, inputs, utility controls - Card (16px): product/ranking/brand cards — the dominant container radius - Blog (20px): editorial cards on the tech blog - Full (99999px / 50%): pills and circular avatars ## 6. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | Flat (Level 0) | No shadow | Page background, inline text, tinted sections | | Hairline (Level 1) | `1px solid #e8e8e8` / `rgb(232, 232, 232) 0px 0px 0px 1px` ring | White card outlines, dividers | | Card (Level 2) | `rgba(0, 0, 0, 0.08) 0px 2px 8px 0px` | Floating product / ranking cards | **Shadow Philosophy**: Hwahae is a near-flat system. Live inspection found the overwhelming majority of surfaces shadowless; where elevation is needed, a single soft card shadow (`rgba(0, 0, 0, 0.08) 0px 2px 8px`) or a 1px `#e8e8e8` hairline ring does the work. This keeps the review/ranking content scannable and fast, and lets product imagery — not chrome — provide visual interest. Emphasis is reached through color (amber `#ffaa3c` ratings, turquoise `#00d5ce` brand) rather than depth. ## 7. Do's and Don'ts ### Do - Use Pretendard Variable for the product web and Spoqa Han Sans for the blog — keep them per-surface - Keep the brand turquoise (`#00d5ce`) for identity and the primary action; let imagery carry color elsewhere - Use amber (`#ffaa3c`) for rating stars — it is the product's trust signal - Set the canvas to soft grey (`#f7f7f7`) with white (`#ffffff`) cards so photography stays loudest - Separate with `#e8e8e8` hairlines and a single soft card shadow, not heavy elevation - Use the soft radius scale — 8px controls, 16px cards, 4px chips, full-round pills - Use pure black (`#000000`) for headings and softened `#111111` for nav - Reserve action blue (`#467dff`) and coral (`#ff5555`) for links and sale/wishlist signals ### Don't - Don't spread the turquoise across many elements — it is identity, not decoration - Don't stack heavy drop shadows — Hwahae separates with hairlines and tint - Don't mix Spoqa Han Sans into the product web or Pretendard into the blog - Don't use amber for anything but ratings/scores — it would dilute the trust signal - Don't set the canvas pure white edge-to-edge — the `#f7f7f7` grey is what frames the cards - Don't use sharp 0px corners on cards or controls — the system is consistently softened - Don't introduce a competing saturated accent beyond the functional amber/blue/coral set - Don't oversize product-web headings — the scale is deliberately dense and app-native ## 8. Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <640px | Single column, ranking rows scroll horizontally, cards full-bleed | | Tablet | 640-1024px | 2-up product grids, moderate gutters | | Desktop | 1024-1440px | Centered content, multi-column ranking/recommendation bands | ### Touch Targets - Header utility buttons at 44px height (10px padding) — comfortable tap targets - Compact chips ("로그인") at 24px height for dense desktop chrome - Ranking cards sized for thumb-scroll on mobile, click on desktop ### Collapsing Strategy - Section bands maintain their quiet 18px titles; card grids reflow multi-column → single column - Horizontal ranking rows convert to swipe-scroll on narrow viewports - White/tinted (`#ffffff` / `#eefbfb`) section treatment is preserved across breakpoints ### Image Behavior - Product and ranking thumbnails keep 16px radius across sizes - Cards retain the soft `rgba(0, 0, 0, 0.08)` shadow or `#e8e8e8` hairline at all breakpoints - Carousels show an image-count pill overlay (`rgba(0, 0, 0, 0.4)`, white text) ## 9. Agent Prompt Guide ### Quick Color Reference - Brand / primary action: Hwahae Turquoise (`#00d5ce`) - Rating accent: Amber (`#ffaa3c`) - Inline link / info: Action Blue (`#467dff`) - Sale / wishlist: Coral (`#ff5555`) - Mint tint background: (`#eefbfb`) - Canvas: Surface Grey (`#f7f7f7`); cards White (`#ffffff`) - Heading text: Ink Black (`#000000`); nav `#111111` - Body / labels: `#3d3d3d`; muted `#666666`; faint `#999999` - Placeholder: `#aaaaaa`; hairline `#e8e8e8`; divider `#d8d8d8` ### Example Component Prompts - "Create a product-ranking card: white `#ffffff` background, 16px radius, soft shadow `rgba(0, 0, 0, 0.08) 0px 2px 8px`, 1px `#e8e8e8` hairline. Title 14px Pretendard weight 600 `#000000`; an amber `#ffaa3c` star-rating value at 12px weight 600." - "Build a header on `#f7f7f7`: white search field, 8px radius, 1px solid `#e8e8e8`, `#aaaaaa` placeholder, 14px Pretendard. Nav links 15px Pretendard `#111111`, active weight 600. A turquoise `#00d5ce` primary button with white text, 8px radius." - "Design a mint feature section: `#eefbfb` background. Section title 18px Pretendard weight 600, -0.2px tracking, `#000000`. Cards inside use white `#ffffff` with 16px radius and `#e8e8e8` hairline." - "Make a blog article head: Spoqa Han Sans 32px weight 700, line-height 1.44, -1.0px tracking, color `#212529`, on white, in a 20px-radius editorial card." ### Iteration Guide 1. Pretendard Variable for the product web; Spoqa Han Sans for the blog — never cross them 2. Turquoise (`#00d5ce`) is identity + primary action; don't spread it 3. Amber (`#ffaa3c`) means rating/score — keep it to stars and trust signals 4. Canvas is `#f7f7f7` grey, cards are `#ffffff` white — imagery is the loudest layer 5. Separate with `#e8e8e8` hairlines and one soft card shadow, not heavy elevation 6. Radius: 8px controls, 16px cards, 4px chips, full-round pills, 20px on the blog 7. Headings `#000000`, nav `#111111`, body `#3d3d3d` — a careful neutral ladder --- ## 10. Voice & Tone Hwahae's voice is **trustworthy, plain-spoken, and evidence-first** — a beauty guide that turns an opaque, marketing-heavy category (cosmetics) into transparent ingredients, real reviews, and honest rankings. The product name itself, 화해 ("화장품을 해석하다" — "decoding cosmetics"), sets the register: explanatory, on the user's side, never a sales funnel. Copy leans on real, user-generated data — rankings "화해 고객들이 직접 선택한" (chosen directly by Hwahae users), "급상승 랭킹" (rising ranking), and skin-type and age-tailored recommendations — rather than brand superlatives. | Context | Tone | |---|---| | Section titles | Plain, functional, data-framed. "급상승 랭킹", "내 피부에 꼭 맞는 제품 랭킹", "나이대별 추천". | | Rankings / labels | Neutral and concrete. Category, skin-type, and age labels; amber score values. | | CTAs | Low-pressure, helpful. "화해 앱에서 더 편리하게", "검색 페이지로 이동". | | Blog (engineering/design) | Reflective, first-person, craft-oriented. "사용 가능한 진짜 디자인 시스템을 만드는 여정". | | Trust / data copy | Calm and specific — leans on user-generated rankings and ingredient analysis, not hype. | **Voice samples (verbatim from live surfaces):** - "화장품 정보는 화해 — 화장품 성분과 정보, 리뷰 확인하고 구매 하세요" — homepage title (decoding/ingredient-first). *(verified live 2026-06-26)* - "화해 고객들이 직접 선택한 랭킹" — homepage section (user-evidence framing). *(verified live 2026-06-26)* - "사용 가능한 진짜 디자인 시스템을 만드는 여정" — official tech blog (craft, candor). *(verified live 2026-06-26)* **Forbidden register**: cosmetic-marketing superlatives, unverifiable efficacy claims, fear-based "your skin is failing" pitches, and undefined jargon left unexplained. Hwahae's whole premise is decoding, so copy explains rather than dazzles. ## 11. Brand Narrative Hwahae (화해) launched in **2013** to solve a uniquely consumer-unfriendly problem in Korean cosmetics: severe **information asymmetry** (화장품 정보 비대칭). Shoppers could not easily see what was actually in a product or trust the marketing on the box. Hwahae's founding act was to make cosmetic **ingredients legible** — surfacing full ingredient lists, safety/grade information, and, crucially, real user **reviews** — so people could choose with evidence rather than advertising. Over its first decade the service grew from an ingredient lookup into a full beauty platform spanning makeup, inner beauty, sample experiences (샘플체험), ingredient analysis, reviews, and direct purchase, becoming the category's dominant review-and-ranking destination in Korea. (Source: Hwahae product-design team, official tech blog, *"사용 가능한 진짜 디자인 시스템을 만드는 여정"*, 2023-08-03.) That same blog post documents the maturation of Hwahae's design language. After ten years of rapid experimentation, the team found legacy screens and per-page color/layout drift accumulating as design and engineering debt — at odds with Hwahae's "experiment fast, validate" culture. In **January 2023** they committed to a proper design system (the `hds-` namespace seen across the live site = Hwahae Design System), built as a **Foundation** layer (Color, Typography, Grid, Radius, Spacing) feeding reusable **Components** and **Templates**, authored in Figma and shipped to engineers through Storybook and a TestApp QA loop. What Hwahae's design refuses, visible on the surface: the glossy, color-saturated chrome of beauty-brand marketing, and dark-pattern urgency. What it embraces: a quiet neutral canvas that lets product imagery and user data lead; a single trustworthy turquoise identity; amber rating stars as the honest trust signal; and a real, documented design system that keeps a sprawling, content-heavy product consistent. ## 12. Principles 1. **Decode, don't sell.** Hwahae exists to make cosmetics legible — ingredients, grades, and real reviews over marketing claims. *UI implication:* lead with data (rankings, ratings, ingredients); keep chrome neutral so evidence is the loudest element. 2. **User evidence over brand voice.** Rankings are framed as "chosen by Hwahae users." *UI implication:* surface ratings (amber `#ffaa3c`) and review counts prominently; never visually privilege a brand without disclosure. 3. **Imagery carries color, chrome stays quiet.** *UI implication:* soft `#f7f7f7` canvas, white cards, restrained accents — product photography is the color layer. 4. **One identity hue.** Turquoise (`#00d5ce`) is the brand; don't dilute it. *UI implication:* reserve turquoise for identity and the primary action. 5. **Consistency at scale via a real system.** The `hds-` Foundation→Components→Templates pipeline exists so a content-heavy product stays coherent. *UI implication:* reuse tokens (the granular grey ladder, the 8/16px radius scale) rather than re-inventing per page. 6. **Flat and fast.** *UI implication:* minimal elevation — hairlines and one soft shadow — to keep dense ranking content quick to scan. ## 13. Personas *Personas below are fictional archetypes informed by publicly observable Hwahae user segments (Korean beauty shoppers comparing ingredients and reviews), not individual people.* **이서연, 26, 서울.** Checks every new product's ingredient list and Hwahae rating before buying. Distrusts brand marketing; trusts the amber score and the volume of real reviews. Chose Hwahae because it decodes ingredients she can't parse on the box. **박지호, 33, 경기.** Sensitive, acne-prone skin. Relies on skin-type-tailored rankings ("내 피부에 꼭 맞는 제품 랭킹") to avoid trial-and-error. Values that the interface is calm and data-first rather than a hard-sell beauty funnel. **최유진, 21, 부산.** A student following age-band recommendations ("나이대별 추천") and rising rankings to find affordable products. Appreciates the fast, scannable card grid and that imagery — not ads — leads the page. ## 14. States | State | Treatment | |---|---| | **Empty (no ranking / search results)** | Soft `#f7f7f7` canvas. A single Ink (`#000000`) line explaining no matching products, with a quiet path to broaden filters. No illustration clutter. | | **Empty (saved / wishlist none yet)** | Faint (`#999999`) single line: nothing saved yet, plus a route back to rankings. Calm and honest. | | **Loading (ranking fetch)** | Skeleton cards on white `#ffffff` at final 16px-radius dimensions, soft pulse — no heavy shimmer, consistent with the near-flat system. | | **Loading (image carousel)** | Image-count pill (`rgba(0, 0, 0, 0.4)`, white text) holds position while the next image loads. | | **Error (load failed)** | Inline message in Ink (`#000000`) with a plain-language explanation and a retry — never a bare "오류가 발생했습니다". | | **Error (form validation)** | Field-level message below the input describing what's valid, not just "필수". | | **Success (review submitted / saved)** | Brief inline confirmation in a calm tone; next-step detail linked below. No celebratory emoji. | | **Skeleton** | White `#ffffff` blocks at final dimensions, 16px radius, soft pulse. | | **Disabled** | Faint (`#999999`) text on reduced-opacity surface; turquoise actions fade rather than turn grey, to preserve the brand read. | ## 15. Motion & Easing **Durations**: | Token | Value | Use | |---|---|---| | `motion-fast` | 120ms | Hover, chip press, focus | | `motion-standard` | 200ms | Card / section reveal, carousel slide, sheet | | `motion-slow` | 320ms | Page-level transitions | **Easings**: | Token | Curve | Use | |---|---|---| | `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — cards, sheets, carousels | | `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals | | `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions | **Motion rules**: Motion is functional and quiet — consistent with the near-flat, content-first aesthetic. Cards and ranking rows fade-in from below at `motion-standard / ease-enter`; carousels slide at the same timing; chips respond to press with a subtle scale/opacity shift. No bounce or spring — a trust-and-evidence product signals steadiness, not playfulness. Under `prefers-reduced-motion: reduce`, all transitions collapse to instant; the product stays fully functional. --- Source: https://oh-my-design.kr/design-systems/hwahae · Raw twin of references/hwahae/DESIGN.md Install 356 verified references for your AI coding agent: npx oh-my-design-cli install-skills