Typography

Establishes type styles and tokens for clear, consistent text across the product.

Heading

A heading titles and structures sections of content. It establishes hierarchy and helps users understand the organization of the interface at a glance.
Headings guide scanning and improve readability by clearly separating and labeling content sections.


                                                        
                                                        
                                                            <h1 class="c-heading--4xl">This is a 4xl heading</h1>
                                                        <h1 class="c-heading--3xl">This is a 3xl heading</h1>
                                                        <h1 class="c-heading--2xl">This is a 2xl heading</h1>
                                                        <h1 class="c-heading--xl">This is a xl heading</h1>
                                                        <h1 class="c-heading--lg">This is a lg heading</h1>
                                                        <h1 class="c-heading">This is a heading</h1>
                                                        <h1 class="c-heading--caps">This is a caps heading</h1>

Elements	Class name
Default	.c-heading
Large	.c-heading--lg
Extra Large	.c-heading--xl
2X Large	.c-heading--2xl
3X Large	.c-heading--3xl
4X Large	.c-heading--4xl
Caps	.c-heading--caps

Article

An article applies consistent typography to long-form content. It is used to render structured text such as documentation, guides, or editorial content.
Articles provide a readable foundation for rich content by handling spacing, hierarchy, and text styling in a predictable way, without requiring manual formatting.


                                                        
                                                        
                                                            <article class="c-acticle">
                                                          <h1>text</h1>
                                                          <p>text</p>
                                                          <p>text</p>
                                                        </article>

Elements	Class name
Article	.c-article

Variants	Class name
Size	.prose-[any]

Paragraph

A paragraph presents body text as a readable block of content. It is used for longer passages of text within the interface.
Paragraphs form the backbone of written content and help structure information in a clear, scannable way. They are typically used alongside headings to create hierarchy and improve readability.


                                                        
                                                        
                                                            <p class="c-p">
                                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                                        </p>

Elements	Class name
Paragraph	.c-p

Variants	Class name
small	.c-p--sm
large	.c-p--lg

List

A list groups related items into a structured, readable sequence. It is used to present information in a way that is easy to scan and understand.
Lists help organize content by breaking it into clear, discrete items, improving clarity and readability within the interface.


                                                        
                                                        
                                                            <ul class="c-ul mb-0">
                                                          <li>Lorem ipsum dolor sit amet</li>
                                                          <li>Consectetur adipiscing elit</li>
                                                        </ul>

Elements	Class name
Unordered list	.c-ul
Ordered list	.c-ol