Style Guide — Internal Use Only

Brand Colours

These are the official Clarity CSS variables. Always reference these tokens — never hardcode hex values directly on elements.

Dodger Blue

--dodger-blue

#2994e5

Primary CTA, links, highlights

Hover

--hover

#1683d6

Button hover & active states

Dark Slate Blue

--dark-slate-blue

#275476

Headings, dark text accents

Shadows

--shadows

#07263d

Drop shadows, deep overlays

Alice Blue

--alice-blue

#f1f9ff

Light section backgrounds

Text

--text

#646464

Default body copy

Black

--black

#464646

Strong headings, bold text

Smokey Grey

--smokey-grey

#6f6f6f

Secondary / caption text

Martini

--martini

#a1a1a1

Disabled states, placeholders

Line

--line

#cfcfcf

Borders, dividers, rules

White

--white

#ffffff

Backgrounds, reversed text

Typography

Primary font: Nunito. Always apply an existing heading class — never override font sizes with inline styles.

H1 — Page Title

Air Quality, Simplified.

Nunito · 48px · 700 · lh 1.2 · color: --dark-slate-blue

H2 — Section Heading

Trusted in 85+ Countries

Nunito · 36px · 700 · lh 1.2 · color: --dark-slate-blue

H3 — Subsection

Sensing-as-a-Service Platform

Nunito · 24px · 700 · lh 1.3 · color: --dark-slate-blue

H4 — Card Title

Real-time Data Dashboard

Nunito · 20px · 700 · lh 1.4 · color: --black

Body — Default paragraph

Clarity delivers accurate, reliable air quality monitoring with solar-powered hardware, cloud software, and expert support in one seamless solution.

Nunito · 16px · 400 · lh 1.6 · color: --text

Small / Caption

Last updated: March 2026 · View documentation

Nunito · 14px · 400 · lh 1.5 · color: --smokey-grey

Label / Tag

Air Quality Sensing IoT

12px · 700 · uppercase · color: --dodger-blue

Buttons

Use these three canonical button classes. Never create new button styles — apply these classes or their existing combo modifiers.

Primary — Button-Blue

Get Started Request a Demo

bg: --dodger-blue · hover: --hover · color: white · 16px 700 · border-radius: 4px · Webflow class: Button-Blue

Secondary — Secondary-btn

Learn More View Docs

bg: transparent · border: --dodger-blue · color: --dodger-blue · Webflow class: Secondary-btn

Tertiary / Back — Back btn

← Back to Overview

bg: #e5f4ff · color: --hover · Webflow class: Back btn

Disabled state

Unavailable

bg: #f0f0f0 · color: --martini (#a1a1a1) · Webflow class: Build solution btn disabled

Canonical Utility Classes

These are the one approved name for each common utility need. Do not create new styles that duplicate these. If you see a different class doing the same job, switch it to the canonical one below.

Class name	CSS it applies	Use it for	Retire these duplicates
`hide`	display: none	Hiding elements via interactions / conditions	Section - Hidden, Hidden, Dispaly-none, navbar-script, video-clicked, hide, + 22 others
`w-100`	width: 100%	Full-width elements inside a flex/grid parent	100%, hardware-img, contain, top-img, trust_tabs, + 4 others
`text-center`	text-align: center	Centering inline/text content	Align center, centeralign, centered, text-align-center, Column 3, + 8 others
`text-left`	text-align: left	Explicitly left-aligning overriding parent	Left align, align-left, left-align, text-align-left, + 5 others
`text-blue`	color: --dodger-blue	Clarity blue text accent	--blue, Bold Text, Bold Text 2, Bold Text 3, Clarity-Blue-Font, 2nd
`mb-0`	margin-bottom: 0	Removing bottom margin from headings/paragraphs	Margin bottom 0, last, Last, margin-bottom-0, no-mb, p, to, + 13 others
`mb-10`	margin-bottom: 10px	Tight spacing below elements	Margin bottom 10, Bottom Padding 10, Heading 69, adjust padding, + 6 others
`mb-20`	margin-bottom: 20px	Standard spacing below elements	Margin bottom 20, Featured product title, feature-block__img, ul, + 6 others
`mt-20`	margin-top: 20px	Standard spacing above elements	margin top 20, margin-top-20, margin20, margintop20, standard text
`mt-30`	margin-top: 30px	Larger spacing above elements	margin-top-30, blog, margintop20
`mt-60`	margin-top: 60px	Section-level top spacing	margin-top-60, Logos-block, Table-container, Margintop80
`is-relative`	position: relative	Positioning context for absolute children	Relative, rel-position-block, c_map_contain, map_wrap, wrap_input, + 6 others
`is-flex`	display: flex	Generic flex container (use sparingly — prefer component-specific classes)	Flex wrapper, Div Block 61, Column 20, Table-block, + 6 others

Style Audit Findings

Audit run April 2026. The site currently has 2,979 styles. Here is a breakdown of what was found and the recommended cleanup priority.

709

Empty styles

Zero-property classes doing absolutely nothing. Safe to delete. 115 are base classes, 594 are empty combo modifiers.

206

Auto-numbered

Names like “Image 28”, “Container 981”, “Div Block 6” — Webflow defaults that were never properly named. Review and delete or rename.

931

Duplicate name instances

308 groups of near-identical names. Worst offender: “Align center” with 78 variants. Consolidate to the canonical utility classes above.

Duplicate property groups

97 sets of styles where multiple names apply the exact same CSS. E.g. 28 styles all doing display:none. Pick one name per job.

767

Rich / keep-worthy styles

Base styles with 5+ properties and meaningful semantic names. Examples: Button-Blue, Career card, process_card_wrap, fs-checkbox_field-1. Leave these alone.

~500–800

Target after cleanup

A well-maintained site of this size should have roughly 500–800 styles. That’s a potential reduction of 2,000+ redundant classes.

How to clean up: In Webflow Designer, open the Style Manager panel. Filter by “Unused” to find styles not applied anywhere. Delete zero-property and auto-named styles first — they are the safest to remove. For duplicates, re-apply the canonical class to all elements before deleting the redundant one.