Vitaforge · Vibrant · Light/Dark

Public

Healthcare • Custom • Dark Mode

biohacking, bio-red-blue, vitality-green, vibrant, light, dark, healthcare

Color Roles

Typography ValidationPRO Previews Usage Guide

Typography System

Poppins (heading) · Inter (body) · Apple HIG

Export as

Apple HIG

iOS / iPadOS— SF Pro

Dynamic Type with accessibility scaling. Default size: Large.

Custom Design System

iOS / iPadOS

System Font: SF Pro

Display

#ios---ipados-display

Large editorial headings for hero sections

Style	Size	Line Height	Weight	Tracking	Description
Large TitleEmphasized: Bold	34pt	41pt	Regular	0.40pt	Hero screen title

Live Preview

Large TitleThe quick brown fox

Title

#ios---ipados-title

Section and content headings

Style	Size	Line Height	Weight	Tracking	Description
Title 1Emphasized: Bold	28pt	34pt	Regular	0.38pt	Primary section heading
Title 2Emphasized: Bold	22pt	28pt	Regular	-0.26pt	Secondary section heading
Title 3Emphasized: Semibold	20pt	25pt	Regular	-0.45pt	Tertiary heading

Live Preview

Title 1The quick brown fox

Title 2The quick brown fox

Title 3The quick brown fox

Body

#ios---ipados-body

Reading and content text

Style	Size	Line Height	Weight	Tracking	Description
HeadlineEmphasized: Semibold	17pt	22pt	Semibold	-0.43pt	Bold label above content
BodyEmphasized: Semibold	17pt	22pt	Regular	-0.43pt	Default reading text
CalloutEmphasized: Semibold	16pt	21pt	Regular	-0.31pt	Secondary body text
SubheadEmphasized: Semibold	15pt	20pt	Regular	-0.23pt	Supporting info
FootnoteEmphasized: Semibold	13pt	18pt	Regular	-0.08pt	Legal or reference text
Caption 1Emphasized: Semibold	12pt	16pt	Regular	0pt	Image captions
Caption 2Emphasized: Semibold	11pt	13pt	Regular	0.06pt	Smallest label

Live Preview

HeadlineThe quick brown fox

BodyThe quick brown fox

CalloutThe quick brown fox

SubheadThe quick brown fox

Typography Philosophy

Design Principles

•Fluid Typography — Scales smoothly between viewport sizes using CSS clamp()
•Visual Hierarchy — Clear distinction between heading levels and body text
•Readability First — Optimized line heights for comfortable reading
•Consistent Rhythm — Spacing follows a mathematical scale

Accessibility Standards

•Minimum 16px — Base body text for optimal readability
•1.5× Line Height — Minimum for body text blocks
•4.5:1 Contrast — WCAG AA standard for normal text
•3:1 Contrast — Minimum for large text (18px+ bold)

Font Selection

#font-selection

Choose Google Fonts for headings and body text to preview with your brand colors.

Heading Font

Body Font

Text Hierarchy

#text-hierarchy

How text colors work together to create visual hierarchy.

Primary Text

The quick brown fox jumps over the lazy dog

Secondary Text

The quick brown fox jumps over the lazy dog. This is secondary text used for supporting information.

Disabled Text

The quick brown fox jumps over the lazy dog. This text appears disabled or inactive.

Heading Scale

#heading-scale

Fluid typography tokens for headings. Sizes interpolate between min (mobile) and max (desktop) using CSS clamp().

Maximum BoldThe quick brown fox

Heading 1The quick brown fox

Heading 2The quick brown fox

Heading 3The quick brown fox

Heading 4The quick brown fox

Token	Size (min→max)	Line Height	Weight	Usage
font-maximum-bold	28px → 40px	1.15	700	Page titles, section heroes
font-heading-1	20px → 28px	1.2	700	Primary page headings
font-heading-2	18px → 24px	1.25	700	Section headings
font-heading-3	16px → 22px	1.3	700	Subsection headings
font-heading-4	14px → 20px	1.35	700	Card titles, minor headings

Body Scale

#body-scale

Typography tokens for body text, captions, and UI labels. Optimized for readability.

LargeThe quick brown fox jumps over the lazy dog

Large BoldThe quick brown fox jumps over the lazy dog

MediumThe quick brown fox jumps over the lazy dog

Medium BoldThe quick brown fox jumps over the lazy dog

SmallThe quick brown fox jumps over the lazy dog

Small BoldThe quick brown fox jumps over the lazy dog

Token	Size (min→max)	Line Height	Weight	Usage
font-large	16px → 18px	1.6	500	Lead paragraphs, important body text
font-large-bold	16px → 18px	1.6	700	Emphasized lead text
font-medium	14px → 16px	1.6	500	Default body text
font-medium-bold	14px → 16px	1.6	700	Emphasized body text
font-small	12px → 14px	1.5	500	Secondary text, descriptions
font-small-bold	12px → 14px	1.5	700	Labels, emphasized small text
font-caption	12px	1.4	500	Image captions, timestamps
font-caption-bold	12px	1.4	700	Emphasized captions
font-minimum	10px	1.3	500	Legal text, fine print
font-minimum-bold	10px	1.3	700	Emphasized fine print

Font Weights

#font-weights

Standard font weights used throughout the design system.

Regular400

--font-weight-regular

Rarely used, fallback only

Medium500

--font-weight-medium

Default body text, descriptions

Semi-Bold600

--font-weight-semibold

Subheadings, emphasis

Bold700

--font-weight-bold

Headings, strong emphasis

Typography Spacing Rules

#spacing-rules

Vertical rhythm and spacing guidelines for consistent typography.

Element	Margin Top	Margin Bottom	Description
H1	2rem	1rem	Major section break
H2	1.75rem	0.875rem	Section heading
H3	1.5rem	0.75rem	Subsection heading
H4	1.25rem	0.625rem	Minor heading
Paragraph	0	1rem	Body text block
List	0.5rem	1rem	Bullet/numbered lists

Visual Rhythm Example

Section Heading (H1)

↕ margin-top: 2rem

Body paragraph with default spacing. Text should have comfortable breathing room.

↕ margin-bottom: 1rem

Subsection Heading (H2)

↕ margin-top: 1.75rem

Text on Surfaces

#text-surfaces

How text colors perform on different surface backgrounds.

Base Surface

Primary heading text

Secondary body text for descriptions and supporting content.

Disabled text example

Raised Surface

Primary heading text

Secondary body text for descriptions and supporting content.

Disabled text example

Brand Primary

Text on brand color

Supporting text on brand primary background.

Inverse Surface

Inverse text colors

Text designed for inverse/dark backgrounds.

Links & Interactive Text

#interactive-text

This is a paragraph with a primary link and a secondary link inline with the text.

You can also use info-colored links for navigation or reference links.

Contrast Ratios

#contrast-ratios

WCAG contrast ratios for text on surfaces.

Primary Text

#F2F2F2

Contrast: 16.01:1

Secondary Text

#ADADAE

Contrast: 8.00:1

Disabled Text

#6F6F71

Contrast: 3.58:1

Inverse Text

#121212

Contrast: 15.58:1