oh-my-design-cli 1.6.1 → 1.6.2

package/web/references/devsisters/DESIGN.md

@@ -0,0 +1,253 @@
+---
+id: devsisters
+name: "Devsisters"
+country: KR
+category: consumer-tech
+homepage: "https://www.devsisters.com"
+primary_color: "#FF5F00"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=devsisters.com&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# Devsisters
+
+Korean game company behind the Cookie Run franchise — building joyful, globally loved play experiences since 2007.
+
+## 1. Visual Theme & Atmosphere
+
+Devsisters' digital product language is bold, energetic, and unambiguously orange. The homepage announces itself in a full-bleed deep orange (`#FF5F00`) navigation bar that carries through to the footer, wrapping the entire experience in brand warmth. Against this chromatic confidence, content cards surface on pure white with subtle grey borders and generously rounded corners (20 px on cards, 36 px on buttons), giving the layout a playful softness that balances the brand's intensity. Typography oscillates between the heavyweight display face `azo-sans-web` (used at weights 800–900 for English headlines) and the versatile Korean system stack `Pretendard` (used at weight 500–700 for body and UI copy), creating a bilingual dual-register hierarchy that reads as global without feeling generic. The overall atmosphere is that of a confident entertainer: vivid, rounded, action-forward, with just enough restraint in whitespace and card structure to keep the experience legible across ages and screen sizes.
+
+## 2. Color Palette & Roles
+
+- **Brand Orange:** `#FF5F00` — primary background (nav, footer, CTA buttons, section fills); the brand's dominant signal colour
+- **Bright Orange:** `#FF8200` — hover/active tint on nav border; lighter orange accent for secondary states
+- **Yellow Accent:** `#FFCE00` — tag badges and highlight chips, always paired with `#000000` text for contrast
+- **Pure Black:** `#000000` — body text, black pill-style secondary buttons, dark section backgrounds
+- **Pure White:** `#FFFFFF` — content card backgrounds, reversed text on orange/black surfaces
+- **Warm Peach:** `#F8E8DA` — accordion/expanded nav background; softened orange tone for nested UI
+- **Grey Border:** `#DCDCDC` — card borders, dividers on white backgrounds
+- **Mid Grey:** `#666666` — secondary body text, labels on white
+
+## 3. Typography Rules
+
+- **Display / English headings:** `azo-sans-web`, fallback `Dotum,돋움,굴림,arial`; weights 900 (H1), 800 (H2/CTA labels), 700 (H3). All-caps treatment for nav and section labels (`text-transform: uppercase`).
+- **Body / Korean UI:** `Pretendard`, fallback `Dotum,돋움,굴림,arial`; weights 500 (body), 600 (subheadings), 700 (emphasis). Registered at Black → ExtraLight across nine weight steps via `@font-face`.
+- **Base body size:** 16 px; `line-height: 1.5` for paragraphs.
+- **UI label size:** 14 px / weight 500 (nav links, footer items).
+- **Heading scale:** 32 px (H1 desktop), 24 px (H2), 18 px (H3), 14 px (body-sm).
+- **Letter-spacing:** `0.01em` on uppercase display copy; `letter-spacing: -0.56px` on large-format hero numerals.
+- **No italic** usage detected across any brand-owned surface.
+
+## 4. Component Stylings
+
+### Primary CTA Button
+
+**Orange Primary (css-1d80czy)**
+- Background: `#FF5F00`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 36px
+- Padding: 12px 24px
+- Height: 48px
+- Font: azo-sans-web / 800
+
+**Black Secondary (css-w3127n)**
+- Background: `#000000`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 36px
+- Padding: 12px 24px
+- Height: 48px
+- Font: azo-sans-web / 800
+
+### Navigation Bar
+
+**Top Nav (css-15afoiw)**
+- Background: `#FF5F00`
+- Text: `#FFFFFF`
+- Height: 48px
+- Padding: 0px 20px
+- Font: azo-sans-web / 800
+
+**Mobile Nav Drawer (css-1wp6ena)**
+- Background: `#FF5F00`
+- Text: `#FFFFFF`
+- Border: none
+
+### Content Card
+
+**Standard Card (css-136jai7 / css-1v6f5oy)**
+- Background: `#FFFFFF`
+- Border: 1px solid `#DCDCDC`
+- Radius: 8px
+
+**News/Feature Card**
+- Background: `#FFFFFF`
+- Radius: 20px
+- Padding: 52px 80px
+
+### Tag Badge
+
+**Accent Tag (css-1vxk175)**
+- Background: `#FFCE00`
+- Text: `#000000`
+- Radius: 36px
+- Padding: 5.5px 12px
+
+**Active State Tag**
+- Background: `#FF5F00`
+- Text: `#FFFFFF`
+- Radius: 36px
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://www.devsisters.com (homepage HTML + inline CSS), https://www.devsisters.com/_next/static/css/bab2a2ef530354d9.css (CSS bundle), https://www.devsisters.com/resource (brand resource page), https://www.devsisters.com/about (about page)
+**Tier 2 sources:** getdesign.md/devsisters — 0 DESIGN.md files (NOT LISTED). refero — no result for Devsisters KR.
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+- **Full-bleed orange chrome:** Nav (48 px) and footer share `#FF5F00` background, creating a colour-wrapped container around all page content.
+- **Card grid:** News and game cards use a fluid multi-column grid; cards have `border-radius: 20px` and a subtle overlay gradient (`rgba(0,0,0,0.6)→rgba(0,0,0,0)`) for hero image cards.
+- **Max-width centred content:** Content sections are horizontally centred with symmetric horizontal padding; desktop padding expands to `52px 80px` for inset cards.
+- **Section rhythm:** Alternating white and orange sections create a visual beat; each section is `position: relative` with generous vertical padding (~11–22 vw on mobile).
+- **Sticky nav:** The top bar is `position: sticky; top: 0; z-index: 2` so the orange anchor persists while scrolling.
+
+## 6. Depth & Elevation
+
+- **Card hover lift:** `transition: transform 0.3s ease-out, box-shadow 0.3s ease-out` — cards translate up slightly on hover.
+- **Image card overlay:** `linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 60%)` at `opacity: 0.5` by default, removing on hover for reveal.
+- **No heavy drop shadows** detected across the system — elevation is conveyed through colour contrast (orange vs. white) and border radius rather than shadows.
+- **Mobile nav overlay:** Full-screen orange drawer translates in with `transform: translate(100%, 0)` → `translate(0, 0)`.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#FF5F00` as the primary action colour for all main CTAs, nav chrome, and section backgrounds.
+- Pair `#FFCE00` badges with `#000000` text — this is the only accessible combination for yellow.
+- Use `azo-sans-web` weight 800–900 in all-caps for English display copy; use `Pretendard` weight 500–700 for Korean body text.
+- Apply `border-radius: 36px` on all pill-shaped buttons and tags; `border-radius: 20px` on content cards.
+- Keep button height at 48 px (desktop) with 12 px/24 px padding.
+- Use `#000000` for the secondary black pill button when an alternative to orange is needed on white backgrounds.
+
+### Don't
+- Don't use `#FFCE00` without `#000000` text — it fails contrast on white or orange backgrounds.
+- Don't mix `azo-sans-web` (display) and `Pretendard` (body) at the same hierarchical level — they serve distinct roles.
+- Don't introduce border-radius values other than 36 px (pills/tags), 20 px (cards), or 8 px (images/thumbnails).
+- Don't place orange text on an orange background — reversed white text is the only on-brand contrast pairing.
+- Don't use italic or light weights (100–300) in UI components — the brand voice reads as bold and direct.
+- Don't add heavy drop shadows; depth is communicated through colour field transitions and border radius, not elevation.
+
+## 8. Responsive Behavior
+
+- **Mobile breakpoint:** < 720 px — single-column card grid; font sizes shift to vw-based scaling (e.g., `3.6vw` display, `3.3vw` body).
+- **Tablet breakpoint:** ≥ 720 px — two-column grids; nav switches from hamburger drawer to inline links; button radius locks to `36px`.
+- **Desktop breakpoint:** ≥ 1024 px — full multi-column layouts; font sizes resolve to fixed px values (32 px H1, 18 px H3, 14 px label); nav padding fixed at `20px`.
+- **Large desktop:** ≥ 1280 px — content max-width caps; nav padding stays `20px`; images use `w=3840` srcset.
+- **All breakpoints:** Orange nav and footer remain full-bleed; button height stays 48 px on tablet/desktop.
+
+## 9. Agent Prompt Guide
+
+When generating Devsisters-style UI:
+- Set the primary surface to `#FF5F00`; default text on it to `#FFFFFF`.
+- Primary buttons: background `#FF5F00`, text `#FFFFFF`, radius `36px`, height `48px`, font weight `800`, all-caps English label.
+- Secondary buttons: background `#000000`, same geometry.
+- Tag chips: background `#FFCE00`, text `#000000`, radius `36px`, padding `5.5px 12px`.
+- Cards: background `#FFFFFF`, border `1px solid #DCDCDC`, radius `20px`.
+- Heading font `azo-sans-web` (weight 900) for English; `Pretendard` (weight 700) for Korean.
+- Body font `Pretendard` weight 500, size 16px.
+- Transitions: `color 0.2s linear, background 0.2s linear` on interactive elements; content reveals `0.8s cubic-bezier(0.075, 0.82, 0.165, 1)`.
+- Avoid gradients, shadows, or pastel tones — keep the palette disciplined to the five core swatches.
+
+## 10. Voice & Tone
+
+**Brand register:** Energetic, global, warm-direct.
+
+Three adjectives: **Joyful · Brave · Essential**
+
+| Do | Don't |
+|---|---|
+| Speak with conviction and warmth ("세상을 즐겁게") | Use hedged, corporate language ("we aim to try to") |
+| Lead with action verbs ("Run Brave", "Create", "Build") | Bury the point in qualifiers |
+| Address a global audience without losing Korean warmth | Over-localize to a single market in global copy |
+| Keep sentences short and declarative | Write multi-clause academic sentences |
+
+**Voice samples (illustrative):**
+- *Illustrative:* "We don't settle for experiences that fade. We build worlds people live inside."
+- *Illustrative:* "In a market that gets harder every day, running brave isn't a slogan — it's how we survive."
+- *Illustrative:* "세상을 즐겁게. 더 넓은 곳에서, 더 많은 사람들에게, 더 오랜 시간 동안." (Make the world joyful. In more places, for more people, for longer.)
+
+## 11. Brand Narrative
+
+Founded in 2007 in Seoul, Devsisters started as a small Korean mobile studio and grew through the Cookie Run franchise into one of Korea's most recognised game IP creators. The studio's breakout moment came with Cookie Run: OvenBreak and accelerated to global scale with Cookie Run: Kingdom, which reached Apple App Store top-10 rankings in the United States and built a fandom spanning more than 300 million cumulative users across all titles. Today Devsisters operates four global offices, three development studios, and one investment subsidiary (Devsisters Ventures), with reach extending into animation, licensing, and new platform categories including PC, console, and VR.
+
+The company's stated mission is "We Create a Joyful World — in more places, for more people, for longer." This is not framed as aspiration but as operating mandate: every product, from the games themselves to the corporate website, is expected to deliver the same quality of lived experience that earns a long-term place in users' daily lives. Devsisters' "Brave Journey" timeline on the about page frames the studio's history as a series of courageous bets — each expansion into a new platform or IP category described as an act of deliberate boldness rather than incremental growth.
+
+Three philosophical pillars govern Devsisters' creative and product decisions: **Focus on Core** (pursue the essential goal without being constrained by convention), **Run Brave** (compete with courage even in a harsh market environment), and **Touch Hearts** (create not just useful but genuinely moving experiences that people return to long after the initial novelty fades). These pillars surface visibly in UI decisions — the brand's unapologetically bold orange palette and all-caps display typography reflect the same "no hedging" stance the company articulates in its mission language.
+
+## 12. Principles
+
+1. **Focus on Core** — strip away convention and pursue the essential outcome with relentless focus.
+   *UI implication:* Avoid decorative complexity; every visual element should earn its place by serving the user's primary goal. Remove anything that dilutes the orange-signal hierarchy.
+
+2. **Run Brave** — act with courage and intensity even when conditions are difficult.
+   *UI implication:* Make primary actions unambiguously visible — bold orange buttons, full-bleed colour fields. Never let the interface be timid about what it wants the user to do next.
+
+3. **Touch Hearts** — create experiences that resonate emotionally and last beyond the first encounter.
+   *UI implication:* Motion timing and easing should feel alive (`0.8s cubic-bezier(0.075, 0.82, 0.165, 1)` for content reveals); card imagery should be rich and emotionally engaging, not generic stock.
+
+4. **Global by Default** — design for every culture, language, and generation from the first commit.
+   *UI implication:* All typographic hierarchies must work in both `azo-sans-web` (Latin/English) and `Pretendard` (Korean); layout padding must accommodate longer Korean strings without breaking.
+
+5. **Earned Simplicity** — complexity is acceptable in the product; the interface should absorb that complexity so users don't have to.
+   *UI implication:* Navigation collapses gracefully into a single-layer drawer on mobile; colour does the heavy lifting of wayfinding so users never need to read a label twice.
+
+## 13. Personas
+
+*Illustrative persona — not based on proprietary user research:*
+**The Global Cookie Fan (age 12–22):** Plays Cookie Run: Kingdom daily across mobile and web; follows Devsisters on YouTube and social media; expects the website to feel as polished as the game itself. Reacts to bold visuals and new character reveals. Needs: fast load, strong imagery, quick links to game download and patch notes.
+
+*Illustrative persona — not based on proprietary user research:*
+**The Korean Parent (age 35–50):** Monitors their child's gaming activity; visits the site to check parental guidance and privacy policy. Expects a trustworthy, legible institutional presence underneath the brand's playfulness. Needs: clear footer navigation to policy pages, Korean-first information hierarchy.
+
+*Illustrative persona — not based on proprietary user research:*
+**The International Press / Analyst (age 25–45):** Arrives via news search after a new partnership announcement; scans for investor relations, company size, studio pipeline. Needs: structured company/about page, downloadable brand resources, English-language toggle.
+
+*Illustrative persona — not based on proprietary user research:*
+**The Prospective Hire (age 22–35):** Korean or international game developer drawn to the brand's culture narrative. Evaluates Devsisters' three philosophical pillars and office locations before applying. Needs: careers link in footer, clear studio descriptions, the "Brave Journey" timeline as social proof.
+
+## 14. States
+
+- **Empty state:** No-content zones (e.g., empty game roster tab) render a white card with a `#DCDCDC` border and centre-aligned `#666666` label; no placeholder animation.
+- **Loading state:** Content sections use opacity-based fade-in (`opacity 0.8s cubic-bezier(0.075, 0.82, 0.165, 1)`) from `opacity: 0` to `opacity: 1`; images use Next.js blur placeholder (transparent colour token).
+- **Error — network failure:** Page degradation is graceful; the orange nav chrome and footer remain rendered from static HTML; content areas show a white card with an inline retry prompt in `#FF5F00` text.
+- **Error — 404/Not Found:** Inherits full orange-chrome layout; body card is white with centred content and a primary orange CTA back to homepage.
+- **Success state:** After form submission (e.g., contact form), a white card with `#FF5F00` border-top accent and a checkmark icon in `#FF5F00` confirms the action.
+- **Skeleton loading:** Image cards display a `border-radius: 20px` rectangle in `#F3F3F3` that fills the card area while the image loads; no animation shimmer detected (simple placeholder colour).
+- **Disabled state:** Buttons reduce to `opacity: 0.4`; background and radius preserved; cursor changes to `not-allowed`; no colour change that could be confused with a hover state.
+
+## 15. Motion & Easing
+
+**Duration scale:**
+- `0.2s` — micro-interactions: button colour/fill transitions, tag hover, icon fill changes
+- `0.3s` — moderate: nav background transition on scroll, card hover lift
+- `0.4–0.5s` — moderate-slow: CTA arrow transforms, mobile nav translate-in
+- `0.6s` — slow: accordion expand/collapse (`max-height` transitions)
+- `0.8s` — content reveal: section entrance animations (opacity + transform)
+- `1.0–1.2s` — very slow: hero element staggered entrances
+
+**Easing tokens:**
+- `linear` — used for colour/fill/opacity micro-transitions (`color 0.2s linear`)
+- `ease-out` — card hover lift, opacity fade-outs (`0.3s ease-out`)
+- `cubic-bezier(0.075, 0.82, 0.165, 1)` — primary content reveal (easeOutCirc feel; overshoots slightly, settles softly)
+- `cubic-bezier(0.83, 0, 0.17, 1)` — accordion snap (fast-out, slow-in; snappy close/open)
+- `cubic-bezier(0.22, 1, 0.36, 1)` — nav max-height expand (spring-like deceleration)
+- `cubic-bezier(0.61, 1, 0.88, 1)` — background colour transitions on nav state changes
+
+**Rules:**
+- Never animate layout-affecting properties (width, height) without a cubic-bezier easing — linear layout animation reads as mechanical.
+- Content entrance animations trigger on scroll intersection; they do not replay on re-scroll.
+- Reduce-motion: no `prefers-reduced-motion` query detected in source; treat all motion as decorative and ensure content is fully readable without it.

