Style Guide Handbook

Use this guide to ensure your content looks stunning, stays accessible, and ranks well on Google.

1. How the CMS Works (Saving & Publishing)

The Webflow CMS works differently than a social media post or a simple blog. It is designed to let you work safely without breaking the live website.

Auto-Save is Always On: As you type or upload images, Webflow automatically saves your progress. You don’t need to look for a "Save" button—it’s doing the work in the background.

New Items = Drafts: When you create a new article, it is set to Draft by default. It will not appear on the website until you change its status.
Edits to Live Articles: If you edit an article that is already live, your changes are saved as "Changes in Draft." This means you can update a post over several days, and the public will only see your old version until you choose to publish the new one.

Publishing Options:
- Publish Now: This pushes that specific article live immediately.
- Queue for Next Site Publish: This "lines up" your article to go live the next time the entire website is published.
- Schedule: You can set a specific date and time for a new article to go live automatically.

The Webflow CMS is a powerful publishing tool, but it is not a word processor. To avoid losing work or dealing with "ghost" formatting:

Draft Elsewhere: Write in Microsoft Word, Google Docs, or Grammarly first.
The "Clean Paste": When you’re ready, use Cmd+Shift+V (Mac) to paste. This prevents messy code from your Word doc from breaking the website’s design.

Headings act as a map for both Google and screen readers. Please follow these styling rules strictly:

All headings (H2, H3, H4) must follow Title Style Capitalization. Capitalize every word except:

Articles: a, an, the.
Coordinating Conjunctions: and, or.
Short Prepositions: (4 letters or fewer) like in, on, at, with, by, for.
- Exception: Capitalize these if they are part of a verb phrase (e.g., "Starting Up the Computer").
First & Last Words: Always capitalize the first and last word of a heading, regardless of the rules above.

Correct Example: "The Quick Brown Fox Jumps over the Lazy Dog"

(Note: "over" is 4 letters, so it stays lowercase unless it's the first or last word).

H2, H3, and H4 Only: Your article title is the H1. Use H2 for main sections, H3 for sub-sections, and H4 for minor points.
Don't Skip Levels: Never jump from an H2 straight to an H4. It confuses search engines.
Short & Sweet: Headings should be punchy labels, not full sentences.
No "Manual" Styling: Do not make headings Bold or CAPITALIZE them to make them stand out. The design handles this!

Webflow does not automatically compress CMS images. Heavy files will slow down your site and eat up your bandwidth.

Image requirements:

Format — WebP only (Do not use JPG or PNG)
Max Width — 1500px
Max File Size — 350kb (Aim for 150kb)
Aesthetics — No borders, no logos, and tight crops
‍Optimization: Use Squoosh.app to convert and shrink images before uploading.
‍Captions: Use captions to provide context and improve accessibility.

To help your articles climb the Google rankings, keep these three things in mind:

Master the "Alt Text": Describe every image in the "Alt Text" field as if you are explaining it to someone who can't see it.
Internal Linking: If you mention a topic you’ve written about before, link to that article! This keeps users on your site longer and tells Google your content is valuable.
Descriptive Link Text: Never use "Click Here." Use descriptive text like: "Learn more about our [Sustainable Design Process]."

No Underlines: Underlines are for links only.
No Manual Spacing: Do not hit "Enter" multiple times to create gaps.
No "DIY" Dividers: Avoid using --- or ....... to separate sections.
No Double-Bolding: Headings are already bold; do not apply extra bolding to them.
Italics: Use sparingly. If everything is emphasized, nothing is.