닥터다이어리 DESIGN.md

Design System Inspiration of Dr.diary

Overview

Visual Theme & Atmosphere

Dr.diary (닥터다이어리) is a Seoul healthcare company that began in 2017 as a diary app for people with diabetes. Its own home page puts the origin in one line: "2017년, 당뇨병 환자의 더 나은 일상을 위해 닥터다이어리가 시작되었습니다." It then says where the company has gone since: "지금의 우리는 만성질환자를 넘어, 모두의 건강한 삶을 위한 행동 습관 변화 솔루션으로 성장하고 있습니다." The timeline on the same page traces that path. The app and a patient community launched in 2017. Dr.diary glucose meters and a test-strip subscription followed in 2021, and a Series B round and a Ministry of Health and Welfare certification for non-medical health management in 2022. The company then moved into foods (무화당 in 2020, 글루어트 in 2023), collaborated with Samsung on health services (2023–2024), launched the B2B 닥터다이어리 커넥트 (2024), and took part in hospital research and national MyData pilots in 2025. The company site is now less an app page than a company page. It explains a consumer app, a food line (무화당, 글루어트), and a B2B solution for organisations; the contact page's first inquiry type is 기업 EAP 솔루션 도입 문의.

The site reads calm and clinical-clean. The canvas is white (#ffffff). Headings sit in a deep navy ink (#232f4d), body copy in pure black (#000000), and a cool slate ladder (#4f5971 → #656d82 → #7b8294 → #9197a6 → #bdc1ca) steps text down in emphasis. The one chromatic accent in any action role is sky blue (#3eaeff). It draws the outline and label of the pill actions, 문의하기 on each inquiry card and 자세히 보기 on /solution, and the small accent labels above headings. The brand's warmth comes from a pink, violet and cyan gradient. It appears only as clipped text: the current page's navigation label, and the colour-tinted rotating words of the home hero (행복한, 건강한, 평온한). A supplementary survey read it, but the collector did not record it, so it is described here and not tokenised.

Everything is set in Pretendard, served from the site itself. Headlines are large and airy: 64px page titles with an 88px line, 40px/600 section heads, and 24px pill labels and timeline items. Pills are fully round (9999px), cards round at 16–20px, and separation comes from hairlines (#dee0e4) and pale tinted cards (#f5f8fb). Every element the collector recorded computes no shadow.

Key Characteristics:

• Sky blue (#3eaeff) as the one chromatic action colour: outline pills and accent labels; hover on the /solution pill fills it with #ecf7ff
• Navy ink (#232f4d) for headings, and as the fill of the single filled action and of selected chips and tabs
• Pink, violet and cyan gradient text on the current navigation item and the home hero words (survey-read; not a token)
• Pretendard for every role; large 24px labels, 40px section heads, 64px page titles
• Full pills (9999px) for actions and chips; 16px and 20px card radii; 8px store buttons
• Flat: hairline #dee0e4 borders and #f5f8fb cards; no recorded shadow

Primary tasks

• Log blood glucose for the first time after a diagnosis
• Spot patterns in logged glucose data before a doctor's visit
• Use the B2B health service offered through an employer
• Understand what the company offers for chronic-disease care
• Browse press and news items on the homepage

Brand Narrative

Dr.diary started from one daily problem: people newly diagnosed with diabetes had to record glucose, food and medication by hand, alone. The 2017 app made that diary easy and added a community. In its own words, the company has since grown "만성질환자를 넘어, 모두의 건강한 삶을 위한 행동 습관 변화 솔루션으로".

Its timeline (home page, 걸어온 길) shows each step:

• 2017–2019: app launch, community, the 닥다몰 store; diabetes camps and offline events; Seoul's diabetes-education contractor; an efficacy paper with Pusan National University; 200,000 downloads.
• 2020–2021: the food brand 무화당; a Roche partnership; a Dr.diary glucose meter and a test-strip subscription; membership of the Digital Therapeutics Alliance; 500,000 downloads.
• 2022: Series B; Ministry of Health and Welfare certification for non-medical health management (chronic-disease type); 800,000 downloads; 닥터다이어리 워크 and 클래스.
• 2023–2024: a Samsung Electronics healthcare collaboration; the Financial Times' APAC high-growth companies list; 글루어트; 1.5 million downloads; 닥터다이어리 커넥트; a predicted-HbA1c algorithm in Samsung Health; insurer partnerships.
• 2025: selection for a Ministry of Science and ICT MyData pilot; an MOU with Handok; 글루어트 clinical research with Seoul National University Hospital.

The values section names four directions: self-motivation, community, digital therapeutics (it calls itself the first Korean diabetes-category DTA member), and a multi-solution platform. Regional press it links from the home page describes the same turn toward hospital AI and chronic-care coaching (Bloter, Edaily; see .verification.md).

Principles

1. Make the marathon finishable. Self-management is long; UI implication: calm pages, big readable labels, one clear action per card.
2. Plain over clinical. UI implication: explain every term; headings in navy ink, never alarm colours.
3. One accent, one fill. UI implication: sky blue outlines the actions; navy fills the one that must stand out.
4. Flat and light. UI implication: hairlines and tints, no shadows.

Personas

Fictional archetypes informed by the segments Dr.diary names (people with diabetes and chronic conditions, employers and public-health partners); not real people.

김도현, 34, 서울. Newly diagnosed with type-2 diabetes and logging glucose for the first time. He chose an app that felt like a friendly consumer product, not a hospital chart.

이서연, 41, 경기. Manages a parent's condition alongside her own. She reads trends before doctor's visits and wants every term explained in plain Korean.

박준영, 29, 부산. Uses Dr.diary through an employer programme. He trusts it partly because of its hospital and public-health partnerships.

Colors

Why sky blue is the primary

• Sky Blue (#3eaeff, the site's brandblue100 class): the primary. It is the only chromatic colour in an action role on the captured pages. It draws the border and label of all five 문의하기 pills on /contact and of 자세히 보기 on /solution, which is six of the seven pill actions captured. It also colours accent labels on three pages: the h3 eyebrows on /solution, the inquiry-type labels on /contact, and the outlet name on each home press card.
• Navy (#232f4d, brand100) fills the one remaining action, 상담 신청하기 on /solution, and the selected press filter chip and underline tab. It is also the heading ink across the site, the top of the neutral scale. Navy is therefore recorded as ink and as those components' fill, not as the primary.
• Primary Tint (#ecf7ff): the hover and pressed fill of 자세히 보기 (probe).

Ink & Neutrals

• Navy Ink (#232f4d): section and card headings, footer links, the filled action, the selected chip and tab.
• Pure Black (#000000): document default and body copy.
• Slate (#4f5971): header navigation, timeline items, and the hover colour of unselected tabs and feature-card borders.
• Slate Soft (#656d82): unselected filter-chip labels and page numbers.
• Gray (#7b8294): labels of the unselected feature cards on /solution.
• Muted (#9197a6): footer address, captions, units beside large figures.
• Faint (#bdc1ca): 전체보기 links, unselected tabs, disabled pagination.

Surface & Accent

• White (#ffffff): canvas, cards, store-button outlines over the closing band.
• Surface (#f5f8fb): the inquiry cards on /contact (probe).
• Hairline (#dee0e4): card, chip and feature-card borders.
• Violet (#4970f5) on Violet Tint (#d7dffd): the current page number; violet also colours the hashtag line on home (#당뇨병 예방·체중 관리).

Brand assets outside the tokens

• The gradient in the navigation and hero is a pink → violet → cyan sweep of clipped text. A supplementary survey read its stops, recorded in .verification.md. Neither the collector nor a probe recorded it, so it is not a token.

Typography

Font Family

• Sans (every role): Pretendard, with a declared pretendard Fallback and system fallbacks. The collector saw it loaded and in use on 324 recorded elements (body, headings, buttons, list items), served from the site's own build as a variable face (weights 100–900). Pretendard is distributed under the SIL Open Font License 1.1. No Dr.diary page opened names its typeface, so there is no official product-use claim.

Hierarchy

Principles

• One family, weight as hierarchy. Pretendard carries every role; 400 → 500 → 600 → 700 does the work.
• Large labels. Actions, chips and timeline items all sit at 24px, bigger than the 16px body. The pages read like a presentation, not a dense app.
• Tight negative tracking (-0.2px) on everything from 20px up; -0.1px on 16–18px captions and titles.

Layout

Spacing

• Pill actions: 16px 32px (inquiry) and 12px 32px (more); the filled consult pill 16px 24px 16px 36px
• Filter chips 12px 24px; header items 12px 8px; the selected feature card 32px
• The collector's most frequent padding and gap values are 12, 16, 4, 8, 32 and 24px

Grid & Container

• Full-width hero image with a centred white headline on home; page heroes on /solution and /news/press follow the same pattern
• Press cards in a horizontally scrolling carousel on home (320px cards) and a three-column grid on /news/press
• /solution pairs a column of feature selector cards with a detail panel; /contact stacks five tinted inquiry cards, each with its own 문의하기 pill

Border Radius Scale

• 4px disabled pagination arrows · 6px page numbers · 8px store buttons · 16px home press cards · 20px feature cards and the /news/press grid · 9999px pills and chips

Responsive Behavior

Only the 1440px desktop layout was captured. The class names show mobile variants (m-body… classes switching to md: sizes), but they were not measured, so no breakpoint table is given.

Touch Targets (measured at 1440px)

• Pills 64–72px tall; filter chips 64px; feature cards 84px; store buttons 54px; header items 48px; page numbers 40 × 40

Elevation & Depth

Shadow philosophy: every element the collector recorded computes no shadow. A supplementary survey read one soft, low-opacity navy shadow on an unrecorded home element (and a teal-tinted one on /solution). Those values are in .verification.md, and no shadow token is declared. Emphasis comes from colour instead: the sky-blue outline, the navy fill, the gradient text.

Motion & Easing

Measured transitions only:

• color, background-color, border-color, text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1) on the more pill, underline tabs, pagination and the store buttons
• all 0.2s cubic-bezier(0.4, 0, 0.2, 1) on the feature selector cards
• 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) (a back-ease) on the home press cards and 0.15s cubic-bezier(0.4, 0, 0.2, 1) on the /news/press cards, from the supplementary survey
• all 0s on the inquiry pill, the consult pill and the filter chips

No durations or easings beyond these are declared.

Components

Buttons

Inquiry Pill (primary outline)

• Background #ffffff, label and 1px border #3eaeff, radius 9999px, padding 16px 32px, 72px tall, 24px/600
• Hover and pressed: opacity 0.8 (probe); focus: no change
• Use: 문의하기 on each of the five inquiry cards of /contact

More Pill (outline)

• Transparent fill, label and 1px border #3eaeff, radius 9999px, padding 12px 32px, 64px tall
• Hover and pressed: fill #ecf7ff after a 0.15s colour transition (probe); focus: no change
• Use: 자세히 보기 → on /solution

Consult Pill (filled)

• Background #232f4d, label #ffffff, radius 9999px, padding 16px 24px 16px 36px, 70px tall
• Hover and pressed: no change; focus swaps only the arrow image (probe)
• Use: 상담 신청하기 on /solution

Store Button (outline on the closing band)

• Transparent fill, label and 1px border #ffffff, radius 8px, padding 12px 16px, 54px tall, 18px/500
• Use: Google Play and App Store links on every page

Chips, Tabs & Selectors

Filter Chip: white fill, #656d82 label, 1px #dee0e4 border, 9999px radius, 12px 24px padding, 64px tall. Selected: #232f4d fill with a #ffffff label. Neither variant changes on hover, pressed or focus (probe).

Underline Tab: #bdc1ca label, padding 0 38px 6px, 38px tall, 20px/600. Selected: #232f4d label over a 2px #232f4d bottom border. Hover and pressed: #4f5971 label (probe).

Feature Card Selector: white fill, #7b8294 label, 1px #dee0e4 border, 20px radius, 12px 32px padding, 84px tall. Selected: 347 × 254, padding 32px, label #232f4d. Hover and pressed: border #4f5971 (probe).

Pagination: 40 × 40, #656d82 numbers at 20px/600, 6px radius; the current page is #4970f5 on #d7dffd; disabled arrows are #bdc1ca with a 4px radius.

Cards

Press Card: white fill, 1px #dee0e4 border, 16px radius, 320 × 373 in the home carousel (20px radius, 376 × 372, in the /news/press grid). Bundle hover and pressed frames show no change.

Navigation

Header Item: #4f5971 at 20px/400, padding 12px 8px, 48px tall. The current page's item turns 700 and its label is gradient-clipped text.

---

Verified: 2026-09-30 (deterministic collector on four public pages + fixed keyboard probe on three) Tier 1 sources: https://drdiary.co.kr/ | https://drdiary.co.kr/solution | https://drdiary.co.kr/news/press | https://drdiary.co.kr/contact Tier 2 sources: getdesign.md/drdiary and styles.refero.design/?q=drdiary — no Dr.diary entry Conflicts unresolved: none

States

Observed only:

• Hover / pressed: inquiry pill opacity 0.8; more pill fill #ecf7ff; unselected tab label #4f5971; feature-card border #4f5971. The consult pill, filter chips, page numbers, press cards and store buttons show no change.
• Selected: filter chip #232f4d fill with a #ffffff label; underline tab #232f4d with a 2px bottom border; feature card expanded with a #232f4d label; page number #4970f5 on #d7dffd; header item at 700 with gradient text.
• Disabled: first and previous page arrows in #bdc1ca.
• Focus: no captured control draws an authored focus style. The probe's Tab walk changed only image sources on two controls.

Empty, loading, error and success states belong to the app and were not captured.

Live state probe, 2026-10-16 (https://drdiary.co.kr/contact), inquiry-button: focus — no visible change (measured 2026-10-16).

Do's and Don'ts

Do

• Use sky blue (#3eaeff) for outline actions and accent labels; fill its hover with #ecf7ff
• Use navy (#232f4d) for headings, the filled action and selected chips and tabs
• Keep actions and chips fully round (9999px) and cards at 16–20px
• Set everything in Pretendard with -0.2px tracking at 20px and above
• Separate with #dee0e4 hairlines and #f5f8fb cards

Don't

• Don't fill large areas with sky blue; on the captured pages it is an outline and label colour
• Don't add drop shadows to cards or pills
• Don't treat the gradient as a flat colour token; it is clipped text on a few words
• Don't introduce a second typeface

Voice & Tone

Dr.diary speaks warmly and plainly about a long-term condition. The home page frames the product around everyday wellbeing ("당신의 행복한 · 건강한 · 평온한 일상이 지속될 수 있도록", "일상의 모든 순간, 닥터다이어리"). The values section frames self-management as a marathon the company helps people finish: "사용자가 만성질환 관리라는 긴 마라톤을 포기하지 않고 완주할 수 있도록, 사용자의 일상 속 자가관리를 돕습니다."

Forbidden register: fear-based medical urgency, undefined clinical jargon, guilt about health habits, hype.

Agent Prompt Guide

Quick Color Reference

• Primary outline / accent: #3eaeff; its hover fill #ecf7ff
• Heading ink and filled action: #232f4d
• Body: #000000; slate ladder #4f5971 → #656d82 → #7b8294 → #9197a6 → #bdc1ca
• Current page: #4970f5 on #d7dffd
• Canvas #ffffff; tinted card #f5f8fb; hairline #dee0e4

Example Component Prompts

• "Inquiry card: #f5f8fb card with a 1px #dee0e4 border and 20px radius. Inside, a 문의하기 pill: white fill, 1px #3eaeff border, #3eaeff label at 24px/600 Pretendard, 9999px radius, 16px 32px padding, 72px tall; on hover, opacity 0.8."
• "Press filter: pills at 24px/500 Pretendard, 12px 24px padding, 9999px radius. Selected: #232f4d fill, white label. Unselected: white fill, #656d82 label, 1px #dee0e4 border."
• "Press card: white, 1px #dee0e4 border, 16px radius, no shadow; outlet name in #3eaeff at 16px/500; title 18px/500 #232f4d."

Iteration Guide

1. Sky blue is an outline and label colour; navy is ink and the one fill
2. Pills and chips at 9999px; cards at 16–20px
3. Pretendard only; 24px labels, 40px sections, 64px page titles
4. No shadows; hairlines and pale tint separate
5. The gradient is prose, not a token

---

Governance

Known Gaps

• Contrast, inquiry-button. Text #3eaeff on #ffffff measures 2.41:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, feature-card-button. Text #7b8294 on #ffffff measures 3.84:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.