package/web/references/drnow/DESIGN.md

@@ -0,0 +1,331 @@
+---
+id: drnow
+name: "Dr.Now (닥터나우)"
+country: KR
+category: healthcare
+homepage: "https://doctornow.co.kr"
+primary_color: "#FF8D00"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=doctornow.co.kr&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# Dr.Now (닥터나우)
+
+Korea's #1 telemedicine platform — making medical care instantly accessible, any hour of the day.
+
+## 1. Visual Theme & Atmosphere
+
+Dr.Now (닥터나우) is built around a single emotional promise: "아플 땐 닥터나우" — when you're sick, Dr.Now is there. The interface translates this into a warm, energetic orange language set against a clean off-white and neutral gray canvas. Where most Korean healthcare apps reach for clinical blues or sterile whites to signal trust, Dr.Now deliberately chose vibrant orange — a color that radiates urgency, warmth, and approachability without the coldness of institutional medicine. The result feels closer to a sympathetic neighbor than a hospital waiting room.
+
+The typography is Pretendard Variable, the gold-standard Korean system font — its clean geometric letterforms balance medical authority with consumer-app readability. The neutral gray scale runs from the near-white surface `#FBFCFD` (G10) through rich charcoal `#1C1D1F` (G900), creating quiet, clean backdrops that let the orange CTAs and primary actions demand attention without visual noise. Card surfaces use `#FFFFFF` with `1px solid #DFE1E2` borders and 32px radii for a friendly, rounded feel.
+
+Motion is purposefully gentle — slide-up sheets and fade-in transitions at 300ms reinforce that Dr.Now is reliable and steady, not frantic. The interface hierarchy is clear: orange acts, gray informs, white breathes.
+
+## 2. Color Palette & Roles
+
+### Primary (Orange Scale — official CSS vars --P100 to --P900)
+- **Primary 500:** `#FF8D00` — brand anchor orange; used in timeline markers, accent text, key stats
+- **Primary 600:** `#FD7E14` — CTA button fills, active nav link text, featured badge backgrounds
+- **Primary 700:** `#F76707` — hover on orange elements, pressed states, high-emphasis text
+- **Primary 800:** `#E8590C` — deep hover, secondary destructive-adjacent accents
+- **Primary 900:** `#D9480F` — CTA gradient start, deepest brand orange
+- **Primary 100:** `#FFF4E6` — tinted surfaces, pill tag backgrounds, info banners
+- **Primary 300:** `#FFD8A8` — divider gradient, warm illustration fill
+
+### Neutral (Gray Scale — official CSS vars --G10 to --G900)
+- **Surface 10:** `#FBFCFD` — page background variant (G10)
+- **Surface 20:** `#F7F9FA` — secondary page background, tag fills (G20)
+- **Surface 40:** `#F1F3F6` — review section background, card dividers (G40)
+- **Gray 100:** `#DFE1E2` — default border, card outline, separator lines (G100)
+- **Gray 300:** `#A9AEB1` — placeholder text, disabled borders (G300)
+- **Gray 400:** `#8D9297` — secondary labels, metadata text (G400)
+- **Gray 500:** `#71767A` — body text default (G500)
+- **Gray 600:** `#565C65` — body color root default (G600)
+- **Gray 700:** `#3D4551` — secondary headings, strong body (G700)
+- **Gray 900:** `#1C1D1F` — primary headings, dark emphasis (G900)
+
+### Accent & System
+- **White:** `#FFFFFF` — card surface, modal background, CTA text
+- **Blue 600:** `#228BE6` — information chips, system links, secondary action text
+- **Yellow 500:** `#FCC419` — star rating, highlight badge
+- **Error Red:** `#FA5252` — destructive action, form error state
+
+## 3. Typography Rules
+
+Dr.Now uses **Pretendard Variable** exclusively — defined in both the main CSS bundle (`userweb-static.doctornow.co.kr`) and the official brand CSS (`file.doctornow.co.kr/official/css/default.css`). The font is also specified as `Pretendard Variable, Pretendard` with a full Korean system font fallback chain.
+
+**Type Scale (from CSS typography utility classes):**
+
+| Class suffix | Size | Line-height | Weights available |
+|---|---|---|---|
+| `-32b/sb` | 32px | 42px | 700 / 600 |
+| `-28b` | 28px | 38px | 700 |
+| `-24b/sb` | 24px | 32px | 700 / 600 |
+| `-22b/sb` | 22px | 30px | 700 / 600 |
+| `-20b/sb` | 20px | 28px | 700 / 600 |
+| `-18b/sb/m` | 18px | 26px | 700 / 600 / 500 |
+| `-17b/sb/m/r` | 17px | 24px | 700 / 600 / 500 / 400 |
+| `-16b/sb/m/r` | 16px | 24px | 700 / 600 / 500 / 400 |
+| `-15b/sb/m/r` | 15px | 22px | 700 / 600 / 500 / 400 |
+| `-14b/sb/m/r` | 14px | 20px | 700 / 600 / 500 / 400 |
+| `-12sb` | 12px | 18px | 600 |
+
+**Rules:**
+- CTA button labels: 17px / 600 (SemiBold)
+- Body default: 15px–16px / 400–500
+- Section headings: 22px–32px / 700
+- Meta / timestamps: 12px–14px / 400
+- All text: `-webkit-font-smoothing: antialiased` applied globally
+- No italic in UI text; `font-style: normal` enforced in typography utility classes
+
+## 4. Component Stylings
+
+### Primary CTA Button
+
+**Brand Gradient CTA (`.btn-now`)**
+- Background: `linear-gradient(90deg, #D9480F 0%, #F3463B 100%)`
+- Text: `#FFFFFF`
+- Radius: 12px
+- Padding: 16px 54px
+- Font: 17px / 600
+
+**Primary Solid (`.bg-primary-600`)**
+- Background: `#FD7E14`
+- Text: `#FFFFFF`
+- Radius: 12px
+- Font: 17px / 600
+
+**Primary Outline**
+- Background: `#FFFFFF`
+- Text: `#FD7E14`
+- Border: 1px solid `#FD7E14`
+- Radius: 12px
+- Padding: 16px 24px
+- Font: 16px / 600
+
+**Ghost / Disabled**
+- Background: `#DFE1E2`
+- Text: `#A9AEB1`
+- Radius: 12px
+- Padding: 16px 24px
+- Font: 16px / 500
+
+### Tag / Badge Chip
+
+**Primary Tag**
+- Background: `#FFF4E6`
+- Text: `#F76707`
+- Radius: 99px
+- Padding: 4px 10px
+- Font: 12px / 600
+
+**Gray Tag**
+- Background: `#F1F3F6`
+- Text: `#71767A`
+- Radius: 99px
+- Padding: 4px 10px
+- Font: 12px / 500
+
+### Card / Review Slide
+
+**Content Card**
+- Background: `#FFFFFF`
+- Border: 1px solid `#DFE1E2`
+- Radius: 32px
+- Padding: 24px
+
+**Section Background Card**
+- Background: `#F1F3F6`
+- Radius: 32px
+
+### Navigation Item
+
+**Active Nav Link**
+- Background: transparent
+- Text: `#FD7E14`
+- Radius: 8px
+- Height: 40px
+- Padding: 0px 12px
+- Font: 16px / 700
+
+**Default Nav Link**
+- Background: transparent
+- Text: `#DFE1E2`
+- Radius: 8px
+- Height: 40px
+- Padding: 0px 12px
+- Font: 16px / 400
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://doctornow.co.kr (HTML + styled-components), https://userweb-static.doctornow.co.kr/20260602-2002-38d1546d91/_next/static/css/72c28a0cfb28f079.css (Tailwind + SC bundle), https://file.doctornow.co.kr/official/css/style.css (official brand CSS with --P/--G token :root), https://file.doctornow.co.kr/official/css/default.css (Pretendard font import + reset), https://company.doctornow.co.kr/company (brand CSS served from file.doctornow.co.kr)
+**Tier 2 sources:** getdesign.md/drnow — NOT LISTED (no data). refero ?q=닥터나우 — no result found for this brand.
+**Conflicts unresolved:** The hero banner gradient uses `#FF7501` (slightly warmer than token --P500 `#FF8D00`); the official :root token system treats `#FF8D00` as P500 canonical. Both are genuine observed values. The `.btn-now` CTA uses a deep `#D9480F → #F3463B` gradient while the web app uses `#FD7E14` solid for most buttons — two surface contexts maintained separately.
+
+## 5. Layout Principles
+
+Dr.Now uses a **max-width 1050px centered content container** (`width: 92%; max-width: 1050px`) for all landing and company pages, with generous vertical section padding of 96px–128px. The mobile breakpoint is at 768px, where multi-column grids collapse to single-column vertical stacks.
+
+- **Web app (doctornow.co.kr):** Tailwind-based, responsive grid, max-width 1064px for some breakpoints
+- **Company pages:** Fixed-width centered layout, 92% container, generous whitespace
+- **Spacing system:** 8px base unit; common values are 4, 8, 12, 16, 24, 32, 40, 48, 64, 96px
+- **Card grid:** Items arranged in 2–3 columns on desktop, stacking to 1 on mobile
+- **Navigation:** Fixed 64px top bar; content offset by `padding-top: 64px`
+
+## 6. Depth & Elevation
+
+Dr.Now employs a restrained shadow system — surfaces are differentiated primarily through background color rather than heavy drop shadows.
+
+- **Level 0 — Page surface:** `#FBFCFD` or `#F7F9FA` — no shadow
+- **Level 1 — Default card:** `#FFFFFF` with `1px solid #DFE1E2` — flat border elevation
+- **Level 2 — Floating card:** `box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08)` — light lift
+- **Level 3 — Modal / Bottom sheet:** `box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08)` — medium elevation
+- **Level 4 — Tooltip / Dropdown:** `box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.16)` — prominent float
+- **Level 5 — Overlay scrim:** `background-color: rgba(0, 0, 0, 0.06)` to `rgba(0, 0, 0, 0.12)` — modal backdrop
+- **Inset surface accent:** `inset 0px 0px 32px rgba(0, 0, 0, 0.04)` — used on section review blocks
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#FF8D00` (P500) or `#FD7E14` (P600) as the primary brand orange for all key CTAs and active states
+- Apply 12px radius to primary buttons and 32px radius to cards and content panels
+- Use Pretendard Variable with the full Korean fallback chain for all UI text
+- Keep neutral grays for secondary content — body copy defaults to `#71767A` (G500) against `#FBFCFD` backgrounds
+- Apply `ease-out` transitions at 200–300ms for all enter/exit micro-interactions
+- Use the full gray scale (G10–G900) for nuanced text and surface hierarchy
+- Maintain 64px of top breathing room for the fixed navigation bar
+
+### Don't
+- Use blue as a primary brand color — Dr.Now's identity is orange; blue is reserved for informational chips only
+- Apply the deep gradient (`#D9480F → #F3463B`) outside the hero/brand marketing context — it reads as urgent; web app CTAs use flat `#FD7E14`
+- Use font weights below 400 or above 700 — the type scale uses Regular (400), Medium (500), SemiBold (600), Bold (700) only
+- Mix heavy drop shadows with the card system — Dr.Now elevation is purposefully flat with border-based differentiation
+- Place orange text on orange-tinted backgrounds (P700 on P100 may fail contrast at small sizes)
+- Use border-radius values that aren't in the established scale (4 / 6 / 8 / 12 / 16 / 32 / 99px)
+
+## 8. Responsive Behavior
+
+- **Breakpoint:** 768px (mobile) and 1064px (large desktop cap for web app)
+- **Navigation:** Desktop horizontal nav collapses to a hamburger button at ≤768px
+- **Section padding:** Reduces from 96–128px to 48–64px on mobile
+- **Typography:** Large display sizes (32–56px) reduce by 1–2 steps on mobile
+- **Grid:** 2–3 column layouts collapse to single column at 768px
+- **Cards:** Full-width card pattern on mobile, with reduced padding (8px gap instead of 12px)
+- **Max widths:** Content capped at 1050px for company pages; web app has flexible grid to 1064px
+
+## 9. Agent Prompt Guide
+
+To generate UI consistent with Dr.Now's design language:
+
+```
+Use Pretendard Variable (Korean system font fallback: Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic).
+Primary brand color: #FF8D00 (orange). CTA button background: #FD7E14 with white text, 12px radius.
+Surface hierarchy: page background #F7F9FA → card #FFFFFF with 1px solid #DFE1E2 border → elevated card with box-shadow 0 2px 8px rgba(0,0,0,0.08).
+Neutral text: headings #1C1D1F (G900), body #71767A (G500), meta #8D9297 (G400).
+Transitions: 200–300ms ease-out for all state changes.
+Card radius: 32px for large content panels, 12px for interactive components, 99px for badge/chip.
+Typography scale: 15–16px body (400–500), 17px button (600), 22–32px headings (700).
+Avoid clinical blue as primary; blue is used only for informational contexts (#228BE6).
+```
+
+## 10. Voice & Tone
+
+**Three-word fingerprint:** Warm, Accessible, Trustworthy
+
+Dr.Now's voice is empathetic without being overly clinical — it speaks to patients at vulnerable moments with directness and warmth. The brand avoids medical jargon in favor of plain Korean that anyone can understand at any hour of the night when they're sick and anxious.
+
+| Dimension | Do | Don't |
+|---|---|---|
+| Sentence length | Short, declarative — "아플 땐 닥터나우" | Long subordinate clauses |
+| Vocabulary | Plain Korean, patient-centric ("당신이 아픈 순간") | Medical jargon, formal hospital language |
+| Tone | Warm, reassuring, slightly energetic | Clinical cold, alarmist |
+| Perspective | "We're here for you" — 1st person plural | Institutional 3rd person |
+| Urgency | Gentle accessibility ("언제든지") | Pushy scarcity tactics |
+
+**Voice samples (illustrative — modeled on brand copy):**
+
+- *"늦은 밤에도, 주말에도 — 당신 곁에 있습니다."* (Late at night, on weekends — we're by your side.) — Illustrative, modeled on brand positioning.
+- *"약 처방부터 배송까지, 집에서 끝내세요."* (From prescription to delivery, finish it all at home.) — Illustrative, modeled on feature communication style.
+- *"병원까지의 거리가 걱정되지 않게."* (So the distance to the hospital is no longer a worry.) — Illustrative, reflecting brand manifesto language.
+
+## 11. Brand Narrative
+
+Dr.Now (닥터나우) was founded in 2019 in Seoul with a single observation: Koreans were enduring pain, delaying care, or going without medical help not because they didn't want it, but because accessing it was inconvenient — hospitals closed at night, wait times were long, and the psychological barrier to seeking care was higher than it needed to be. The founding team set out to dissolve that barrier, beginning with a medication delivery service and evolving rapidly into Korea's first scaled telemedicine platform.
+
+By 2026 the platform counts more than 4 million consultations, 5,500+ partner medical institutions, and has passed an 8 million+ download milestone. The brand mission crystallized into a three-pillar commitment: solve the healthcare inconveniences people have accepted as normal, shift the medical market from provider-driven to patient-driven by making symptom-based hospital selection and transparent pricing standard, and be available "늦은 밤에도, 주말에도" — late nights and weekends, whenever patients need care most. The tagline "의료를 더욱 가깝게, 닥터나우" (Healthcare closer with Dr.Now) captures this positioning in four words.
+
+The brand's choice of orange as its primary color is not accidental. Orange refuses the clinical associations of hospital blue and the cold sterility of medical white — it is warm, accessible, and slightly urgent in the best sense, the color of someone who picks up when you call at midnight. Combined with the approachable Pretendard typeface and a conversational voice, Dr.Now has built a brand that feels like a trusted friend who happens to connect you to doctors — not an institution that processes you.
+
+## 12. Principles
+
+1. **Accessibility at Every Hour**
+   Healthcare shouldn't depend on whether it's a weekday at 3pm. The product must work flawlessly for a parent at 2am with a sick child. *UI implication:* Emergency-feel hierarchy — the primary CTA must be immediately findable without scrolling; orange ensures it commands attention without noise.
+
+2. **Patient-Centered, Not Provider-Centered**
+   Patients search by symptom, not by medical specialty. Navigation should mirror how people think about illness, not how hospitals organize themselves. *UI implication:* Symptom-based entry points and specialty discovery that hides complexity; surface the most accessible path first.
+
+3. **Transparency as Trust**
+   Showing consultation prices before booking is a core brand differentiator. Surfacing this information early — without making it feel transactional — builds the trust that drives repeat use. *UI implication:* Price information surfaces at the consultation card level, not buried in a separate screen; use neutral G700 not warning orange for pricing labels.
+
+4. **Warm Urgency Without Alarm**
+   Orange signals "act now" without inducing anxiety. The brand's energy must feel helpful-urgent, not panic-inducing. *UI implication:* Reserve the deep gradient (`#D9480F → #F3463B`) for hero marketing contexts only; use flat `#FD7E14` for in-app CTAs to keep urgency calibrated.
+
+5. **Own the Moment of Illness**
+   The product meets users at a vulnerable moment — sick, worried, often alone. Every touchpoint should feel like a calm, competent presence. *UI implication:* Loading states use gentle skeleton shimmer (1.5s ease-in-out), not spinning indicators; empty states use empathetic copy, never sterile error codes.
+
+## 13. Personas
+
+*Illustrative — not derived from published Dr.Now research; modeled on the brand's stated use cases.*
+
+**지민 (Ji-min), 32 — The Midnight Parent**
+A working parent in Seoul whose toddler spikes a fever at 11pm on Sunday. Her neighborhood clinic is closed; the ER seems excessive for a fever. She opens Dr.Now, finds a pediatrician available in minutes, gets a prescription, and schedules home delivery. *Design implication:* The fastest possible path from symptom to consultation must require ≤3 taps; the specialty "소아과" (pediatrics) card must be prominently featured.
+
+**준혁 (Jun-hyuk), 27 — The Busy Professional**
+A startup employee who gets a cough mid-project sprint and can't spend 90 minutes at a clinic. He uses Dr.Now's phone consultation during a coffee break, gets prescribed and picked up at the nearest partner pharmacy on his way home. *Design implication:* Session brevity matters; consultation duration, wait time estimates, and pharmacy proximity are key information hierarchy elements.
+
+**은지 (Eun-ji), 45 — The Price-Conscious Patient**
+A freelancer without employer health insurance who worries about non-covered drug costs. She uses Dr.Now's "최저가 약국 찾기" (lowest-price pharmacy finder) to compare prescription costs before confirming. *Design implication:* Price transparency surfaces early in the flow; comparison UI must be scannable (not a data table).
+
+**민준 (Min-jun), 58 — The Condition Manager**
+A patient with a chronic dermatology issue who needs monthly prescription refills. He's moved Dr.Now into his monthly routine, using the dermatology prescription repeat feature. *Design implication:* Repeat-prescription flows must surface in the home dashboard for logged-in users; history-aware CTAs ("마지막 처방 반복하기") reduce friction.
+
+## 14. States
+
+- **Empty — No results:** Search returns nothing: show a sympathetic icon and "검색 결과가 없어요" with a suggestion to try a broader keyword or browse by specialty — never a blank white screen
+- **Loading — Initial fetch:** Full-page skeleton using `.animate-skeleton-shimmer` (1.5s ease-in-out infinite) — gray placeholder rectangles match expected content geometry
+- **Loading — In-consultation:** Pulsing "의사를 연결 중이에요" copy with a circular spinner at 0.8s linear infinite — conveys activity without panic
+- **Error — Network fail:** Toast notification with `#FA5252` border-left accent, human copy "연결이 끊겼어요. 다시 시도해 주세요", retry CTA in `#FD7E14`
+- **Error — Prescription unavailable:** Inline card state with `#FFF4E6` background and `#F76707` icon — explains limitation and surfaces an alternative action (find an open pharmacy)
+- **Success — Consultation complete:** Bottom sheet slides up (300ms ease-out) with green checkmark and "진료가 완료되었어요" — prescription delivery CTA follows immediately
+- **Skeleton — Doctor card:** Rectangular placeholder with shimmer animation matching the doctor card's height (approximately 96px) and radius (16px)
+- **Disabled — Unavailable specialty:** Chip or button with `#DFE1E2` background, `#A9AEB1` text — still shows the specialty label so users know it exists but is unavailable
+
+## 15. Motion & Easing
+
+Dr.Now uses a focused animation vocabulary: enter/exit, slide, and shimmer. Motion reinforces the product's calm-urgency balance — fast enough to feel responsive, smooth enough to feel reassuring.
+
+**Duration Scale:**
+- `100ms` — micro-interactions (focus ring, checkbox check)
+- `200ms` — button hover/press state transitions
+- `300ms` — panel enter/exit, toast appear, slide-up sheets (primary UI motion)
+- `500ms` — page-level fade transitions
+- `1500ms` — skeleton shimmer loop
+- `15000ms` — marquee / scroll animations (brand testimonial carousels)
+
+**Easing:**
+- `ease-out` (`cubic-bezier(0, 0, 0.2, 1)`) — default for all enter transitions; elements decelerate into rest
+- `ease-in` — exit transitions; elements accelerate out cleanly
+- `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style standard for screen-level transitions (`screen-slide-in`)
+- `linear` — spinner rotation, marquee scrolls
+- `ease-in-out` — skeleton shimmer, shake animations (periodic/looping)
+
+**Motion Rules:**
+- Bottom sheet: slide up `0.3s ease-out` from `translateY(100%)` to `translateY(0)`
+- Page enter: fade+slide — `opacity 500ms ease-out, transform 500ms ease-out` from `translateY(20px)`
+- Screen navigation: `screen-slide-in 0.32s cubic-bezier(0.4,0,0.2,1)` from opacity 0
+- Skeleton: `skeleton-shimmer 1.5s ease-in-out infinite` — translateX -100% to +100%
+- Accordion: `0.2s ease-out` open/close — height from 0 to content height
+- Never animate layout-affecting properties; prefer `transform` and `opacity` for 60fps compositing