Typography & Background Color Utility Classes

Detailed technical documentation and implementation guide for Typography & Background Color Utility Classes.

Theme Typography Scale (.fontStyle1 to .fontStyle9) #

JoonWeb themes utilize a standardized typography hierarchy ranging from `.fontStyle1` down to `.fontStyle9`. These classes automatically inherit font families, letter spacing, and line heights defined in `theme_config.json`.

| Class | Hierarchy Level | Primary Use Case |
|---|---|---|
| `.fontStyle1` | Display / Hero Title | Storefront hero headers & main banner text |
| `.fontStyle2` | Heading 2 | Section main titles & prominent modal headers |
| `.fontStyle3` | Heading 3 | Collection headers, card titles & product names |
| `.fontStyle4` | Heading 4 | Widget titles, sidebar group headers |
| `.fontStyle5` | Heading 5 | Sub-headings, feature highlights, card labels |
| `.fontStyle6` | Heading 6 | Product tags, badge labels & small headings |
| `.fontStyle7` | Body Text / Paragraph | Default body copy, descriptions, article text |
| `.fontStyle8` | Secondary Text | Helper text, breadcrumb links, pricing subtext |
| `.fontStyle9` | Fine Print / Footnote | Copyright text, legal disclaimers, micro metadata |

### Typography Usage Example

```jw
<div class="hero-content">
  <h1 class="fontStyle1">{{ section.settings.title }}</h1>
  <p class="fontStyle7 text-muted">{{ section.settings.description }}</p>
  <span class="fontStyle9">Free shipping on orders over {{ site.currency }}999</span>
</div>
```

Dynamic Font Customization via Property Object #

Global Theme Colors & Background Classes (.background1 to .background6) #

Every JoonWeb theme defines 6 global CSS color tokens in `theme_config.json` (`--color1` through `--color6`).

Storefront sections use 6 harmonious background utility classes (`.background1` to `.background6`) that automatically map background colors with contrast-optimized text and border colors:

| Class | Background Token | Text Color Token | Border Color Token | Typical Application |
|---|---|---|---|---|
| `.background1` | `var(--color1)` | `var(--color5)` | `var(--border1)` | Dark primary header / hero / dark mode |
| `.background2` | `var(--color2)` | `var(--color6)` | `var(--border1)` | Secondary surface / widget cards |
| `.background3` | `var(--color3)` | `var(--color5)` | `var(--border1)` | Accent callout / active state background |
| `.background4` | `var(--color4)` | `var(--color6)` | `var(--border1)` | Subtle light container / muted banner |
| `.background5` | `var(--color5)` | `var(--color6)` | `var(--border1)` | Crisp white / default light background |
| `.background6` | `var(--color6)` | `var(--color5)` | `var(--border1)` | Deep charcoal / dark footer background |

### Dynamic Color Palette Binding

```jw
{# Section wrapper uses merchant's selected color scheme #}
<section class="section-padding {{ section.colors ? section.colors : 'background5' }}" id="{{ section.id }}">
  <div class="container">
    {# Inner card uses secondary scheme #}
    <div class="card p-4 {{ section.colors2 ? section.colors2 : 'background2' }}">
      <h3 class="fontStyle3">{{ block.settings.title }}</h3>
    </div>
  </div>
</section>
```

Button Styles & Dynamic Border Radius #

### Button Utility Classes
JoonWeb themes standardize button dimensions and hover transitions using `.btns`:

- `.btns`: Base button styling with smooth transition and cursor pointer.
- `.btns-sm`: Small compact button (e.g. quick buy or tag triggers).
- `.btns-md`: Standard medium button (default for add-to-cart).
- `.btns-lg`: Large call-to-action button (hero sliders).
- `.btns-xlg`: Extra-large prominent action button.

```jw
{% set button_size_typ = {
  "btns-sm": "btns-sm",
  "btns-md": "btns-md",
  "btns-lg": "btns-lg",
  "btns-xlg": "btns-xlg"
} %}
{% set button_typ = button_size_typ[section.desktop.buttonSize] ?? 'btns-md' %}

<a href="{{ section.settings.link.url }}" class="btns border-radius {{ button_typ }} {{ section.colors3 ? section.colors3 : 'background3' }}">
  <span>{{ section.settings.link.label | default('Shop Now') }}</span>
</a>
```

### Dynamic Border Radius
Expose slider controls in `{% rules %}` and apply dynamic border radius to cards and buttons:

```css
<style>
  {% if section.desktop.borderRadius %}
    #{{ section.id }} .border-radius {
      border-radius: {{ section.desktop.borderRadius }}px;
    }
  {% endif %}
</style>
```

Last modified: Oct 08, 2026