Typography
Our type is precise yet friendly.
We've chosen Roboto for its perfect balance of geometric precision and approachable curves. This versatile typeface ensures clarity across all screen sizes while maintaining a distinctly modern character.
Experience Roboto
Data-driven insights flow through interactive visualizations, revealing patterns in life science innovation.
A precise, modern typeface for analytics and scientific data.
Our typography system is designed to create clear hierarchies, optimal readability, and beautiful layouts across all platforms.
Typography System
A comprehensive set of typography tokens for consistent design
heading-1
Size: 64px / 4rem
Weight: Light (300)
Letter Spacing: -0.5%
Line Height: 120% (1.2)
Analytics Platform
Main page headings, hero sections
heading-2
Size: 48px / 3rem
Weight: Regular (400)
Letter Spacing: 0
Line Height: 120% (1.2)
Data Visualization
Section headings, important content blocks
heading-3
Size: 36px / 2.25rem
Weight: Regular (400)
Letter Spacing: 0.25%
Line Height: 120% (1.2)
Research Insights
Subsection headings, card titles
heading-4
Size: 28px / 1.75rem
Weight: Regular (400)
Letter Spacing: 0
Line Height: 120% (1.2)
Feature Overview
Dialog titles, smaller section headers
heading-5
Size: 24px / 1.5rem
Weight: Regular (400)
Letter Spacing: 0
Line Height: 120% (1.2)
Component Title
Widget headers, form section titles
subtitle-1
Size: 20px / 1.25rem
Weight: Regular (400)
Letter Spacing: 0.1%
Line Height: 120% (1.2)
Supporting information with emphasis
Introductory paragraphs, highlighted information
subtitle-2
Size: 16px / 1rem
Weight: Medium (500)
Letter Spacing: 0.1%
Line Height: 120% (1.2)
Medium emphasis text with slightly more weight
Button text, table headers, form labels
body-1
Size: 18px / 1.125rem
Weight: Regular (400)
Letter Spacing: 0.5%
Line Height: 150% (1.5)
Primary body text for articles and longer content sections where readability is important.
Main content, article text, descriptions
body-2
Size: 16px / 1rem
Weight: Regular (400)
Letter Spacing: 0.5%
Line Height: 150% (1.5)
Secondary body text used for most interface elements and general content areas.
Interface text, secondary content, list items
caption
Size: 14px / 0.875rem
Weight: Medium (500)
Letter Spacing: 0.4%
Line Height: 120% (1.2)
Auxiliary information, metadata, and supporting details.
Helper text, timestamps, footnotes, labels
Typography Guidelines
Color Combinations
Standard text and background pairings for different contexts
Primary text on light background
Standard, to be used in most situations
#181A1B
on#F0F2F4
Secondary information
When something is secondary, attention should be somewhere else
#56595D
on#F0F2F4
Enter your search term...
Placeholder, for input fields
#93999F
on#FFFFFF
Light text on dark surfaces
When a dark background is used
#F0F2F4
on#181A1B
Important information
If something needs to be emphasized
#0E66B5
on#F0F2F4
Success message
When something went as it should
#162307
on#EBFADB
Error message
When something went wrong
#3C0808
on#FFDFDF
Warning message
When something requires caution
#4E3C01
on#FFF6DB
Accessibility
Meeting WCAG 2.1 AA standards
Contrast Ratio
Maintain a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text
Essential for readability and WCAG compliance
Font Size
Minimum 16px for body text, with responsive scaling for different devices
Ensures readability across all platforms
Hierarchy
Clear visual organization
Weight Distribution
Use font weights purposefully: Light for headings, Regular for body, Medium for emphasis
Creates clear content structure
Spacing
Maintain consistent line height (1.2 for headings, 1.5 for body) and paragraph spacing (1.5em)
Improves content digestibility
Responsive Design
Fluid typography system
Scaling
Use rem units for typography to respect user preferences
Maintains proportions across devices
Line Length
Keep line length between 45-75 characters for optimal readability
Enhances reading experience