Design System Inspiration of MediBloc (Dr.Palette)

1. Visual Theme & Atmosphere

MediBloc (메디블록) is the Korean healthcare-data company behind Dr.Palette (닥터팔레트), a web-based cloud EMR for clinics, and the Panacea blockchain that lets patients own their own medical records. Its corporate surface reads as a confident, engineering-led health-tech brand rather than a clinical hospital site: a crisp white canvas (#ffffff) alternates with immersive near-black sections (#131313 over pure #000000), and a single electric blue (#0066ff) does all the interactive work — outlined CTAs, links, key metrics, and the "Panacea" wordmark. The tone is trustworthy and technical, the blue signalling "action" the way a well-behaved SaaS product does, never shouting.

The typographic voice is unmistakably Korean-premium: everything is set in Pretendard, the de-facto hangul product font, loaded as named weight cuts (Pretendard-Bold, -SemiBold, -Medium). The hero runs a 60px Pretendard Bold headline ("Own your health data. It's rightfully yours."), section headlines land at 41px, product-card titles at 26px SemiBold, and body copy settles at a quiet 16px / 1.5 in grey #333333. Only the social/utility nav borrows Roboto. Headings on the Dr.Palette/Weavr blog use a near-black #1c1e1f with grey #434343 body — the same restrained ink-on-white hierarchy, confirming a consistent system across the two brand-owned surfaces.

What distinguishes MediBloc from typical fintech-adjacent sites is its comfort with the dark hero. Rather than a solid-blue button system, the flagship surface leans on outlined blue buttons (2px #0066ff border, transparent fill, 4px radius) and rounded white "Visit" pills (28px radius) floating on dark, each carrying a soft ambient shadow (0 10px 20px rgba(0,0,0,0.07)). Depth is minimal and atmospheric — the elevation comes from the dark/light section cadence, not heavy card stacks.

Key Characteristics:

• Pretendard across the system (Bold/SemiBold/Medium cuts), with Roboto only on utility/social nav
• A single electric blue (#0066ff) as the sole interactive/action color — CTAs, links, "Panacea" wordmark
• Outlined-button system (2px #0066ff border, transparent fill, 4px radius) rather than solid fills
• Rounded 28px "Visit" pills with soft ambient shadow on the dark hero
• Dark immersive sections (#131313 / #000000) alternating with a white (#ffffff) canvas
• Near-black headings (#1c1e1f) over a cool grey text ladder (#333333 → #767676 → #999999 → #9d9d9d)
• Sparse magenta (#cc3366) reserved for tiny inline text links — a warm counter-accent to the blue
• Minimal, atmospheric depth: one ambient shadow, no heavy elevation

2. Color Palette & Roles

Primary

• MediBloc Blue (#0066ff): The primary brand and action color. Outlined-CTA borders and text, links, the "Panacea" wordmark, and key metric buttons. The system's single "do this" color.
• Blue Alt (#007aff): A secondary blue that appears on a handful of interactive accents and icons.
• Blue Deep (#0045ff): A deeper blue variant used sparingly for pressed/emphasis blue states.
• Blog Link Blue (#0b7aff): The near-identical link blue used on the Dr.Palette/Weavr blog for category labels and inline links — confirms blue as the cross-surface action color.

Accent

• Magenta (#cc3366): A warm pink-red reserved for small inline text links (e.g. "Visit" text links) — a rare, deliberate counter-accent to the dominant blue.
• Surface Blue (#ebf1ff): A very light blue tint used as a hover/fill base for text buttons and info tags.

Text Hierarchy

• Ink (#1c1e1f): Near-black heading color on the blog/content surfaces — warmer and softer than pure black.
• Body (#333333): The corporate body text color — the default reading grey.
• Body Soft (#434343): The blog body text color — a slightly warmer grey for long-form reading.
• Muted (#767676): Muted nav and utility text.
• Muted Alt (#999999): Secondary/tertiary grey for supporting labels.
• Faint (#9d9d9d): Lowest-emphasis meta — timestamps, dates, fine print.

Neutral & Surface

• Pure White (#ffffff): Page background, white cards, and text on dark/blue.
• Surface Dark (#131313): The near-black background of the immersive hero and dark sections.
• Pure Black (#000000): The deepest background layer beneath the dark sections.

3. Typography Rules

Font Family

• System: Pretendard (loaded as named cuts — Pretendard-Bold, Pretendard-SemiBold, Pretendard-Medium) — used for all headlines, body, cards, and primary UI labels.
• Utility: Roboto — used only for the compact social/utility nav links (Blog, Telegram, Twitter, Github).

Hierarchy

Principles

• One font, many cuts: Pretendard carries the whole system; hierarchy comes from named weight cuts (Bold → SemiBold → Medium → Regular), not from font-family switches.
• Bold display, quiet body: 60px Bold headlines persuade; 16px / 1.5 Regular body informs. The weight contrast is the primary hierarchy signal.
• Hangul-first sizing: Body sits at a generous 16px with 1.5 line-height for dense hangul legibility.
• Roboto stays in its lane: Roboto appears only on the utility/social nav; it never touches display or body.

4. Component Stylings

Buttons

Outlined Action (Primary)

• Background: #ffffff
• Text: #0066ff
• Border: 2px solid #0066ff
• Radius: 4px
• Padding: 0px 50px
• Height: 62px
• Font: 15px Pretendard weight 400
• Shadow: 0 10px 20px rgba(0,0,0,0.07)
• Use: Outlined primary action — "Validator Guide", "Delegator Guide", "Apply for Token swap"

Visit Pill (Ghost on Dark)

• Background: #131313
• Text: #ffffff
• Radius: 28px
• Padding: 14px
• Height: 48px
• Font: 14px Pretendard weight 500
• Shadow: 0 10px 20px rgba(0,0,0,0.07)
• Use: Rounded "Visit" pill on the dark hero product cards

Text Link Button

• Text: #0066ff
• Radius: 3px
• Padding: 12px 24px
• Height: 39px
• Font: 15px Pretendard weight 500
• Use: Inline text-link button — "See more company news"

Cards & Containers

Feature / Product Card

• Background: #ffffff
• Text: #333333
• Radius: 8px
• Shadow: 0 10px 20px rgba(0,0,0,0.07)
• Use: Product / feature card (MediBloc Wallet, MediBloc Explorer)

Badges

Light-Blue Info Tag

• Background: #ebf1ff
• Text: #0066ff
• Radius: 4px
• Padding: 4px 7px
• Font: 14px Pretendard weight 500
• Use: Light-blue info tag / highlight pill

Navigation

• Background: #131313 (dark header)
• Text: #ffffff
• Font: 14px Roboto weight 500
• Active: blue #0066ff text on active item
• Use: Top nav / social links (Blog, Telegram, Twitter, Github)

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 2 brand-owned surfaces) Tier 1 sources: https://medibloc.com/ , https://blog.medibloc.org/ Tier 2 sources: getdesign.md/medibloc (0 DESIGN.md files — not listed); styles.refero.design/?q=medibloc (no MediBloc-specific style — search returned only the default catalog) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: ~4px, with a loose scale measured from live padding
• Scale: 4px, 7px, 12px, 14px, 24px, 25px, 50px
• Notable: outlined buttons carry a generous 50px horizontal padding, giving them a wide, confident hit area; small tags use 4px 7px

Grid & Container

• Centered single-column hero anchored by the 60px Pretendard Bold headline over a dark background
• Product entries (MediBloc Wallet, MediBloc Explorer, Panacea) presented as cards with a "Visit" pill each
• Full-width dark sections (#131313) alternate with white (#ffffff) content bands for a light/dark cadence
• Blog/content surfaces use a comfortable single reading column with near-black headings

Whitespace Philosophy

• Section cadence over card stacks: separation comes from alternating dark (#131313) and white (#ffffff) full-width bands, not from heavy borders or stacked shadows.
• Airy hero, dense stats: the hero breathes, while token/metric buttons pack tightly into rows.
• Blue as the wayfinding cue: because #0066ff is the only saturated action color, the eye always knows where the next step is.

Border Radius Scale

• Extra-small (3px): text-link buttons
• Small (4px): outlined buttons, info tags — the workhorse
• Medium (8px): feature / product cards
• Pill (28px): rounded "Visit" buttons
• Full (9999px): fully-round elements where used

6. Depth & Elevation

Shadow Philosophy: MediBloc's depth is intentionally minimal and atmospheric. A single soft ambient shadow (0 10px 20px rgba(0,0,0,0.07)) lifts buttons, pills, and cards a hair off the surface; there is no multi-layer elevation system. The real sense of depth comes from the alternating dark (#131313 / #000000) and white (#ffffff) full-width bands, which frame content cinematically without stacking cards. When emphasis is needed, the system reaches for the blue (#0066ff) or the dark section, not heavier shadow.

7. Do's and Don'ts

Do

• Set the whole system in Pretendard, using named weight cuts (Bold / SemiBold / Medium) for hierarchy
• Reserve blue (#0066ff) for interactive elements — CTAs, links, key metrics — keep it the single action color
• Use the outlined button (2px #0066ff border, transparent/white fill, 4px radius) as the primary action style
• Use near-black (#1c1e1f) or grey (#333333) for text instead of pure black on white
• Alternate dark (#131313) and white (#ffffff) full-width bands for section rhythm
• Apply the single ambient shadow (0 10px 20px rgba(0,0,0,0.07)) for gentle lift on buttons and cards
• Keep magenta (#cc3366) to tiny inline text links only — a rare counter-accent

Don't

• Spread blue (#0066ff) across decorative elements — it dilutes the single-action signal
• Introduce a second saturated brand color beyond the sparse magenta accent
• Use heavy, multi-layer shadows or stacked cards for depth — depth is section-based and minimal
• Set headlines in a light weight — display is always the Pretendard Bold/SemiBold cut
• Use Roboto for display or body — it is a utility/social-nav font only
• Use pure black (#000000) as body text — reserve it for the deepest section backgrounds
• Force a solid-blue-fill button where the outlined blue button is the brand's real primary

8. Responsive Behavior

Breakpoints

Touch Targets

• Outlined buttons at 62px height with 50px horizontal padding — a large, confident target
• "Visit" pills at 48px height, fully rounded for an unmistakable tap area
• Nav/social links spaced within the dark header

Collapsing Strategy

• Hero: 60px Pretendard headline scales down on mobile, Bold cut maintained
• Product cards (Wallet, Explorer, Panacea): multi-column → stacked single column
• Dark/white alternating sections maintain full-width treatment, reduce internal padding
• Blog/content column narrows while keeping the near-black heading hierarchy

Image Behavior

• Product illustrations and screenshots carry the soft ambient shadow at larger sizes
• Cards maintain 8px radius across breakpoints
• The dark hero maintains its #131313 framing at all widths

9. Agent Prompt Guide

Quick Color Reference

• Primary / interactive: MediBloc Blue (#0066ff)
• Secondary blue: Blue Alt (#007aff)
• Blog link blue: (#0b7aff)
• Light-blue tint: Surface Blue (#ebf1ff)
• Accent (tiny links): Magenta (#cc3366)
• Heading: Ink (#1c1e1f)
• Body: (#333333) / blog body (#434343)
• Muted: (#767676) / secondary grey (#999999) / faint meta (#9d9d9d)
• Canvas: Pure White (#ffffff)
• Dark section: (#131313) over Pure Black (#000000)

Example Component Prompts

• "Create a dark hero: #131313 background, 60px Pretendard Bold white headline. Below it, product cards each with a rounded 'Visit' pill: #131313 fill (ghost on dark), white text, 28px radius, 14px padding, 14px Pretendard, soft shadow 0 10px 20px rgba(0,0,0,0.07)."
• "Design an outlined primary button: white #ffffff fill, #0066ff text, 2px solid #0066ff border, 4px radius, 0px 50px padding, 62px height, 15px Pretendard."
• "Build a feature card: white #ffffff background, 8px radius, 0 10px 20px rgba(0,0,0,0.07) shadow. Title 26px Pretendard SemiBold #1c1e1f, body 16px Pretendard #333333."
• "Create a light-blue info tag: #ebf1ff background, #0066ff text, 4px radius, 4px 7px padding, 14px Pretendard."

Iteration Guide

1. Pretendard everywhere; hierarchy from Bold/SemiBold/Medium cuts, not family switches
2. Blue (#0066ff) is the single action color — don't spread it
3. Primary button is outlined (2px #0066ff, 4px radius), not solid fill
4. Depth is section-based: alternate #131313 dark and #ffffff white bands; one ambient shadow only
5. Text is #1c1e1f/#333333, never pure black on white
6. Magenta (#cc3366) is a rare tiny-link accent only
7. Roboto is utility/social nav only

---

10. Voice & Tone

MediBloc's voice is confident, empowering, and rights-forward — it frames health data as something that belongs to the patient, not the institution. The corporate hero line "Own your health data. It's rightfully yours." sets the register: declarative, ownership-framed, a little activist, never clinical or fear-based. On the Dr.Palette product side the tone shifts to practical and reassuring for clinicians ("모두가 그리는 클라우드 EMR" — "a cloud EMR everyone draws"), emphasizing speed, mobility, and ease over jargon. Both voices treat the reader — patient or doctor — as a capable owner of their own workflow and data.

Voice samples (verbatim from live surfaces):

• "Own your health data. It's rightfully yours." — corporate hero headline, medibloc.com. (verified live 2026-07-02)
• "모두가 그리는 클라우드EMR, 닥터팔레트 2.0 출시" — Dr.Palette 2.0 launch notice, blog.medibloc.org. (verified live 2026-07-02)
• "닥터팔레트는 웹 기반으로 서버를 별도로 구축하지 않아도 되며, 다운로드, 업그레이드를 위해 시간을 낭비하지 않아도 됩니다." — Dr.Palette feature copy (no servers, no downloads). (verified live 2026-07-02)

Forbidden register: fear-based health messaging, opaque medical/blockchain jargon left unexplained, aggressive sales urgency, exclamation-heavy hype.

11. Brand Narrative

MediBloc (메디블록) was founded in 2017 by 고우균 (Allen Ko) and 이은솔 (Eunsol Lee) — a software engineer and a practicing radiologist — to solve a problem both had lived: a patient's medical records are fragmented across every hospital they have ever visited, owned by the institutions rather than the person. MediBloc's founding premise reframes that relationship: your health data is "rightfully yours." The company built the Panacea blockchain as the backbone for patient-owned records and the MED token economy around it.

That mission produced two consumer/clinical products. Medipass (메디패스) lets patients gather and carry their own records, prescriptions, and insurance claims on their phone. Dr.Palette (닥터팔레트) is a web-based cloud EMR for clinics — no on-premise server to build, no downloads or upgrade downtime, with a mobile companion that syncs to the chart in real time so a clinician can review or photograph a patient's condition from anywhere. In 2021 Dr.Palette 2.0 shipped with a stated focus on "speed, design, and usability." (The consumer brand has since been consolidated under the Weavr (위버케어) umbrella, which is why the official blog now resolves to weavrlog.care.)

What MediBloc refuses, visible in its design: the heavy, intimidating chrome and institutional blue-and-grey of legacy hospital software, and the fear-based framing of much health marketing. What it embraces: a clean white-and-blue system, a single confident action color, near-black-on-white typography set entirely in Pretendard, and copy that puts ownership and ease in the reader's hands.

12. Principles

1. The data is the patient's. Ownership is the founding idea. UI implication: frame health data around the person ("rightfully yours"); the primary CTA is always the user's next step, marked by the single blue.
2. One action, one color. Blue (#0066ff) means "do this." UI implication: reserve saturated blue exclusively for interactive elements so the next step is never ambiguous.
3. Remove the friction, not the trust. Dr.Palette's pitch is "no servers, no downloads, no upgrades." UI implication: surfaces should feel fast and light — minimal depth, generous spacing, clear labels — never heavy or gated.
4. Clean over clinical. Reject legacy-hospital chrome. UI implication: white canvas, near-black text, Pretendard throughout; alternate dark and white bands for rhythm instead of stacked cards.
5. Consistent across surfaces. Corporate, EMR, and blog share one type and color language. UI implication: Pretendard + blue + near-black hierarchy carry from medibloc.com to the Dr.Palette blog unchanged.

13. Personas

Personas below are fictional archetypes informed by publicly observable MediBloc / Dr.Palette user segments (Korean clinic operators, patients managing their own records, blockchain participants), not individual people.

김민재, 44, 서울. A private-clinic director evaluating a cloud EMR to escape an aging on-premise system. Values that Dr.Palette needs no server build and updates itself; wants to review charts from his phone between rooms. Chose it for speed and the mobile companion.

박수현, 31, 경기. A patient who has bounced between hospitals and is tired of re-explaining her history. Uses Medipass to carry her own records and claims. Trusts MediBloc because the brand's whole premise is that the data is hers, not the hospital's.

이도현, 29, 대전. A developer and MED-token holder who follows the Panacea chain. Reads the validator and delegator guides, checks circulating supply, and appreciates that the technical metrics are stated plainly with guides linked rather than buried.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet, consistent with the clean, minimal-depth aesthetic. Buttons and "Visit" pills respond to press with a subtle opacity/scale shift; content and product cards fade-in from below at motion-standard / ease-enter. Transitioning into a dark (#131313) section uses a motion-slow background crossfade — cinematic once, not fidgety. No bounce or spring: a health-data product signals steadiness and trust. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the product remains fully functional.