Design System Inspiration of Humanscape

1. Visual Theme & Atmosphere

Humanscape (휴먼스케이프) is a Korean healthcare-data company. Its domain now serves another name: humanscape.io answers with a permanent redirect (HTTP 301) to lifex.io, and the pages there speak as LifeX. LifeX calls itself "데이터 기반 헬스케어 인텔리전스" and describes a life-journey data company across pregnancy, birth and childcare, illness and treatment, and everyday health. The footer names the operator as 라이프엑스(주), business registration 636-81-00389, CEO 장민후, with its headquarters in 강남구, Seoul. The Hanoi office still uses a humanscape.vn address. No page opened this session says that Humanscape was renamed, so this record states only these links and does not claim a rename. The pages below are what the Humanscape domain delivers today.

The site is quiet and editorial. White body, near-black ink (#1a1b1e for headings, #191a1f for running text) and a cool grey fill (#f4f6f9) carry almost everything. Page titles are enormous: a 112px, 600-weight headline filled with a violet-to-azure gradient (#7b61ff → #00adf7). Section headlines stay at a calm 500 weight, from 52px to 90px. Every recorded element computes box-shadow: none. Rows are separated by #d8dde4 hairlines, and corners run from 8px chips to 24px and 32px image cards.

Colour appears only where something is active or answers the pointer. Azure #00adf7 colours the word in view in the /about-us scroll list while the others stay #d2d4d9. The footer's 사이트 바로가기 turns #00a8f6 on hover. Violet #7b61ff numbers the accordion steps. There is no filled call-to-action: section links are 18px text with a 1px #28292d underline.

Key Characteristics:

• Pretendard only, from a 12px footer line to a 112px page title
• Medium display weights (500–600); size, not boldness, makes the hierarchy
• Azure #00adf7 for the active item, #00a8f6 for hover; violet #7b61ff for index labels
• Near-black ink #1a1b1e / #191a1f, greys #28292d → #3c3d42 → #5d5d60 → #8c8f96
• Flat: no shadows; #f4f6f9 fills and #d8dde4 hairlines
• Underlined text links instead of filled buttons

Primary tasks

• Understand what the company does across the life journey
• Read the vision, roadmap, core values and leadership
• Find investor relations, news and careers
• Jump to the company's related sites from the footer

2. Color Palette & Roles

Primary

• Azure (#00adf7): the primary colour. It is the active item in the /about-us scroll-highlight list: the element computes exactly rgb(0, 173, 247) while its siblings compute #d2d4d9. It is also the end stop of the page-title gradient. On a surface with no filled button, it is the colour that marks what is selected, so it is the primary.
• Azure Hover (#00a8f6): the hover and pressed label colour of 사이트 바로가기, read by the probe after the 0.15s transition. The page source uses the same value for the footer links' hover.

Accent

• Violet (#7b61ff): numbered index labels above the home accordion and the /our-business steps; the start stop of the title gradient.

Neutral & Surface

• White (#ffffff): page background and the hero headline over the film.
• Surface (#f4f6f9): 사이트 바로가기, its menu, and the active language pill.
• Hairline (#d8dde4): accordion row dividers.
• Inactive (#d2d4d9): the words not in view in the scroll list.

Text

• Ink (#1a1b1e): headlines and header links.
• Ink Body (#191a1f): running text in cards and accordion rows.
• Charcoal (#28292d): underlined text links, leadership names, footer column heads.
• Slate (#3c3d42): footer links and the site menu.
• Muted (#5d5d60): footer office headings and addresses.
• Faint (#8c8f96): footer copyright and small captions.

Brand assets, not tokens

The gradient linear-gradient(90deg, #7B61FF 0%, #00ADF7 50%) is clipped to the page-title text on /about-us and /our-business. The page source also has bg-[#00ADF7] fills (12 class uses) that the collector did not record as a component, so no token is built from them.

3. Typography Rules

Font Family

• Pretendard: live surface use. PretendardVariable WOFF2 loads from lifex.io/_next/static/media/, and the family computes on all 469 recorded elements. Pretendard is distributed under the SIL Open Font License 1.1 (Kil Hyung-jin).
• pretendard Fallback: declared only, 0 uses.
• No page opened this session names the typeface, so official product use is not claimed.

Hierarchy

Principles

• One family; scale does the work, and weight never goes above 600.
• Only the page title has negative tracking (-3.36px at 112px).
• Sizes are the desktop values at 1440px; the class names carry smaller mobile sizes that were not captured.

4. Component Stylings

Buttons

사이트 바로가기 (footer)

• Background #f4f6f9, label #3c3d42, radius 8px, padding 0 16px, height 44px, 14px / 500 / 22px
• Hover and pressed: label #00a8f6. Focus: only the browser's default ring. The transition is 0.15s cubic-bezier(0.4, 0, 0.2, 1).

Text link

• Label #28292d with a 1px #28292d bottom border, 18px / 400 / 28px, 29px tall

Navigation

Header links

• #1a1b1e, 16px / 400 / 24px, padding 8px 14px, radius 8px, 40px tall. On the home hero the links are white at 90% opacity.

Language toggle

• Active KR: #f4f6f9 pill, #28292d, 14px / 600, 46 × 38, fully rounded. Inactive EN: transparent, #b0b3ba, 14px / 400.

Site menu

• #f4f6f9, #3c3d42 14px / 500 items, radius 8px, padding 16px, 282 × 218

Lists & Cards

Accordion item

• #191a1f text, 1px #d8dde4 bottom border, 40px vertical padding; collapsed items carry disabled

Scroll-highlight list

• 72px / 500; the item in view is #00adf7, the rest #d2d4d9

Business card

• 24px radius, 758 × 495, photographic fill

Feature panel

• 32px radius, 614 × 286, stacked image panels

Verified: 2026-09-30 (deterministic collector capture of three public, logged-out pages served for humanscape.io at lifex.io, plus a fixed keyboard-probe state read and first-party company context) Tier 1 sources: https://humanscape.io/ ; https://lifex.io/ ; https://lifex.io/about-us ; https://lifex.io/our-business Tier 2 sources: not attempted this session Conflicts unresolved: none

---

5. Layout Principles

Spacing System

Measured values only: header link padding 8px / 14px, menu padding 16px, accordion rows 40px vertical, footer button 16px sides. There is no evidence of a named scale.

Grid & Container

Headings and footers run to a 1200px content width inside the 1440px viewport. Footer columns are 282px wide.

Whitespace Philosophy

Generous: very large headlines with open space around them, and rows divided by hairlines rather than boxes.

Border Radius Scale

0 (rows, headings) · 8px (header links, 사이트 바로가기, menu) · 24px (business cards) · 32px (feature panels) · fully rounded (language pill).

6. Depth & Elevation

All 469 recorded elements compute box-shadow: none. Separation comes from #f4f6f9 fills, #d8dde4 hairlines and photography.

7. Do's and Don'ts

Do

• Keep azure for the active item and the hover answer; keep violet for index numbers.
• Use Pretendard at 500–600 and let size carry emphasis.
• Link with underlined text instead of filled buttons.
• Separate with #d8dde4 hairlines and #f4f6f9 fills.

Don't

• Don't add shadows.
• Don't use heavy 700–800 weights for display type.
• Don't spread azure over body copy or large fills.
• Don't present Humanscape and LifeX as a documented rename; the site does not say so.

8. Responsive Behavior

Breakpoints

Only the 1440 × 900 desktop layout was captured. The Tailwind lg: classes show smaller mobile sizes (for example 32px / 44px for the hero), but no other viewport was measured.

Touch Targets

Measured heights: 사이트 바로가기 44px, header links 40px, language pills 38px.

Collapsing Strategy

Not captured.

Image Behavior

Business cards and feature panels are photographic fills inside 24px and 32px corners; scaling was not measured.

9. Agent Prompt Guide

Quick Color Reference

• Primary / active: #00adf7; hover #00a8f6
• Index accent: #7b61ff
• Ink: #1a1b1e, #191a1f; greys #28292d, #3c3d42, #5d5d60, #8c8f96
• Surface #f4f6f9; hairline #d8dde4; inactive #d2d4d9

Example Component Prompts

• "A 112px Pretendard 600 page title with -3.36px tracking, filled with a 90° gradient from #7b61ff to #00adf7 clipped to the text, on white."
• "A vertical list of 72px / 500 words; the one in view is #00adf7, the rest #d2d4d9."
• "A 44px footer button, #f4f6f9 fill, 8px radius, #3c3d42 14px / 500 label that turns #00a8f6 on hover over 0.15s."

Iteration Guide

1. Start with white, #1a1b1e headlines at 500 and a lot of space.
2. Add azure only to what is active.
3. Use underlined text links, not buttons.
4. Divide with hairlines; never add shadows.

10. Voice & Tone

The copy is calm, bilingual and mission-led. English headlines lead ("eXploring human Life through data-driven intelligence", "Intelligence Across the Life Journey"), followed by plain Korean explanations ("데이터 기반 지능으로 인간의 삶을 탐구합니다"). Claims come with numbers: 1,800+ healthcare partners, 2.5M+ global users, 230M+ data points. Core values reuse the capital X: eXplores, eXecutes, eXceeds.

11. Brand Narrative

LifeX says its vision is "a future where data-driven intelligence shapes every stage of life". Its mission is "eXploring human Life through data-driven intelligence": connecting fragmented health and life data and turning the patterns into better care, diagnosis, treatment, finance and commerce. The roadmap says LifeX has spent ten years answering questions that recur across the life cycle, first where information demand is highest (pregnancy, birth, childcare), connecting users with healthcare providers. It now counts more than 2.5 million users, more than 1,800 healthcare institutions and service hubs in four countries (Korea, the United States, Vietnam, Indonesia). /our-business lists AI growth monitoring from ultrasound, early detection, developmental care, and personalised financial services, shopping and education. The leadership page lists 장민후 as founder and CEO, and the footer lists 라이프엑스(주). The pages link this company to the Humanscape domain through the redirect and the humanscape.vn address, but they do not tell the story of a rename.

12. Principles

1. Life first, data as the instrument. Lead with the person and the outcome. The numbers support the story.
2. Specific numbers over adjectives. Write "1,800+", "2.5M+" and "230M+", not vague scale words.
3. One signal colour. Azure means active; everything else is ink and grey.
4. Flat and editorial. Hairlines and space, not elevation.

Principles are editorial readings of the captured site and its stated mission.

13. Personas

Fictional archetypes, not real people.

김서연, 34, 서울. An expectant parent who wants her ultrasound results and her child's development explained plainly. She values a calm source over alarmist forums.

박준호, 41, 판교. A healthcare investor reading the investor-relations and roadmap pages. He trusts the concrete figures and the restrained presentation.

Dr. Arun Patel, 45, Jakarta. A clinic-network partner evaluating a data collaboration, who reads the healthcare-network numbers as evidence of real infrastructure.

14. States

Header links and text links have bundle frames only mid-transition, so their settled states are unmeasured, not absent. Error, loading, empty and success states were not captured and are not described.

15. Motion & Easing

The probe read one transition: 사이트 바로가기 transitions colour, background, border, outline, text decoration, fill, stroke and gradient stops over 0.15s with cubic-bezier(0.4, 0, 0.2, 1). The page source puts duration-500 ease-out on the scroll-list words and duration-200 on the partner-name hover, but those were not measured as computed values. Nothing else about motion (hero film, carousels, counters) was measured; treat it as unspecified and honour prefers-reduced-motion.