Design System Inspiration of MediBloc

1. Visual Theme & Atmosphere

MediBloc (메디블록) is the health-data blockchain project behind Panacea, "a high-performance blockchain optimized for health data exchange", and the MED coin that rewards people for contributing to it. medibloc.com is operated today by MediBloc Limited, whose footer gives an address in Gibraltar, and its home opens on the promise that sets the whole register: "Own your health data. It's rightfully yours." The site explains a patient-centred ecosystem in which hospitals issue signed credentials through decentralized identifiers (DIDs) on Panacea, health data stays "only at the user's endpoint" rather than on the chain, and patients, clinicians, research institutes, insurers and pharmaceutical companies earn MED for what they contribute.

The brand has moved since its first consumer push. The company's own 2023 announcement on the site says the team concluded it had to reach "the majority of general users familiar with WEB2", not only WEB3 natives, and switched from growing the data pool through personal access to growing it through cooperation with institutions. It names MediPass and Dr.palette as the dapps already serving "over 700,000 users". The blog that follows reads as a running network log: quarterly "MediBloc Panacea Ecosystem Update" posts through 2025 and 2026, the "11th Token Swap Completed" on 1 June 2026, and the "Panacea Mainnet Upgrade (v2.3.0)" on 21 August 2026. The home itself is organised around what a holder or validator does next: check circulating supply, read the validator or delegator guide, stake on Osmosis, apply for a token swap.

