Design System Inspiration of Humanscape

1. Visual Theme & Atmosphere

Humanscape (휴먼스케이프) is the Korean healthcare-data company behind RareNote (레어노트), and its current corporate site — now presented under the LifeX brand at humanscape.io (which resolves to lifex.io) — reads like a scientific white paper turned into a product page. The canvas is pure white (#ffffff), the hero rests on a soft mint-grey wash (#dfe7e4), and text sits in a near-black ink (#191a1f) rather than pure black — the register is calm, editorial, and data-literate rather than clinical or salesy. The single saturated brand accent is a bright azure (#00adf7), reserved for the one word that matters in the hero headline ("the Life Journey") and for small data-point indicator dots, training the eye to read that cyan-blue as "the signal in the data."

The typographic personality is defined by scale rather than weight. Every headline runs in Pretendard — Korea's de-facto product sans — at genuinely oversized display sizes: 58px on the homepage hero, 64px on section headlines, and a full 112px on the "Our Business" page title, all at a restrained medium weight (500-600). This is the opposite of the heavy-800 Korean-fintech convention; the confidence comes from size and air, not boldness. Body, navigation, and interface text drop to a quiet 16px / weight 400, and a secondary violet accent (#7b61ff) marks the small numbered section labels ("1. Built on Healthcare Network", "2. Powered by Global User Base", "3. Scaled by Data Intelligence") and the "we're hiring" micro tag.

What distinguishes Humanscape from its healthcare peers is its total restraint with depth. Live inspection found box-shadow: none across the hero, nav, headings, cards, and list rows — this is a flat, shadow-free system. Separation comes from tinted surfaces (cool-grey #f4f6f9, mint #dfe7e4, and pale data-blue tints such as #c7e1ff) and thin #d8dde4 hairlines, never elevation. Geometry leans generously rounded: 8px nav chips, 24px feature cards, 32px data cards, and full-pill (9999px) language toggles and indicator dots. The result is a spacious, science-forward aesthetic — a data company that wants to feel trustworthy and human, not intimidating.

Key Characteristics:

• Pretendard as the single family, scaled from a 16px body up to a 112px display — hierarchy by size, not weight
• Medium display weight (500-600) — confident and airy, never the heavy-800 Korean convention
• One saturated azure accent (#00adf7) reserved for the hero highlight word and data-point dots
• Secondary violet (#7b61ff) only on numbered section labels and the hiring tag
• Near-black ink (#191a1f) and heading navy (#1a1b1e) instead of pure black for warmth and trust
• Flat, shadow-free depth: mint (#dfe7e4), cool-grey (#f4f6f9), and data-blue tint (#c7e1ff) surfaces + #d8dde4 hairlines do the separating
• Generous rounding — 24px / 32px cards, full-pill toggles and dots
• Text CTAs are minimalist underlined links (#28292d with a 1px bottom border), not filled buttons

2. Color Palette & Roles

Primary & Accent

• LifeX Azure (#00adf7): The primary brand accent. Coded verbatim as the Tailwind class text-[#00ADF7] on the hero highlight ("the Life Journey") and used as the fill for small full-round data-point indicator dots. The system's single "signal" color.
• Accent Violet (#7b61ff): Secondary accent for the numbered section index labels ("1. / 2. / 3.") and the small "we're hiring" tag. Never a background — always a small typographic marker.

Text / Ink Hierarchy

• Ink (#191a1f): Primary text and card copy color (the most frequent foreground on the page).
• Heading Navy (#1a1b1e): Display headlines and section titles — a hair softer than ink, still near-black.
• Body Black (#0a0a0a): The document default body color.
• Dark Slate (#28292d): Inline underlined CTA links, footer section heads, and the active-nav ink on white surfaces.
• Meta Grey (#3c3d42): Footer sub-navigation links and secondary metadata.
• Muted Grey (#5d5d60): Tertiary text, captions, and muted labels.
• Faint Grey (#b0b3ba): Disabled state, inactive language toggle, lowest-emphasis text.

Neutral & Surface

• Pure White (#ffffff): Page background, card surfaces, and text on the mint hero / azure accents.
• Cool-Grey Surface (#f4f6f9): Tinted surface for feature cards and the language-toggle pill background.
• Hero Mint (#dfe7e4): The soft mint-grey wash behind the full-height homepage hero.
• Data Blue Tint (#c7e1ff): Pale blue tinted surface for data-visualization and metric cards.
• Hairline (#d8dde4): Thin borders, dividers, and list-row rules — the primary separation device in a shadowless system.

3. Typography Rules

Font Family

• Sans (single family): Pretendard (with Pretendard Fallback, system-ui) — used for every text element, from the 112px page hero down to the 12px hiring tag. There is no separate display face; Pretendard carries both display and body roles.

Hierarchy

Principles

• Scale, not weight, is the hierarchy: display sizes climb to 112px while staying at weight 500-600. The system never reaches for 700-800 to command attention.
• One family, two jobs: Pretendard is both the display and the reading voice; the difference between a headline and a paragraph is size, not typeface.
• Airy display, dense body: headlines get vast surrounding whitespace; body text stays at a compact 16px / 1.5 for information-dense corporate content.
• Accent by color, not weight: the violet section labels and azure highlight word carry emphasis through hue, letting the surrounding type stay calm.

4. Component Stylings

Navigation & Toggle

Nav Link

• Text: #1a1b1e
• Radius: 8px
• Padding: 8px 14px
• Font: 16px Pretendard weight 400
• Active: #00adf7 text
• Use: Top navigation items (About Us, Our Business, Newsroom, Investor Relations, Career)

Language Toggle Pill

• Background: #f4f6f9
• Text: #28292d
• Radius: 9999px (full pill)
• Padding: 8px 14px
• Font: 14px Pretendard weight 600
• Use: KR/EN language switch (active language filled, inactive #b0b3ba text)

Buttons

Inline Underlined CTA

• Text: #28292d
• Border: 0 0 1px solid #28292d (bottom rule only)
• Font: 18px Pretendard weight 400
• Use: Primary text CTA ("eXplore Our Business", "eXplore About Us") — the site favors underlined links over filled buttons

Cards & Containers

Feature Card

• Background: #f4f6f9
• Text: #191a1f
• Radius: 24px
• Use: Feature / content card on the cool-grey surface (no shadow)

Data Card

• Background: #c7e1ff
• Text: #191a1f
• Radius: 32px
• Use: Data-visualization / metric card with a pale-blue tint

Badges & Indicators

Section Index Label

• Text: #7b61ff
• Font: 16px Pretendard weight 500
• Use: Violet numbered section labels ("1. Built on Healthcare Network")

Hiring Tag

• Text: #7b61ff
• Font: 12px Pretendard weight 600
• Use: "we're hiring" micro tag

Data Dot

• Background: #00adf7
• Radius: 9999px (full)
• Use: Small azure data-point indicator (14px) beside metrics and timeline markers

List Rows

Growth Layers Row

• Text: #191a1f
• Border: 0 0 1px solid #d8dde4 (bottom hairline)
• Padding: 40px 0
• Font: 16px Pretendard weight 400
• Use: Stacked "Growth Layers" list rows separated by hairline dividers

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://humanscape.io/ (redirects to https://lifex.io/ — live homepage inspect); https://lifex.io/our-business (second surface live inspect) Tier 2 sources: getdesign.md/humanscape — SPA shell, no brand data; styles.refero.design/?q=humanscape — no brand-specific match (generic browse grid) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 14px, 24px, 40px, 64px, 120px, 144px
• Notable: section vertical padding is large (120px top on band sections; 40px per list row), giving the corporate content a spacious, unhurried rhythm

Grid & Container

• Full-height (100dvh) hero anchored on the mint (#dfe7e4) wash with the 58px Pretendard headline centered
• Business-area cards laid out as a horizontal set of large rounded cards (24-32px radius)
• "Growth Layers" rendered as a stacked vertical list where each row is a 40px-padded band separated by a #d8dde4 hairline
• Partner/investor logos arranged in grouped grids under 24px H3 category heads
• Footer expands into a multi-column sitemap (About Us / Our Business / Newsroom / Investor Relations)

Whitespace Philosophy

• Air as authority: oversized headlines with generous surrounding space signal confidence without heavy weight.
• Flat segmentation: sections separate by background wash (mint #dfe7e4 vs white #ffffff vs cool-grey #f4f6f9) and hairlines, never by shadow.
• Data breathing room: metric cards on #c7e1ff tint get their own space so the numbers read as evidence, not decoration.

Border Radius Scale

• Small (8px): nav chips, inner elements
• Large (24px): feature cards — the workhorse
• Extra-large (32px): data / metric cards
• Full (9999px): language toggle pills, azure data dots

6. Depth & Elevation

Shadow Philosophy: Humanscape/LifeX is a fully shadowless system. Live inspection returned box-shadow: none on the hero, navigation, headings, cards, and list rows. Depth and grouping are communicated entirely through flat tinted washes (mint #dfe7e4, cool-grey #f4f6f9, data-blue #c7e1ff) and thin #d8dde4 hairlines. This is a deliberate modern-flat choice that keeps a data-heavy healthcare narrative feeling clean, editorial, and trustworthy rather than skeuomorphic. When emphasis is needed the system reaches for color (azure #00adf7) or scale (a 112px headline), never elevation.

7. Do's and Don'ts

Do

• Use Pretendard for everything and build hierarchy through size (16px body up to 112px display)
• Keep display weight at 500-600 — confident and airy, never heavy 700-800
• Reserve azure (#00adf7) for the single hero-highlight word and data-point dots
• Use violet (#7b61ff) only for numbered section labels and the hiring tag
• Use near-black ink (#191a1f) and heading navy (#1a1b1e) instead of pure black
• Separate sections with flat washes (#dfe7e4, #f4f6f9, #c7e1ff) and #d8dde4 hairlines — no shadows
• Prefer underlined text CTAs (#28292d with a 1px bottom rule) over filled buttons
• Use generous rounding — 24px feature cards, 32px data cards, full-pill toggles

Don't

• Set headlines in heavy weight — this system uses size, not boldness, for authority
• Spread azure across many elements — it dilutes the single-signal read
• Use violet as a fill or background — it is a small typographic accent only
• Add drop shadows for elevation — the system is flat and shadow-free
• Use pure black (#000000) for body or headings — reserve near-black ink #191a1f
• Introduce a third saturated hue — azure and violet are the only accents
• Use sharp/square corners on cards or toggles — geometry is generously rounded
• Cram headlines into tight columns — display type needs surrounding air

8. Responsive Behavior

Breakpoints

Touch Targets

• Nav links at 40px height with 8px 14px padding — comfortably tappable
• Language toggle as a full pill for an unmistakable target
• Growth-layer rows at 40px vertical padding give generous tap zones

Collapsing Strategy

• Hero: oversized Pretendard headline scales down on mobile, weight 500-600 maintained
• Business-area cards: horizontal set -> stacked single column
• Growth Layers list: hairline-separated rows maintain full-width, padding tightens
• Partner logo grids: multi-column -> 2-column -> single column
• Mint / white / cool-grey wash sections keep full-width treatment

Image Behavior

• Product screenshots and data visuals carry no shadow at any size, consistent with the flat system
• Cards maintain their 24px / 32px radius across breakpoints
• Azure data dots and tint surfaces persist as the visual signal on smaller screens

9. Agent Prompt Guide

Quick Color Reference

• Primary accent (highlight word, data dots): LifeX Azure (#00adf7)
• Secondary accent (section labels, hiring tag): Violet (#7b61ff)
• Primary text / card copy: Ink (#191a1f)
• Display headings: Heading Navy (#1a1b1e)
• Body default: Body Black (#0a0a0a)
• Inline CTA / footer heads: Dark Slate (#28292d)
• Footer sub-links: Meta Grey (#3c3d42)
• Muted text: Muted Grey (#5d5d60)
• Disabled / faint: Faint Grey (#b0b3ba)
• Background: Pure White (#ffffff)
• Cool-grey surface / toggle: (#f4f6f9)
• Hero wash: Hero Mint (#dfe7e4)
• Data-viz tint: Data Blue Tint (#c7e1ff)
• Hairline: (#d8dde4)

Example Component Prompts

• "Create a full-height hero on a mint (#dfe7e4) wash. Headline at 58px Pretendard weight 500, near-black #191a1f, with a single highlighted word in azure #00adf7. Below it an underlined text CTA: #28292d text, 18px, 1px bottom border, no fill."
• "Design a feature card: cool-grey #f4f6f9 background, 24px radius, no shadow. Title 24px Pretendard weight 500 #1a1b1e, body 16px weight 400 #191a1f."
• "Build a data/metric card: pale-blue #c7e1ff background, 32px radius, flat. Big number in Pretendard, an azure #00adf7 full-round dot as the data indicator."
• "Create the top nav: white header, 16px Pretendard links #1a1b1e with 8px radius and 8px 14px padding, azure #00adf7 on the active item. A full-pill KR/EN toggle on #f4f6f9, 14px weight 600."
• "Lay out a Growth Layers list: stacked rows, each 40px vertical padding, separated by a 1px #d8dde4 hairline. A violet #7b61ff numbered label ('1.', '2.', '3.') leads each row."

Iteration Guide

1. Pretendard for everything; build hierarchy by size, keep weight at 500-600 for display
2. Azure (#00adf7) is the single signal color — one highlight word and data dots only
3. Violet (#7b61ff) marks numbered labels and the hiring tag, never a fill
4. No shadows — separate with mint / cool-grey / blue-tint washes and #d8dde4 hairlines
5. Text color is #191a1f ink, headings #1a1b1e, never pure black
6. Rounding is generous: 24px feature cards, 32px data cards, full-pill toggles/dots
7. CTAs are underlined text links (#28292d), not filled buttons

---

10. Voice & Tone

Humanscape/LifeX's voice is clear, humane, and evidence-led — a healthcare-data company that speaks about serious subjects (rare disease, patient data, clinical outcomes) with calm confidence rather than either cold clinical jargon or startup hype. The brand's own hero framing — "eXploring human Life through data-driven Intelligence" and the closing "eXplore Life, Decide Better." — sets the register: it puts human life first and data second, treating data as a means to better decisions, not an end in itself. Copy addresses partners, patients, and investors as intelligent readers who deserve transparency about how the data works.

Voice samples (verbatim from live homepage, verified 2026-07-02):

• "eXploring human Life through data-driven Intelligence Across the Life Journey" — hero headline (human-first, data-second framing).
• "The Foundation for Scalable Innovation." — section headline (infrastructure register).
• "eXplore Life, Decide Better." — closing statement (data-for-decisions mission).

Forbidden register: fear-based medical urgency, undefined clinical jargon, hype superlatives ("revolutionary", "world-class"), and anything that treats patient data as a commodity rather than a trust.

11. Brand Narrative

Humanscape (휴먼스케이프) was founded in March 2016 by CEO Jang Min-hoo (장민후) as a digital-healthcare company built around a hard, human problem: patients with rare and intractable diseases had almost no accessible, trustworthy source of information about their own condition, drug-development status, or clinical trials. Its flagship service, RareNote (레어노트), turned that gap into a patient-first data platform — organizing information on over a thousand rare diseases for tens of thousands of patients and guardians — and the company also operated MamiTalk (마미톡), a pregnancy and childcare platform. In its early years Humanscape was known for exploring blockchain-based health-data sharing, framing patient data as something patients themselves should own and benefit from (시사저널e interview with CEO 장민후).

The company is now continuing its journey under the new brand LifeX, presented at humanscape.io (which resolves to lifex.io) as "data-driven healthcare intelligence across the life journey." The rebrand reframes the mission from a single rare-disease community into a broader life-journey intelligence platform spanning growth monitoring, developmental care, personalized financial and shopping services, and care navigation for serious illness. Per the live site, LifeX now describes itself as Built on Healthcare Network (1,800+), Powered by Global User Base (2.5M+), and Scaled by Data Intelligence (230M+) — with overseas expansion into the United States, Indonesia, and Vietnam through local subsidiaries (VentureSquare coverage).

What the design refuses, and what it embraces, tracks this narrative. It refuses the heavy, alarming chrome of legacy medical software (no dense shadowed panels, no institutional blue-and-white sterility) and the dark-pattern urgency of consumer health marketing. It embraces a flat, editorial, science-forward surface: oversized Pretendard headlines that speak plainly, a single azure signal color for the data that matters, and a humane near-black ink that keeps a data company feeling like it is, first, about human life.

12. Principles

1. Human life first, data second. The hero literally reads "eXploring human Life through data-driven Intelligence" — life is the subject, data the instrument. UI implication: lead with the person and the outcome; let numbers support the story rather than dominate it.
2. Data as a trust, not a commodity. The company's origin in patient-owned, rare-disease data means information is handled as something borrowed from people who are vulnerable. UI implication: present metrics transparently and specifically ("1,800+", "2.5M+"), never as vague marketing puffery.
3. Clarity over intimidation. Serious healthcare topics are surfaced in plain language and airy layouts. UI implication: generous whitespace, oversized-but-calm headlines, and descriptive labels ("Care Navigation for Serious Illness") instead of jargon.
4. One signal, one color. Azure (#00adf7) means "this is the data point that matters." UI implication: reserve the azure accent for the single highlight and for data-point dots so the signal is never ambiguous.
5. Flat and evidence-like. A shadowless, hairline-separated surface reads like a well-set scientific document. UI implication: separate with tint and rules, not elevation; keep the page feeling like credible evidence rather than a sales deck.

13. Personas

Personas below are fictional archetypes informed by publicly observable Humanscape/LifeX user and stakeholder segments (rare-disease patients and guardians, healthcare partners, and investors), not individual people.

김서연, 38, 서울. A parent of a child with a rare disease who first found Humanscape through RareNote. Distrusts fragmented, alarmist medical forums and values a single calm source that explains her child's condition, drug pipelines, and trials in plain Korean. Chose the platform because it treated her as a partner in the data, not a patient to be marketed to.

Dr. Arun Patel, 45, singapore-based partner. A clinical-network lead evaluating LifeX for a cross-border data collaboration. Reads the "Growth Layers" and scale metrics ("1,800+ Healthcare Network") as evidence of real infrastructure. Appreciates that the site reads like a scientific brief rather than a hype pitch, which signals the seriousness he needs from a data partner.

박준호, 41, 판교. A healthcare-focused VC reviewing LifeX's investor-relations page. Values the concrete, specific numbers and the calm, editorial presentation — it tells him the team respects evidence. Notices immediately that there is no shadow-stacked, over-designed chrome, and reads that restraint as maturity.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is quiet, editorial, and evidence-paced — consistent with the flat, science-forward aesthetic. Oversized hero headlines and data metrics fade/rise in from below at motion-standard / ease-enter; azure data dots may animate in as the underlying number resolves, reinforcing "the signal arriving in the data." No bounce, spring, or overshoot — a healthcare-data company signals steadiness and credibility, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the page remains fully functional.