Reference

Style Guide

Every tag baseline, colour token, spacing step and component state in one place. Nothing on this page types a value into a class — each one reads a Webflow Variable, so editing it here changes it everywhere. Start with Colour and Type scale; the rest follows from those two.

Colour tokens, and every one of them is a Webflow Variable

Steps in the type ramp, from label to display

Steps on the spacing scale that every gap is built from

Tag baselines

These elements carry no class at all. They are styled through Webflow’s tag selectors, which is what makes Rich Text content and anything a buyer adds later inherit the design automatically. To edit one: select the element, switch the Style panel selector from the class to All H2 Headings (or the tag you want), and change it there.

Heading two

Heading three

Heading four

Heading five

Heading six

A paragraph of body copy at the base size, with an inline link and bold and italic emphasis so their weights can be compared against the surrounding text. Body copy sits on Ink / Secondary rather than Ink / Primary — the headings hold the darkest value, and that difference is what gives a page its hierarchy before anything is set in a larger size.

An unordered list item
A second item, to show the spacing between them

An ordered list item
A second item, to show the counter alignment

Long-form content

Blockquote, Figure and Figure Caption are not global tag selectors in Webflow — the Style panel offers no “All Blockquotes” row. They exist only as nested selectors inside a Rich Text element. The block below is the specimen: it shows what those three should look like, and each one carries a class so the styling survives the import. To use it on real content, drop a Rich Text element on the page and match its nested selectors to these.

A heading inside long-form content

Rich Text is where most of a site’s written copy ends up, and it is the one element whose children cannot carry a class. Styling it correctly once is worth more than styling ten section headings.

A blockquote carries the pull-quote weight, and is the tag most often left at Webflow’s factory default — which is why it is the fastest way to tell a finished template from an unfinished one.

Rows of solar modules across an open field at low sun

A figure caption, at Body Small on Ink / Muted.

Lists here inherit the same baseline as lists anywhere else
So a CMS article and a static page read identically

Colour

Eleven tokens, one accent family. The ground is a warm mineral off-white rather than pure white: against a fully saturated green, white reads as a user interface and this reads as daylight. Change a value in the Variables panel and every use of it moves at once.

Surface

Surface / Primary

#F2F4EF

Surface / Secondary

#E7EBE1

Surface / Inverse

#0F1A12

Ink

Ink / Primary

#0F1A12 · 16.1:1

Ink / Secondary

#2E3F31 · 10.1:1

Ink / Muted

#5C6D5F · 5.0:1

Ink / Inverse

#F4F8F0 · 16.6:1

Accent

Accent / Primary

#4FE86A · 11.1:1 with ink

Accent / Secondary

#C9F53F

Accent / On Dark

#8CF24E · 12.7:1

Accent / Hover

#3CD558

Border, system and overlay

Border / Subtle

#DDE3D6

Border / Default

#C4CCBA

System / Success

#1F6B3F · 5.9:1

System / Error

#A3271A · 6.6:1

Overlay / Dark

rgba(15,26,18,0.55)

Legibility

Body copy on each ground. If a pair is hard to read here it is hard to read everywhere — this row is the fastest way to check a palette change against WCAG AA before publishing. All three pairs above clear 4.5:1 for normal text.

Body copy on Surface / Primary

Body copy on Surface / Secondary

Body copy on Surface / Inverse

Type scale

Two families. Plus Jakarta Sans carries everything; Instrument Serif appears once per page, italic, as the counter-voice inside a display line. Each row below is a live specimen at its own token size, and every size steps down across four responsive modes — Base/Desktop, Tablet, Mobile Landscape and Mobile Portrait — so the ladder holds its proportions at every width rather than shrinking uniformly.

Font Size / Display Large · 7rem

Font Size / Display Medium · 4rem

Font Size / H1 · 3.25rem

The quick brown fox

Font Size / H2 · 2.5rem

The quick brown fox

Font Size / H3 · 1.75rem

The quick brown fox

