Quick reference for building on this blueprint. Generated from Site Settings, so the tables below are always current.
Where the styling actually lives
| What | Where |
|---|---|
| Colours, fonts, button shape | Elementor → Site Settings (Global Colors, Global Fonts, Theme Style) |
| Every custom rule | Site Settings → Custom CSS — one block, generated by kit-css.php |
| Nothing | There is no stylesheet. Do not add one. |
Re-running kit-css.php overwrites Custom CSS entirely. Edit the script, not the box. Colours and fonts merge in place; button shape controls are seed-once, so a choice made in the UI survives.
Button classes
Put these in the widget’s Advanced → CSS Classes. A button carries no styling of its own — look, size and width come from the class; shape and type come from Site Settings.
| Class | Does |
|---|---|
btn-solid |
Secondary fill, white text, Primary on hover |
btn-outline-dark |
Transparent, white text/border → Primary Light. For DARK backgrounds |
btn-outline-light |
Transparent, Secondary text/border → Primary. For LIGHT backgrounds |
btn-light |
White fill, Primary text → Secondary |
btn-sm |
Smaller: 10/20 padding. Combine with a look |
btn-pair |
Two buttons split a row evenly, stack full width under 767px |
Those six are the only ones. Any other name falls back to the Theme Style default and looks like it worked while hover does nothing. Border radius is one value: Site Settings → Buttons → Border Radius.
Other classes
| Class | Goes on | Does |
|---|---|---|
media-frame |
image widget | Locks 3:2. Add --wide 16:9, --square 1:1, --tall 4:5 |
site-header |
header root container | Anchors the mobile dropdown to the bar’s bottom edge |
site-nav |
the Mega Menu widget | Desktop nav on one line, plus the whole mobile menu card |
#nav-cta |
a menu item, as its CSS ID | Turns that item into a pill button. Leave it off = no CTA |
header-overlay |
header root container | Transparent header sitting over the block beneath |
header-sticky |
header root container | Pins on scroll, logo shrinks, shadow appears |
form-on-dark |
container holding a form | White labels + outlined submit, for a form on a dark band |
Type ladder
Applied per widget — there are no automatic h1–h6 styles inside Elementor.
| Style | Family | Size |
|---|---|---|
| Primary | Figtree | — |
| Secondary | Figtree | — |
| Text | Figtree | — |
| Accent | Figtree | — |
| Display | Figtree | 48px / 34 mob |
| Heading 1 | Figtree | 40px / 30 mob |
| Heading 2 | Figtree | 32px / 26 mob |
| Heading 3 | Figtree | 24px |
| Heading 4 | Figtree | 20px |
| Intro | Figtree | 18px |
| Body | Poppins | 16px |
| Caption | Figtree | 14px |
| Eyebrow | Figtree | 12px |
| Menu | Figtree | 16px |
| Form Label | Figtree | 16px |
| Form Input | Poppins | 16px |
| Form Button | Figtree | 12px |
| Button | Figtree | 12px |
Colours
| Name | id | Hex |
|---|---|---|
| Primary | primary |
#115A8E |
| Secondary | secondary |
#2780BA |
| Text | text |
#727475 |
| Accent | accent |
#563166 |
| Primary Dark | primdark |
#0C4470 |
| Primary Light | primlite |
#9ACEF0 |
| Secondary Dark | secdark |
#1E6494 |
| Accent Dark | accentdark |
#3E2349 |
| Accent Light | accentlite |
#FAEFFF |
| Ink | ink |
#252B20 |
| Muted | muted |
#8B8D8E |
| Line | line |
#E8E8E8 |
| Surface | surface |
#F7F7F7 |
| White | white |
#FFFFFF |
| Form Field | formfield |
#F7F7F7 |
| Form Text | formtext |
#252B20 |
| Form Accent | formaccent |
#2780BA |
| Form Button | formbtn |
#2780BA |
| Form Button Hover | formbtnhov |
#115A8E |
Content typography — the part that is not Elementor
A blog post’s body, or any plugin output, is not built from widgets. Those fall back to a layer in Custom CSS that reads the same Global Fonts:
| Tag | Follows |
|---|---|
| h1 / h2 / h3 / h4 | Heading 1 / 2 / 3 / 4 |
| h5 / h6 | Intro / Caption |
| p, li, blockquote | Body (blockquote uses Intro) |
| links in content | Primary → Secondary, underlined |
Change a Global Font and this follows automatically. Elementor cannot bind a Theme Style typography field to a Global Font, so the rules read the CSS variables instead. Proven not to touch any block: 0 of 241 headings moved.
Tuning things — sizes, spacing, the sticky header
Elementor → Site Settings → Custom CSS. Scroll to the very bottom. The last thing in the box is:
/* ==== YOUR SETTINGS — safe to edit. Kept when the CSS above is regenerated ====
:root {
/* --nav-gutter: 12px; inset from the screen edge */
/* --sticky-logo-h: 44px; logo height when the header is pinned */
...
}
/* ==== END YOUR SETTINGS ==== */Uncomment a line, change the number, Update. That is the whole job. Everything is listed there with its default and a note on what it does, so you never need to find the rule it belongs to.
Everything above that block is generated and gets overwritten whenever the CSS is rebuilt. This block is lifted out first and put back, so your changes survive. It also sits last, which is why it wins.
What you can tune there: the mobile menu card (inset, radius, row padding, CTA gap, how much screen an open menu leaves) · the pinned header (logo height desktop and mobile, bar padding, CTA padding) · the overlay header pull-up · the gap between a form’s last field and its submit · btn-sm padding · which ladder step drives each content heading.
Colours, fonts and button shape are not here — those are proper fields in Global Colors, Global Fonts and Theme Style.
Spacing
| Desktop | Tablet | Mobile | |
|---|---|---|---|
| Horizontal gutter | 40px | 50px | 24px |
Set padding_tablet explicitly on every block. Tablet is its own breakpoint, not something that inherits — and its gutter is wider than desktop.
The library
51 blocks, in build order: Site · Hero · Page Header · Content · Ping Pong · Image + Text · Cards · Process · Proof · FAQ · Media · Location · Resources · Blog · CTA · Form.
See them all on Block Library Review. Buttons on Button Styles.
Edit blocks on the review page, then they get captured back into the saved templates. Do not delete the dark label strips above each block — that is how the split works.
Theme Builder
Three headers, three footers, a 404. Only one per slot has display conditions; the rest are dormant alternatives. To swap, move the condition — Elementor rejects two headers both set to Entire Site.
A theme template is a copy of its block, not a reference. Editing the block does not update it.
Leave these alone
| Thing | Why |
|---|---|
sb-marker sb-<number> |
The label strip above each block on the review page. Delete one and that block merges into the one above |
sb-category |
The category dividers on the review page |
| Theme Style → Buttons → Padding | Clearing it silently drops every button to Elementor’s smaller default. Should read 14 / 32 |
Delete this page, Block Library Review and Button Styles before handing a site to a client.