This guide shows the default typography styles used throughout the theme.
Heading & Text
| Style | Size / Line Height | Tag/CSS Class | Display Example |
|---|---|---|---|
| H1 | 48 / Auto | <h1>, .h1 | The Quick Brown Fox |
| H1 Mobile | 40 / Auto | .h1-mobile | The Quick Brown Fox |
| H2 | 32 / Auto | <h2>, .h2 | The Quick Brown Fox |
| H2 Mobile | 28 / Auto | .h2-mobile | Jumps Over the Lazy Dog |
| H3 | 24 / Auto | <h3>,.h3 | Lorem Ipsum Dolor |
| H3 Mobile | 22 / Auto | .h3-mobile | Lorem Ipsum Dolor |
| Body L | 22 / Auto | .fs-l | Lorem ipsum dolor sit amet. |
| Body L Medium (Bold) | 22 / Auto | .fs-l-medium | Lorem ipsum dolor sit amet. |
| Body | 20 / Auto | .fs-default | Standard paragraph text example. |
| Body Medium (Bold) | 20 / Auto | .fs-default-medium | Standard paragraph text example. |
| Lead | 28 / Auto | .lead | Intro text or tagline sample |
| Lead Mobile | 24 / Auto | .lead-mobile | Intro text or tagline sample |
| Text Tiny | 14 / Auto | .text-tiny | Sample of Text Tiny |
| Text Small | 16 / Auto | .small, .text-small | Sample of Text Small |
| Text Default | 20 / Auto | Sample of Text Default | |
| Text Big | 22 / Auto | .text-big | Sample of Text Big |
| Text Huge | 25 / Auto | .text-huge | Sample of Text Huge |
| Text Super Small - 14px | 14 / Auto | .text-14 | Super Small text sample |
| Text - Font weight - Medium 500 | 500 | .text-medium | Super Small text sample |
Color
| Color Name | Hex | CSS Variable / Class | Display Example |
|---|---|---|---|
| Hoshizaki Cyan | #00AEEF | --color-cyan / .text-cyan | Hoshizaki Cyan |
| Black | #000000 | --color-black / .text-black | Black |
| White | #FFFFFF | --color-white / .text-white | White |
| Gray Light | #f8f8f8 | --color-gray-light / .text-gray-light | Gray Light |
| Gray Mid | #b8b8b8 | --color-gray-mid / .text-gray-mid | Gray Mid |
Paragraph
This is a standard paragraph. It provides consistent spacing and readability. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet facilisis urna.
Blockquote
"Design is not just what it looks like and feels like. Design is how it works." – Steve Jobs
Lists
Unordered List
- First item
- Second item
- Third item
Ordered List
- First step
- Second step
- Third step
Blue List:
First item
Second item
Third item
Links
This is a standard link inside a paragraph. button
Horizontal Rule
Image
Utilities
This text is muted.
This text is centered.