## Global Styles & Typography

Product: Monogram - Personal Portfolio WordPress Theme
URL: https://hub.jkdevstudio.com/docs/monogram/customization/global-styles-typography
Updated: 2026-09-06
Summary: Every color and type setting in Monogram, from the dark and light palettes to font families, heading sizes and weights, with the default for each.

Monogram ships with a complete design token system for colors and typography. You control every visual aspect of your site from two Customizer panels: **Color Scheme** and **Typography**.

## Color Scheme

Open [[Appearance > Customize > Color Scheme]] to configure your site color palette. Monogram supports both dark and light color schemes, each with its own full set of colors.

### Scheme switcher

These settings control how visitors interact with dark and light mode on your site.

:::options

- **Enable Scheme Toggle** (toggle, default: on): Shows a dark/light mode toggle button in the navigation bar. With it off, the site always uses the default scheme.

- **Default Scheme** (select, default: Dark): The scheme shown when a visitor first arrives, before any preference is set.

- **Detect OS Preference** (toggle, default: off): On the first visit, matches the visitor operating system color preference. They can still override it with the toggle. Only available while the scheme toggle is enabled.

- **Remember User Choice** (toggle, default: on): Saves the visitor preference in a cookie so it survives page loads and sessions. Only available while the scheme toggle is enabled.

- **Outline Surface Blur** (slider, default: 10px): The `backdrop-filter` blur radius for frosted panels such as pills, tags and outline buttons. Applies to both schemes. Set it to 0 to switch the blur off.

:::

### Dark scheme colors

These apply while your site is in dark mode, which is the default.

<table> <thead> <tr> <th>Setting</th> <th>Default</th> <th>What it controls</th> </tr> </thead> <tbody> <tr> <td><strong>Accent Color</strong></td> <td><code>#00ff85</code></td> <td>Primary brand color: buttons, highlights, active states, icon strokes</td> </tr> <tr> <td><strong>Page Background</strong></td> <td><code>#121212</code></td> <td>Main page background</td> </tr> <tr> <td><strong>Secondary Background</strong></td> <td><code>#1c1c1c</code></td> <td>Cards, panels, code blocks, input backgrounds</td> </tr> <tr> <td><strong>Dark Surface</strong></td> <td><code>#0f0f0f</code></td> <td>Deepest surface: scrollbar track, selection contrast</td> </tr> <tr> <td><strong>Body Text Color</strong></td> <td><code>#999999</code></td> <td>Paragraphs and muted UI text</td> </tr> <tr> <td><strong>Heading Color</strong></td> <td><code>#ffffff</code></td> <td>H1 to H6 headings</td> </tr> <tr> <td><strong>Border Color</strong></td> <td><code>rgba(255,255,255,0.125)</code></td> <td>Default borders and dividers</td> </tr> <tr> <td><strong>Border Color - Active</strong></td> <td><code>rgba(255,255,255,0.3)</code></td> <td>Focused inputs, hovered cards, active elements</td> </tr> <tr> <td><strong>Outline Surface BG</strong></td> <td><code>#1c1c1c</code></td> <td>Frosted elements at rest</td> </tr> <tr> <td><strong>Outline Surface BG - Hover</strong></td> <td><code>#333333</code></td> <td>The same elements on hover or focus</td> </tr> </tbody> </table>

### Light scheme colors

These apply when a visitor switches to light mode.

<table> <thead> <tr> <th>Setting</th> <th>Default</th> <th>What it controls</th> </tr> </thead> <tbody> <tr> <td><strong>Accent Color</strong></td> <td><code>#00ff85</code></td> <td>Primary brand color in light mode</td> </tr> <tr> <td><strong>Page Background</strong></td> <td><code>#f5f5f7</code></td> <td>Main page background</td> </tr> <tr> <td><strong>Secondary Background</strong></td> <td><code>#ffffff</code></td> <td>Cards, panels, input backgrounds</td> </tr> <tr> <td><strong>Deep Surface</strong></td> <td><code>#e8e8ed</code></td> <td>Deepest surface: scrollbar track, selection contrast</td> </tr> <tr> <td><strong>Body Text Color</strong></td> <td><code>#6e6e73</code></td> <td>Paragraphs and muted UI text</td> </tr> <tr> <td><strong>Heading Color</strong></td> <td><code>#1a1a1f</code></td> <td>H1 to H6 headings</td> </tr> <tr> <td><strong>Border Color</strong></td> <td><code>rgba(152,152,152,0.2)</code></td> <td>Default borders and dividers</td> </tr> <tr> <td><strong>Border Color - Active</strong></td> <td><code>rgba(152,152,152,0.35)</code></td> <td>Focused inputs, hovered cards</td> </tr> <tr> <td><strong>Outline Surface BG</strong></td> <td><code>#ffffff</code></td> <td>Frosted elements at rest</td> </tr> <tr> <td><strong>Outline Surface BG - Hover</strong></td> <td><code>#ffffff</code></td> <td>The same elements on hover or focus</td> </tr> </tbody> </table>