Visually the site is a dark, Elementor-built crypto-project page. Headings and hero copy compute white (#ffffff) over section backgrounds the collector did not record. The 2023 post page records its body and top section as pure black (#000000), so the home's dark bands are an observation of the white text, not a measured colour. The one saturated colour that does work is MediBloc Blue (#0066ff). It is the 2px outline and the label of every home call-to-action (Circulating Supply, Validator Guide, Delegator Guide, A to Z guide, Apply for Token swap), the label of the "See more company news" text button, and the "See more" toggle in the ecosystem section. Those buttons have no fill. They are outlines with a soft drop shadow (rgba(0, 0, 0, 0.07) 0px 10px 20px 0px) and a tight 4px corner. A magenta (#cc3366) is the theme's link colour, used on footer link lists and the invisible link overlays inside each button.

Type is mixed rather than a single family. Headings, buttons, the hero paragraphs and the footer use self-hosted Pretendard cuts loaded as separate families (Pretendard-Bold for headings, -SemiBold for buttons, -Medium and -Regular for copy). Blog cards and the post title use Montserrat in light weights. The contact form uses Lato. The page default, the post body and the accordion titles fall through to the operating-system stack (-apple-system, "system-ui", "Segoe UI", Roboto …).

Key Characteristics:

• MediBloc Blue (#0066ff) as outline and label on every home call-to-action; the buttons themselves are unfilled
• Wide 62px outlined buttons with 50px side padding, a 4px radius and one soft drop shadow
• White headings and copy over dark section backgrounds; the post page computes pure black (#000000)
• Pretendard cuts for headings and actions, Montserrat for blog cards and post titles, Lato for form fields, the system stack for long post text
• Magenta #cc3366 as the theme link colour in footers and button link overlays
• Grey ink #333333 as the page's default text colour, #848484 for captions, #393939 in form fields

Primary tasks

• Check MED's circulating supply and where to trade or track it
• Read the validator or delegator guide and stake MED
• Provide MED liquidity on Osmosis and earn OSMO
• Apply for a token swap from MEDX (ERC20) or MED (QRC20)
• Follow the Panacea ecosystem updates on the blog

2. Color Palette & Roles

Primary

• MediBloc Blue (#0066ff): The primary action colour. On home it is the 2px border and the label of the five outlined calls-to-action, the label of the "See more company news" text button and the "See more" toggle. It is the primary because it is the only saturated colour any captured action renders: the buttons have transparent fills (rgba(3, 1, 27, 0)), and the two wrapper levels the collector recorded around each one (htmove-button-area, elementor-element) are transparent too. It was observed on home only; the blog and post pages have no call-to-action of their own.

Neutrals

• White (#ffffff): The home body background and the colour of every heading, hero paragraph, navigation label and footer heading, which sit on dark section backgrounds.
• Ink (#333333): The body's default text colour on all three pages.
• Field Text (#393939): The text colour of the contact form's inputs, select and textarea.
• Muted (#848484): Caption and supporting copy on home (the MED disclaimer, section footnotes).
• Black (#000000): The body and top section background of the 2023 post page; on /blog/ it is also the current navigation item's label.

Accent

• Magenta (#cc3366): The theme's link colour, on footer link lists (Network, Resources, Communities) and the transparent link overlays that sit inside each outlined button.

Not tokens

• #69727d is the declared border colour of the form fields, but their border width computes 0px, so no border is drawn.
• The "See more company news" button computes a background of rgba(235, 241, 255, 0); the light-blue #ebf1ff is fully transparent there and is not rendered.
• The dark section backgrounds behind the home's white text are not in the capture.

3. Typography Rules

Font Family

• Pretendard — live surface use: loaded as four separately named families, Pretendard-Bold, Pretendard-SemiBold, Pretendard-Medium and Pretendard-Regular, from self-hosted WOFF files at https://medibloc.com/wp-content/uploads/2021/07/Pretendard-*.woff. Each @font-face declares weight 100, so headings compute font-weight: 400; the boldness comes from the cut named in the family. Official distributed asset: Pretendard by Kil Hyung-jin, SIL Open Font License 1.1.
• Montserrat — live surface use on /blog/ card titles (18px / 300) and the 2023 post title (45px / 200).
• Lato — live surface use as Lato_Regular in the contact form fields and as Lato_Bold in one home heading ("Trade & Track").
• System stack — the body default, the post body and headings, the accordion title and the navigation compute -apple-system, "system-ui", "Segoe UI", Roboto, … (the navigation's stack starts at Roboto). These are operating-system fonts, not a brand face, so no family token is set for them.
• Declared only — AdobeClean-Bold, AdobeClean-Regular, eicons and Font Awesome 5 Free have @font-face rules with no observed use.
• Official product use — no medibloc.com page opened names its typefaces.

Hierarchy

Principles

• Weight lives in the family name. A Pretendard heading reads bold because it is set in Pretendard-Bold, while its computed weight stays 400.
• Long-form post text is left to the system stack; Pretendard is reserved for the home's headings, actions and footer.
• Editorial titles switch to light Montserrat, a separate voice from the heavy Pretendard home.

4. Component Stylings

Buttons

Outlined call-to-action

• Background: transparent (rgba(3, 1, 27, 0))
• Text: #0066ff
• Border: 2px solid #0066ff
• Radius: 4px
• Padding: 0px 50px
• Height: 62px
• Font: 15px / 400 / 42px Pretendard-SemiBold, letter-spacing 1px
• Shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px 0px
• Use: Circulating Supply, Validator Guide, Delegator Guide and A to Z guide on home; Apply for Token swap uses the same outline at 14px Pretendard-Medium

Text button

• Background: transparent (rgba(235, 241, 255, 0))
• Text: #0066ff
• Radius: 3px
• Padding: 12px 24px
• Height: 39px
• Font: 15px / 500 / 15px Pretendard-Medium
• Use: "See more company news" under Latest News

Form send button

• Text: #ffffff
• Radius: 3px
• Padding: 0px 16px
• Height: 40px
• Font: 16px / 500 / 16px Pretendard-Medium
• Use: "Send" at the foot of the contact form on all three pages; the button and its recorded wrapper compute transparent, so its fill is not part of this record

Toggles and tabs

Ecosystem "See more" toggle

• Text: #0066ff
• Font: 17px / 400 / 13.6px Pretendard-Medium
• Use: Expands the ecosystem explanation on home

Accordion title

• Padding: 15px
• Height: 46px
• Use: Ecosystem accordion row on home (role="button"); its visible label is the See more toggle inside it

Header navigation link

• Text: #ffffff
• Padding: 4px 7px
• Height: 32px
• Font: 14px / 500 / 24px Roboto (system), letter-spacing -0.45px
• Selected: the current page's item computes #000000 (Blog on /blog/)
• Use: Blog, Telegram, Twitter, Github in the header

Inputs

Text field

• Background: #ffffff
• Text: #393939
• Radius: 3px
• Padding: 8px 16px
• Height: 40px
• Font: 15px / 400 / 21px Lato_Regular
• Use: Email field of the contact form

Select field

• Background: #ffffff
• Text: #393939
• Radius: 3px
• Padding: 5px 20px 5px 14px
• Height: 40px
• Font: 16px / 400 / 24px Lato_Regular
• Use: Category select (Token swap, Wallet / Explorer, Node Operations, Collaboration (dApp), Technical)

Textarea

• Background: #ffffff
• Text: #393939
• Radius: 3px
• Padding: 5px 14px
• Height: 94px
• Font: 15px / 400 / 21px Lato_Regular
• Use: Message field of the contact form

Cards

Blog post card

• Size: 437px x 426px
• Use: Nine-card grid on /blog/, a 306px-high thumbnail link above a white Montserrat 18px / 300 title

---

Verified: 2026-10-01 (logged-out capture of three public medibloc.com pages through the owner's browser; deterministic bundle; no state frames) Tier 1 sources: https://medibloc.com/ , https://medibloc.com/blog/ , https://medibloc.com/2023/08/01/new_roadmap_for_expanding_the_data_pool/ Tier 2 sources: not attempted Conflicts unresolved: none

5. Layout Principles

Spacing

• Measured paddings: 50px on each side of the outlined buttons, 12px / 24px on the text button, 4px / 7px on navigation links, 8px / 16px on text fields, 15px on the accordion title.
• The bundle's spacing histogram is led by 4, 7 and 16px.

Grid and container

• Home content columns are 1120px wide for the hero and 940px for section headings; section leads sit in 645–660px columns.
• Pairs of guides stand side by side in 470px columns (Stake MED, Earn MED beside Stake MED LP, Earn OSMO).
• /blog/ is a three-column grid of 437px cards in rows 461px apart.
• The 2023 post is a 730px reading column.

Border radius

• 0px almost everywhere (223 of 244 recorded radii).
• 3px on the text button, the send button and the form fields.
• 4px on the outlined calls-to-action.

6. Depth & Elevation

The reCAPTCHA badge's rgb(128, 128, 128) 0px 0px 5px 0px is a third-party widget and not part of the system. Depth on home otherwise comes from dark section bands, whose colours the capture did not record.

7. Do's and Don'ts

Do

• Use #0066ff as a 2px outline and label for primary actions, with a transparent fill
• Give outlined buttons 62px height, 50px side padding, a 4px radius and the soft rgba(0, 0, 0, 0.07) drop shadow
• Set headings in the Pretendard-Bold cut and button labels in Pretendard-SemiBold with 1px tracking
• Use white text on dark section bands, and #333333 as default ink on light ones
• Keep magenta #cc3366 for plain links such as footer lists

Don't

• Fill primary buttons with blue; no captured action on medibloc.com is filled
• Promote the system font stack to a brand typeface
• Treat #ebf1ff or #69727d as rendered colours; both compute invisible on the captured surfaces
• Use Montserrat for home headings; it belongs to blog cards and post titles
• Invent a dark-section colour for home; only the post page's #000000 was measured

8. Responsive Behavior

Only a 1440px-wide desktop view was captured. No breakpoint, collapse or touch-target behaviour was measured, and none is declared. The outlined buttons are 62px tall and the form controls 40px at that width.

9. Agent Prompt Guide

Quick colour reference

• Primary action: #0066ff
• White: #ffffff
• Ink: #333333
• Field text: #393939
• Muted: #848484
• Black: #000000
• Link magenta: #cc3366

Example component prompts

• "Outlined action: transparent fill, 2px solid #0066ff border, #0066ff label in Pretendard-SemiBold 15px with 1px tracking, 62px tall, 0px 50px padding, 4px radius, shadow rgba(0, 0, 0, 0.07) 0px 10px 20px 0px."
• "Hero on a dark band: white Pretendard-Bold 60px / 84px headline, white Pretendard-Medium 16px / 27.2px paragraphs beneath."
• "Contact form: white fields with #393939 Lato 15px text, 3px radius, 8px 16px padding, 40px tall; a 40px Send button with white Pretendard-Medium 16px label."

Iteration guide

1. Blue is an outline, never a fill.
2. Weight comes from the Pretendard cut, not from font-weight.
3. Dark bands carry white type; light areas use #333333.
4. Radii are 0, 3 or 4px; nothing is rounded further.
5. One shadow, only on the outlined buttons.

10. Voice & Tone

MediBloc writes as a protocol team addressing its community: declarative, rights-framed and practical. The home opens with "Own your health data. It's rightfully yours." and then explains the mechanism plainly ("Health data is NOT recorded directly on the blockchain because it is sensitive and personal"). Labels are instructions for token holders: "Circulating Supply", "Validator Guide", "Delegator Guide", "Apply for Token swap". Blog titles are dated status reports, such as "Panacea Mainnet Upgrade (v2.3.0) Successfully Completed!" and "11th Token Swap Completed". The 2023 post opens "Hello, this is MediBloc Ltd., which builds and operates blockchain technology optimized for medical data."

Voice samples (verbatim, medibloc.com, 2026-10-01):

• "Own your health data. It's rightfully yours." (home hero)
• "Contribute to Panacea block generation and receive MED bonus in real time." (home, Stake and Earn)
• "*Both Upbit and Korbit are available only in South Korea." (home, Trade & Track)

11. Brand Narrative

MediBloc's founding idea, as the home states it, is data sovereignty: in "a decentralized, tamper-proof blockchain-based data ecosystem, we can finally have sovereignty over our own data". Panacea is described as "A Decentralized Blockchain Network for Health Data Sovereignty and Interoperability, made by MediBloc". Medical institutions record data into EHRs and hand it over at a patient's request; patients collect it in PHRs; Panacea's DIDs authenticate the exchange; and MED pays the participants.

Two applications carry that model to people. The home lists them under "3rd party services": Dr.palette (EHR), "a EHR software for medical institutions", and Medipass (PHR), "a PHR solution that allows patients to manage the personal health data that medical institutions have recorded". Both entries link to dr.pltt.cloud. The 2023 roadmap post credits the two with "over 700,000 users" and sets out the plan: open validator participation and IBC in 2021, professional and corporate validators in 2022, third-party services on Panacea in 2023, and deeper EHR integration from 2024. The home's news list shows that plan running: new validators (Handok, Daewoong Pharm, Informal Systems), token swaps held each 1 June and 1 December (KST), and quarterly ecosystem reports into the third quarter of 2026.

The operator named in the footer is MediBloc Limited, at Suite 23, Portland House, Glacis Road, Gibraltar. The project trades on Korean exchanges (the home notes "Both Upbit and Korbit are available only in South Korea"), and two of the validators it announces, Handok and Daewoong Pharm, are Korean pharmaceutical companies. This reference keeps the KR country classification under the owner's operating-base rule.

12. Principles

1. The patient owns the record. The hero promise ("rightfully yours") frames every page; the UI implication is that actions address the holder directly.
2. Say what is not on chain. The site states plainly that health data stays at the user's endpoint; copy should explain limits as clearly as features.
3. One action colour, drawn as a line. #0066ff marks every action as an outline, which keeps a dark page calm.
4. Report on schedule. Swaps, upgrades and ecosystem updates are dated posts; status communication is regular and factual.

13. Personas

Fictional archetypes drawn from the audiences the site addresses (MED holders, validators, clinic and patient app users). They are not real people.

정민호, 38, 서울. Runs a validator node and reads the Validator Guide and each mainnet upgrade notice. Wants exact versions and dates.

Lee Ji-won, 45, 경기. Has held MEDX since before the mainnet swap and checks the Token Swap section for the next 1 June or 1 December window.

박서연, 33, 부산. A clinic manager whose practice uses Dr.palette. Reaches medibloc.com from the "3rd party services" link to understand where the chart data goes.

14. States

No state frames were captured: the capture recorded rest values only, with interactionCount: 0, which does not mean the site has no states. The one state read from rest values is the header navigation's current item (#000000 on /blog/). Hover, pressed, focus, loading, error and success treatments are not declared.

15. Motion & Easing

No motion was measured. The outlined buttons carry Elementor's elementor-animation-float class, which names a hover lift, but no duration, easing or distance was recorded, so none is declared.