This page showcases all typography styles and colors available in the Geocodio design system.
Display Typography
The largest heading style, used for hero sections and major page titles.
Font: IBM Plex Serif
Size: 56px / 60px line height
Weight: 400 (Regular)
Letter Spacing: -1px
Heading 1 - Main Page Titles
Font: IBM Plex Serif • Size: 40px / 48px line height • Weight: 400 • Letter Spacing: -1px
Heading 2 - Major Sections
Font: IBM Plex Serif • Size: 30px / 38px line height • Weight: 400 • Letter Spacing: -1px
Heading 3 - Subsections
Font: IBM Plex Serif • Size: 22px / 30px line height • Weight: 400 • Letter Spacing: -0.5px
Heading 4 - Minor Sections
Font: IBM Plex Serif • Size: 18px / 24px line height • Weight: 400 • Letter Spacing: -0.5px
Heading 5 - Small Headings
Font: IBM Plex Serif • Size: 16px / 22px line height • Weight: 400 • Letter Spacing: -0.5px
Heading 6 - Smallest Headings
Font: IBM Plex Serif • Size: 14px / 20px line height • Weight: 400 • Letter Spacing: -0.5px
Body Text
This is regular paragraph text using Hanken Grotesk. The body text is designed for optimal readability with a medium weight (500) and generous line height. Bold text uses weight 600, and you can also have italic text for emphasis.
Font: Hanken Grotesk
Size: 16px / 24px line height
Weight: 500 (Medium)
Letter Spacing: 0.1px
Color: Black Gray (#373A40)
Links
This is a paragraph with an example link that demonstrates the default link styling. Links use the primary brand color (#503BA3) with an underline, and change to Geocodio red (#E62B28) on hover.
You can also have multiple links in the same paragraph to see how they work together.
Lists
Unordered Lists
First item in the list
Second item with more content
Third item demonstrating list styling
Nested item level 1
Another nested item
Ordered Lists
First numbered item
Second numbered item
Third numbered item
Nested numbered item
Another nested item
Color Palette
The following colors are available throughout the design system: