--- name: MediBloc colors: primary: '#0066ff' white: '#ffffff' ink: '#333333' field-text: '#393939' muted: '#848484' black: '#000000' link: '#cc3366' typography: display-hero: fontSize: 60px fontWeight: 400 lineHeight: 1.4 use: Home hero headline (Own your health data. It's rightfully yours.) in the Pretendard-Bold cut, 84px line, white section: fontSize: 41px fontWeight: 400 lineHeight: 1.5 use: Home section headings (Panacea, Ecosystem, Stake and Earn, Latest News) in Pretendard-Bold, 61.5px line, white section-sm: fontSize: 30px fontWeight: 400 lineHeight: 1.5 use: Paired guide headings (Stake MED, Earn MED; Stake MED LP, Earn OSMO) in Pretendard-Bold, 45px line post-title: fontSize: 45px fontWeight: 200 lineHeight: 1.2 use: 2023 post headline in Montserrat, 54px line, white on black post-heading: fontSize: 32px fontWeight: 500 lineHeight: 1.2 use: Section headings inside the 2023 post, system stack, 38.4px line lead: fontSize: 19px fontWeight: 400 lineHeight: 1.5 use: Section lead paragraphs on home in Pretendard-Regular, 28.5px line card-title: fontSize: 18px fontWeight: 300 lineHeight: 1.5 use: Blog card titles on /blog/ in Montserrat, 27px line, white hero-body: fontSize: 16px fontWeight: 400 lineHeight: 1.7 use: Hero paragraphs on home in Pretendard-Medium, 27.2px line, white body: fontSize: 16px fontWeight: 400 lineHeight: 1.5 use: Page default and post paragraphs, system stack, 24px line footer-link: fontSize: 16px fontWeight: 400 lineHeight: 1.5 use: 'Footer link lists in Pretendard-Regular, 24px line, #cc3366' button: fontSize: 15px fontWeight: 400 lineHeight: 2.8 letterSpacing: 1px use: Outlined call-to-action labels in Pretendard-SemiBold, 42px line, 1px tracking footer-heading: fontSize: 15px fontWeight: 400 lineHeight: 1.5 use: Footer column headings (Network, Resources, Communities) in Pretendard-Medium, 22.5px line caption: fontSize: 14px fontWeight: 400 lineHeight: 1.5 use: 'Grey footnotes on home in Pretendard-Regular, 21px line, #848484' nav: fontSize: 14px fontWeight: 500 lineHeight: 1.71 letterSpacing: '-0.45px' use: Header links (Blog, Telegram, Twitter, Github); the stack starts at Roboto and no Roboto webfont is loaded rounded: field: 3px button: 4px spacing: button-x: 50 text-button-y: 12 text-button-x: 24 nav-y: 4 nav-x: 7 field-y: 8 field-x: 16 components: outline-button: type: button backgroundColor: transparent (rgba(3, 1, 27, 0)) textColor: '#0066ff' border: '2px solid #0066ff' rounded: 4px padding: 0px 50px height: 62px typography: 15px / 400 / 42px Pretendard-SemiBold, letter-spacing 1px shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px 0px states: rest only; no state frame was captured and the fixed probe was not run (browser use was barred for this capture), so no hover, pressed or focus value is declared use: Outlined calls-to-action on home (Circulating Supply, Validator Guide, Delegator Guide, A to Z guide; Apply for Token swap at 14px Pretendard-Medium) at home::[data-omd-capture="8"], 222-283 x 62 text-button: type: button backgroundColor: transparent (rgba(235, 241, 255, 0)) textColor: '#0066ff' rounded: 3px padding: 12px 24px height: 39px typography: 15px / 500 / 15px Pretendard-Medium states: rest only; no state frame use: See more company news under Latest News on home, 240 x 39 send-button: type: button textColor: '#ffffff' rounded: 3px padding: 0px 16px height: 40px typography: 16px / 500 / 16px Pretendard-Medium states: rest only; no state frame use: Send at the foot of the contact form on all three pages, 282 x 40; the button and its recorded wrapper compute transparent, so no fill is declared see-more-toggle: type: toggle textColor: '#0066ff' typography: 17px / 400 / 13.6px Pretendard-Medium states: rest only; no state frame use: See more toggle in the Ecosystem section on home, 73 x 21 accordion-title: type: tab padding: 15px height: 46px states: rest only; no state frame use: Ecosystem accordion row on home (role=button), 676 x 46; its visible label is the blue See more toggle inside it, so the row computes only inherited text values and no label colour or font is declared nav-link: type: tab textColor: '#ffffff' padding: 4px 7px height: 32px typography: 14px / 500 / 24px Roboto (system), letter-spacing -0.45px selected: 'fg #000000 on the current page item (Blog on /blog/)' states: selected variant read from rest values; no pointer frame use: Header links Blog, Telegram, Twitter, Github on all three pages text-field: type: input backgroundColor: '#ffffff' textColor: '#393939' rounded: 3px padding: 8px 16px height: 40px typography: 15px / 400 / 21px Lato_Regular states: rest only; the declared border colour has 0px width use: Email field of the contact form, 137 x 40 select-field: type: input backgroundColor: '#ffffff' textColor: '#393939' rounded: 3px padding: 5px 20px 5px 14px height: 40px typography: 16px / 400 / 24px Lato_Regular states: rest only use: Category select of the contact form, 282 x 40 textarea-field: type: input backgroundColor: '#ffffff' textColor: '#393939' rounded: 3px padding: 5px 14px height: 94px typography: 15px / 400 / 21px Lato_Regular states: rest only use: Message field of the contact form, 282 x 94 post-card: type: card size: 437px x 426px use: 'Blog post card on /blog/ (nine instances): 306px thumbnail link above a white Montserrat 18px / 300 title' fonts: roles: display: Pretendard editorial: Montserrat form: Lato --- # Design System Inspiration of MediBloc ## Overview ### 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 ### 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. ### 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. ### 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. ## Colors ### 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. ## Typography ### 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 | Role | Font | Size | Weight | Line height | Notes | |---|---|---|---|---|---| | Display hero | Pretendard-Bold | 60px | 400 (Bold cut) | 84px | "Own your health data. It's rightfully yours.", white | | Section | Pretendard-Bold | 41px | 400 (Bold cut) | 61.5px | Panacea, Ecosystem, Stake and Earn, Latest News | | Section small | Pretendard-Bold | 30px | 400 (Bold cut) | 45px | "Stake MED, Earn MED", "Stake MED LP, Earn OSMO" | | Post title | Montserrat | 45px | 200 | 54px | 2023 post headline, white on black | | Post heading | system stack | 32px | 500 | 38.4px | Post section headings | | Lead | Pretendard-Regular | 19px | 400 | 28.5px | Section lead paragraphs | | Card title | Montserrat | 18px | 300 | 27px | Blog card titles on /blog/ | | Hero body | Pretendard-Medium | 16px | 400 | 27.2px | Hero paragraphs | | Body | system stack | 16px | 400 | 24px | Page default, post paragraphs | | Footer link | Pretendard-Regular | 16px | 400 | 24px | Footer link lists, magenta | | Button | Pretendard-SemiBold | 15px | 400 (SemiBold cut) | 42px | Outlined call-to-action labels, 1px tracking | | Footer heading | Pretendard-Medium | 15px | 400 | 22.5px | Network, Resources, Communities | | Caption | Pretendard-Regular | 14px | 400 | 21px | Grey footnotes in `#848484` | | Navigation | Roboto (system) | 14px | 500 | 24px | Header links, -0.45px tracking | ### 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. ## Layout ### 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. ### 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. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat | No shadow | Headings, text, cards, fields | | Raised | `rgba(0, 0, 0, 0.07) 0px 10px 20px 0px` | Outlined calls-to-action | 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. ### Values kept in prose Measured values the DESIGN.md token grammar cannot carry, kept verbatim: - `shadow.button`: `rgba(0, 0, 0, 0.07) 0px 10px 20px 0px` ## 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. ## Components ### 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 ### 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. ## 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 ## 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." | Context | Tone | |---|---| | Hero | Rights-framed, declarative: "Own your health data. It's rightfully yours." | | Technology | Explanatory, with plain caveats about what is and is not on chain | | Calls-to-action | Short task labels for holders and validators | | Blog | Dated network and swap reports | | Notices | Precise eligibility rules (wallet prefixes, swap dates in KST) | **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) ## 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.