Headers

Use headers to create clear visual hierarchy. All headers use Open Sans SemiBold (600).

Header 1 - Page Title

32px / 60px line-height / 600 weight

Header 2 - Section Title

24px / 40px line-height / 600 weight

Header 3 - Subsection

20px / 30px line-height / 600 weight

Header 4 - Panel Title

18px / 30px line-height / 600 weight

<h1 class="xcart-h1">Header 1</h1>
<h2 class="xcart-h2">Header 2</h2>
<h3 class="xcart-h3">Header 3</h3>
<h4 class="xcart-h4">Header 4</h4>

Body Text

Body text styles for content. All body text uses Open Sans Regular (400).

Body 1 - Primary content text for important information and main paragraphs.

16px / 30px line-height / 400 weight

Body 2 - Standard text for form labels, table content, and general UI text.

14px / 20px line-height / 400 weight

Body 3 - Small text for captions, hints, and secondary information.

12px / 20px line-height / 400 weight

<p class="xcart-body-1">Primary content text</p>
<p class="xcart-body-2">Standard UI text</p>
<p class="xcart-body-3">Small captions</p>

Links

Link styles inherit body text sizes with blue color (var(--xcart-primary)). Underline appears on hover.

Link 1 - Primary link style 16px / 30px

Link 2 - Standard link 14px / 20px

Link 3 - Small link 12px / 20px

<a href="#" class="xcart-link-1">Primary link</a>
<a href="#" class="xcart-link-2">Standard link</a>
<a href="#" class="xcart-link-3">Small link</a>

Helper Links

Helper links include an underline and arrow icon. Used for navigation hints.

Helper link 1 16px

Helper link 2 14px

Helper link 3 12px

<a href="#" class="xcart-helper-link xcart-body-1">
    <span>Helper link</span>
    {{ icons.arrow_right('var(--xcart-primary)') }}
</a>

Button & Table Text

Special text styles for buttons and table headers.

Button Text 16px / 30px / 600 weight

Table Column Title 14px / 20px / 600 weight

<span class="xcart-btn-text">Button Text</span>
<span class="xcart-table-title">Table Column</span>

Text Colors

Utility classes for text colors. Can be combined with any typography class.

Primary Text (var(--xcart-text-primary))

Secondary Text (var(--xcart-text-secondary))

Muted Text (var(--xcart-text-muted))

Link Color (var(--xcart-primary))

Success Text (var(--xcart-success))

Danger Text (var(--xcart-danger))

Warning Text (var(--xcart-warning))

<span class="xcart-text-primary">Primary</span>
<span class="xcart-text-secondary">Secondary</span>
<span class="xcart-text-muted">Muted</span>
<span class="xcart-text-link">Link</span>
<span class="xcart-text-success">Success</span>
<span class="xcart-text-danger">Danger</span>
<span class="xcart-text-warning">Warning</span>

Typography Scale Reference

Class	Size	Line Height	Weight	Usage
`.xcart-h1`	32px	60px	600	Page titles
`.xcart-h2`	24px	40px	600	Section titles
`.xcart-h3`	20px	30px	600	Subsections
`.xcart-h4`	18px	30px	600	Panel titles
`.xcart-body-1`	16px	30px	400	Primary content
`.xcart-body-2`	14px	20px	400	Standard text
`.xcart-body-3`	12px	20px	400	Captions, hints
`.xcart-link-*`	16/14/12px	30/20/20px	400	Hyperlinks
`.xcart-btn-text`	16px	30px	600	Button labels
`.xcart-table-title`	14px	20px	600	Table headers