<div data-callout="tip">

Each color outputs to a CSS custom property such as `--jkd-accent` or `--jkd-bg`. Custom CSS anywhere on your site can reference those variables and stay in step with the palette.

</div>

To set a color on one heading or paragraph that differs per scheme, see the [Color Scheme article](https://hub.jkdevstudio.com/docs/monogram/customization/color-scheme).

## Typography

Open [[Appearance > Customize > Typography]] to control fonts, sizes, weights and spacing across your entire site.

### Font family

:::options

- **Font Family** (select, default: General Sans): The main font. Headings always use it, and so does body text unless a secondary font is set. The chosen font loads automatically from the font kit configured in [[Theme Dashboard > Fonts Library]].

- **Secondary Font Family** (select, default: Same as primary font): Font for body text, buttons, labels and everything that is not a heading. Left on "Same as primary font", the whole site runs on one face.

:::

A secondary font is how you pair a display face with something built for reading. Put the expressive font in **Font Family**, where it covers H1 to H6, and a plain one in **Secondary Font Family** for paragraphs. A face that looks striking at 72px is often tiring at 18px, and this splits the two jobs without custom CSS.

<div data-callout="note">

Both dropdowns list the same fonts, and both pull from the Fonts Library. A font has to be in that library before it appears here, whether it is a Google font or one you uploaded.

</div>

### Body text

<table> <thead> <tr> <th>Setting</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><strong>Body Font Size - Desktop</strong></td> <td>Slider</td> <td>18px</td> <td>Base font size for paragraphs on desktop screens</td> </tr> <tr> <td><strong>Body Font Size - Mobile</strong></td> <td>Slider</td> <td>16px</td> <td>Base font size on mobile. The theme scales fluidly between the two values</td> </tr> <tr> <td><strong>Body Line Height</strong></td> <td>Slider</td> <td>1.35</td> <td>Vertical rhythm between lines of body text</td> </tr> <tr> <td><strong>Body Letter Spacing</strong></td> <td>Slider</td> <td>0em</td> <td>Space between characters in body text</td> </tr> </tbody> </table>

### Font weights

<table> <thead> <tr> <th>Setting</th> <th>Default</th> <th>Used for</th> </tr> </thead> <tbody> <tr> <td><strong>Bold Weight</strong></td> <td>600</td> <td>Headings and strong text</td> </tr> <tr> <td><strong>Medium Weight</strong></td> <td>500</td> <td>Emphasized text, nav items, meta values</td> </tr> <tr> <td><strong>Regular Weight</strong></td> <td>400</td> <td>Body text</td> </tr> <tr> <td><strong>Thin Weight</strong></td> <td>400</td> <td>Light text accents</td> </tr> </tbody> </table>

### Heading sizes

Each heading level has four controls: desktop size, mobile size, line height and letter spacing. The theme scales fluidly between the mobile and desktop values based on viewport width.

<table> <thead> <tr> <th>Heading</th> <th>Desktop</th> <th>Mobile</th> <th>Line height</th> <th>Letter spacing</th> <th>Role</th> </tr> </thead> <tbody> <tr> <td><strong>H1</strong></td> <td>72px</td> <td>40px</td> <td>1.0</td> <td>-0.02em</td> <td>Display and hero, the largest heading</td> </tr> <tr> <td><strong>H2</strong></td> <td>60px</td> <td>32px</td> <td>1.0</td> <td>-0.02em</td> <td>Major section headings</td> </tr> <tr> <td><strong>H3</strong></td> <td>48px</td> <td>28px</td> <td>1.1</td> <td>-0.02em</td> <td>Sub-section and card headings</td> </tr> <tr> <td><strong>H4</strong></td> <td>36px</td> <td>26px</td> <td>1.1</td> <td>0em</td> <td>Card and widget titles</td> </tr> <tr> <td><strong>H5</strong></td> <td>28px</td> <td>21px</td> <td>1.2</td> <td>0em</td> <td>Labels and small titles</td> </tr> <tr> <td><strong>H6</strong></td> <td>22px</td> <td>19px</td> <td>1.2</td> <td>0em</td> <td>Captions and meta labels</td> </tr> </tbody> </table>

### Utility sizes

<table> <thead> <tr> <th>Setting</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><strong>Small Text Size</strong></td> <td>16px</td> <td>Used by the <code>.small</code> class: footnotes, meta info, helper text</td> </tr> <tr> <td><strong>Small Text Line Height</strong></td> <td>1.35</td> <td>Line height for small text</td> </tr> <tr> <td><strong>XS Text Size</strong></td> <td>14px</td> <td>Used by the <code>.xs</code> class: tags, badges, timestamps, fine print</td> </tr> <tr> <td><strong>XS Text Line Height</strong></td> <td>1.35</td> <td>Line height for extra-small text</td> </tr> </tbody> </table>

<div data-callout="info">

The negative letter spacing on H1 to H3 tightens large headings, which is common in modern display type. Adjust it per level to match your brand.

</div>