Global Styles & Typography
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 AppearanceCustomizeColor 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.
Shows a dark/light mode toggle button in the navigation bar. With it off, the site always uses the default scheme.
The scheme shown when a visitor first arrives, before any preference is set.
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.
Saves the visitor preference in a cookie so it survives page loads and sessions. Only available while the scheme toggle is enabled.
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.
| Setting | Default | What it controls |
|---|---|---|
| Accent Color | #00ff85 | Primary brand color: buttons, highlights, active states, icon strokes |
| Page Background | #121212 | Main page background |
| Secondary Background | #1c1c1c | Cards, panels, code blocks, input backgrounds |
| Dark Surface | #0f0f0f | Deepest surface: scrollbar track, selection contrast |
| Body Text Color | #999999 | Paragraphs and muted UI text |
| Heading Color | #ffffff | H1 to H6 headings |
| Border Color | rgba(255,255,255,0.125) | Default borders and dividers |
| Border Color - Active | rgba(255,255,255,0.3) | Focused inputs, hovered cards, active elements |
| Outline Surface BG | #1c1c1c | Frosted elements at rest |
| Outline Surface BG - Hover | #333333 | The same elements on hover or focus |
#Light scheme colors
These apply when a visitor switches to light mode.
| Setting | Default | What it controls |
|---|---|---|
| Accent Color | #00ff85 | Primary brand color in light mode |
| Page Background | #f5f5f7 | Main page background |
| Secondary Background | #ffffff | Cards, panels, input backgrounds |
| Deep Surface | #e8e8ed | Deepest surface: scrollbar track, selection contrast |
| Body Text Color | #6e6e73 | Paragraphs and muted UI text |
| Heading Color | #1a1a1f | H1 to H6 headings |
| Border Color | rgba(152,152,152,0.2) | Default borders and dividers |
| Border Color - Active | rgba(152,152,152,0.35) | Focused inputs, hovered cards |
| Outline Surface BG | #ffffff | Frosted elements at rest |
| Outline Surface BG - Hover | #ffffff | The same elements on hover or focus |
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.
To set a color on one heading or paragraph that differs per scheme, see the Color Scheme article.
#Typography
Open AppearanceCustomizeTypography to control fonts, sizes, weights and spacing across your entire site.
#Font family
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 DashboardFonts Library.
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.
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.
#Body text
| Setting | Type | Default | Description |
|---|---|---|---|
| Body Font Size - Desktop | Slider | 18px | Base font size for paragraphs on desktop screens |
| Body Font Size - Mobile | Slider | 16px | Base font size on mobile. The theme scales fluidly between the two values |
| Body Line Height | Slider | 1.35 | Vertical rhythm between lines of body text |
| Body Letter Spacing | Slider | 0em | Space between characters in body text |
#Font weights
| Setting | Default | Used for |
|---|---|---|
| Bold Weight | 600 | Headings and strong text |
| Medium Weight | 500 | Emphasized text, nav items, meta values |
| Regular Weight | 400 | Body text |
| Thin Weight | 400 | Light text accents |
#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.
| Heading | Desktop | Mobile | Line height | Letter spacing | Role |
|---|---|---|---|---|---|
| H1 | 72px | 40px | 1.0 | -0.02em | Display and hero, the largest heading |
| H2 | 60px | 32px | 1.0 | -0.02em | Major section headings |
| H3 | 48px | 28px | 1.1 | -0.02em | Sub-section and card headings |
| H4 | 36px | 26px | 1.1 | 0em | Card and widget titles |
| H5 | 28px | 21px | 1.2 | 0em | Labels and small titles |
| H6 | 22px | 19px | 1.2 | 0em | Captions and meta labels |
#Utility sizes
| Setting | Default | Description |
|---|---|---|
| Small Text Size | 16px | Used by the .small class: footnotes, meta info, helper text |
| Small Text Line Height | 1.35 | Line height for small text |
| XS Text Size | 14px | Used by the .xs class: tags, badges, timestamps, fine print |
| XS Text Line Height | 1.35 | Line height for extra-small text |
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.
Last updated
Was this article helpful?
Resources
On this page
