Design SystemNERO GROUPTypography & Color
Accessibility Standards
Global readability standards applied to all NERO GROUP pages. WCAG 2.1 AA compliance, 16px minimum body text, and contrast ratios above 4.5:1.
16px
Minimum standard
22/29
Pass WCAG AA
17
Enhanced contrast
17
Tokens defined
All heading sizes use font-weight 600+ for strong visual hierarchy. Body text starts at 16px with 1.6 line-height for optimal readability.
var(--text-h1)
Weight var(--weight-heading) · Line var(--leading-h1)
Hero section only. Maximum visual impact. 36px–56px.
Global Healthcare Business Platform
var(--text-h2)
Weight var(--weight-heading) · Line var(--leading-h2)
Section headings. Strong hierarchy. 28px–40px.
Medical Tourism Operations
var(--text-h3)
Weight var(--weight-subheading) · Line var(--leading-h3)
Card titles, sub-sections. 20px–24px.
Comprehensive Healthcare Strategy
var(--text-h4)
Weight var(--weight-subheading) · Line var(--leading-h4)
Small headings, card headers. 18px.
Global Partner Network
var(--text-h5)
Weight var(--weight-subheading) · Line var(--leading-h5)
List headings, form labels. 16px.
Service Details
var(--text-h6)
Weight var(--weight-subheading) · Line var(--leading-h5)
Small headings, compact labels. 15px.
Item Label
var(--text-body-xl)
Weight var(--weight-body) · Line var(--leading-body)
Hero descriptions, important lead text. 18px.
NERO GROUP integrates healthcare consulting, medical tourism operations, and K-beauty device distribution into a unified global healthcare business group.
var(--text-body-lg)
Weight var(--weight-body) · Line var(--leading-body)
Section descriptions, medium-length paragraphs. 17px.
Our structured approach ensures measurable outcomes across every market we enter.
var(--text-body)
Weight var(--weight-body) · Line var(--leading-body)
Default body text. 16px. WCAG minimum.
Standard body text for all content. This is the foundation of our readable, accessible typography system.
var(--text-body-sm)
Weight var(--weight-body) · Line var(--leading-body)
Captions, metadata. 14px. Use sparingly.
Supporting details, metadata, and supplementary information.
var(--text-caption)
Weight var(--weight-body) · Line var(--leading-caption)
Fine print, timestamps. 13px.
Additional notes and fine print text.
var(--text-eyebrow)
Weight var(--weight-eyebrow) · Line var(--leading-eyebrow)
Uppercase labels above section headings. 13px.
var(--text-nav)
Weight var(--weight-nav) · Line var(--leading-nav)
Main navigation items. 15px.
var(--text-button)
Weight var(--weight-button) · Line var(--leading-button)
CTA buttons. Uppercase with tracking. 16px.
var(--text-metric)
Weight var(--weight-metric) · Line var(--leading-metric)
Statistics, numbers, key metrics. 26px–32px.
var(--text-metric-label)
Weight var(--weight-metric-label) · Line var(--leading-caption)
Uppercase labels below metrics. 12px.
var(--text-tag)
Weight var(--weight-subheading) · Line var(--leading-caption)
Category tags, badges. 12px uppercase.
NERO GROUPDesign System — Typography & Color Standards (2026.05)
All values are WCAG 2.1 AA compliant and optimized for global readability.