Font Size / Body Large · 1.125rem

The quick brown fox jumps over the lazy dog

Font Size / Body Base · 1rem

The quick brown fox jumps over the lazy dog

Font Size / Body Small · 0.875rem

The quick brown fox jumps over the lazy dog

Font Size / Label · 0.8125rem

The quick brown fox

Font Family / Accent

The counter-voice

Spacing & radius

Nine steps, drawn to scale. The ladder climbs by roughly a third to a half at each rung, which is wide enough that two adjacent steps are visibly different — a scale whose steps you cannot tell apart is a scale nobody uses consistently.

Space / 3XS

Space / 2XS

Space / XS

Space / S

Space / M

Space / L

Space / XL

Space / 2XL

Space / 3XL

Radius

Radius / ButtonRadius / CardRadius / LargeRadius / Pill

Components

Each of these carries the same class as the live component. Change it here and it changes on every page — that is the point of the page, and it is why none of these are copies made for the Style Guide.

Buttons

Anatomy: label plus chip. The chip is part of the button’s shape rather than a hover flourish, and the single hover gesture is the chip nudging right. Hover and tab through them — every one has a visible focus ring.

Primary

Ghost

Compact

On the inverse surface

Badge on darkLive

Badge

Default badgeAccent / Secondary

Links

An inline link inside a paragraph, so its underline and colour can be judged against the body copy around it. Links are underlined by default rather than relying on colour alone, which is what keeps them findable for a reader who cannot separate green from grey.

Form

Four states, all of them real: resting, hover, focus and error. A form styled only at rest is the most common finding on an otherwise finished template.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Form feedback

Thank you — the enquiry has been sent. This is Webflow’s own success block, so it appears automatically when a form submits.

Something went wrong and the form did not send. This is Webflow’s own error block.

Icons

Every icon in the template, drawn on the same grid and shipped as SVG. Replacing one is a matter of swapping the file — the sizes come from the Icon Size tokens, not from the artwork.

Logo mark

Globe

Bolt

Offset

Community

Wind

Solar

Consent

Origination

Mail

Offshore

Handover

Curve

Redact

Report

Leaf

People

Shield

Arrow

Play

The Variables panel

Three collections. Colours hold one value at every width; Typography and Layout carry four responsive modes, each bound to a Webflow breakpoint, so a value set in Mobile Portrait applies at 478px and below without a single class override.

Collection

What is in it

Modes

Colors

Surface, Ink, Accent, Border, System, Overlay, Focus

Base only — the brand does not change colour by width

Typography

Font Family, Font Size, Font Weight, Line Height, Letter Spacing

Base / Desktop · Tablet · Mobile Landscape · Mobile Portrait

Layout

Spacing, Section Padding, Max Width, Page Padding, Header Height, Control Height, Icon Size, Radius, Duration, Ease

Base / Desktop · Tablet · Mobile Landscape · Mobile Portrait

Where to change what

To change…

Edit this variable

The brand green everywhere

Accent / Primary

The page background

Surface / Primary

How big the biggest headline is

Font Size / Display Large

How much air every section has

Section Padding / Large

How wide the content column runs

Container / Max

The left and right page margin

Page Padding

How round every card is

Radius / Card

How tall every button and input is

Control Height / Default

How fast every hover responds

--duration--fast

Motion tokens

Durations and easings live in the stylesheet, not in the Variables panel — Webflow variables are colours, sizes, numbers, percentages and fonts, and there is no time or easing type. They are named here by their custom-property name so you can find them. Every transition on the site references one rather than typing its own, so a single edit re-times the whole template.

--duration--fasthover and focus response · 0.2s

--duration--mediumsurface and colour changes · 0.34s

--duration--slowentrances · 0.6s

--ease--standardthe default curve

--ease--emphasisentrances, and anything that should feel arrived-at

Have a site, a queue position or a problem with both?

Send us the constraint. We will tell you within a fortnight whether it is buildable and what it would take.

Start a conversation

Or email hello@greenvia.com