Make Fernlight yours — switch the mood, recolor, and shape your typography, all from the Site Editor with no code.
Style variations — eight looks
Go to Appearance → Editor → Styles → Browse styles, click a look to preview it live, then Save. The shipped default is a calm slate-blue; seven named variations join it: Sage, Ink, Warm Sand, Clay, Sky, Dusk, and a true Dark. Each restyles the whole site while leaving your layout untouched.
Colors — semantic roles
Open Styles → Colors. Fernlight's palette uses roles, not one-off values — set a role once and it updates everywhere, preserving contrast automatically.
- Contrast — primary text and dark UI.
- Muted — secondary text and captions.
- Accent — highlights, separators, buttons.
- Surface / Surface-2 — section backgrounds.
- Base — the page background.
- Invert / On-invert — dark sections and the text on them.
Typography
Fernlight pairs Cormorant Garamond (display) with DM Sans (UI/body) — both self-hosted, so no third-party font-CDN request is ever made. Adjust them under Styles → Typography. Six one-click editorial block styles are available from any paragraph or heading's Styles panel:
- Lede, Deck, Kicker, Baseline — for paragraphs.
- Display, Compact — for headings.
Reading measure 42rem, editorial measure 52rem, with a documented baseline rhythm and a 7-step fluid type scale. Full token reference in the Developer reference.
Patterns
Build pages fast from 50+ block patterns — heroes, editorial sections, post parts, newsletter/CTA, lists, and full-page layouts. Drop one in and replace the words; see them live on the demo.
Tips
- Start from the variation closest to your vibe, then tweak — less work than building a palette from scratch.
- Always click Save in the Editor to apply changes live; use revisions to roll back.