STEP FOUR OF FOUR
Making the colours and fonts yours
Change them in one place, and the whole site follows.
Nothing in Romy hard-codes a colour or a typeface into a page. Headings, bands, rules and buttons read from Divi’s global palette, the design variables and the module presets, so changing them changes every page, every post, the templates and the ShopCard cards at once.
THE PALETTE
Eight colours, and what each one carries
Open the Variable Manager in the builder - the database icon in the left toolbar - and expand Colors. Click a swatch, change it, save - the site updates everywhere that colour is used.
ROMY’S SWATCHES
Ivory #F7F3EC — the page ground - most bands, and the hero at half strength
Warm Stone #DCD9D2 — the alternate band, such as Shop my Picks on the home page
Soft Taupe #B8AC9E — fine rules, photo frames and the solid button
Deep Brown #3E2F26 — headings, running text and the footer bar
Denim Blue #4A6A8A — the accent: links, the short rule under headings and the current menu item
Caramel #A97B4B — a warm second accent, kept for small touches
Soft Coral #E58C7B — a single highlight colour, used sparingly
Muted Olive #6A6E4B — a spare in the palette, ready if you want a green
Divi’s named colours — Heading and Body text are Deep Brown, Link and Primary are Denim Blue, Secondary is Caramel - change them in the Divi 5 Variable Manager if you recolour the palette, so anything you add from scratch matches.
CHANGING A COLOUR
Keep the roles, change the hues
The safest way to recolour Romy is to replace each swatch with your own colour in the same role - a pale ground for Ivory, a slightly deeper one for Warm Stone, a dark for Deep Brown and one accent for Denim Blue. The layouts were spaced and contrasted around those roles, so the site stays readable.
If you want a different feel rather than a different palette, the fastest single change is Denim Blue. It is the colour you see in every link and accent rule.
CHANGING THE FONTS
Two typefaces, set once
Headings are Cormorant Garamond and running text is Red Hat Text. The heading font and the font for labels are design variables - Romy Heading and Romy Body and Labels - in the Variable Manager in the builder: the database icon in the left toolbar, then Fonts. The module presets read those two variables rather than naming a font of their own, so changing them there carries through the site in one move.
SPACING
One preset controls the rhythm
Most bands use the Romy Section Preset, which gives them 100px above and below. Open any section that uses it, edit the preset under Design › Spacing, and every band that shares it re-paces at once. Lower it for a denser site, raise it for a calmer one. Page heroes and a few deliberately tight bands keep their own spacing.
THE TYPE SIZE
Presets, not one-off styling
Romy’s type and buttons come from a small set of presets: Romy - Heading Display, Section and Section Label for headings; Romy - Text Body and Text Eyebrow for text; Romy - Button Primary, Secondary Outline, Text Link and Text Arrow for buttons; and a preset each for ShopCard items and collections. Change a preset and every module using it follows. Give anything new you add the matching preset, and it will look like it belongs.
WHERE THE STYLING LIVES
Almost all of it is in Divi
Colours, fonts, spacing and the module presets are all set in Divi itself, which is what keeps the design editable in the Visual Builder rather than locked in a stylesheet.
A handful of things cannot be expressed through Divi’s options, and those live in the child theme’s style.css, each with a comment explaining why: the equal-height cards in the Journal grid, the position of the header search icon and the Journal dropdown, the half-width menu on tablets and phones, and the small slide of the arrow on the Text Arrow and Text Link buttons.
Next