Aqualogic / Visuals / Typography
The Aqualogic typeface is Manrope. It is a clean, modern sans-serif with strong legibility from large headlines to small body. Use it for logos, headlines, body and supporting text across digital and print.
Aa
Manrope
Google Fonts (open source)
Weights
A hierarchy that scales fluidly across viewports. Sizes are expressed in rem (relative to the base 16 px); pixel values are shown for reference.
| Step | Example | Size | Weight | Leading | Tracking | Use |
|---|---|---|---|---|---|---|
| Display | Intelligent water conservation. | 40–72 pxclamp(2.5rem, 5vw, 4.5rem) | ExtraBold 800 | 1.02 | -0.02em | Hero. One per page. Sets the tone of the brand at first contact. |
| H1 | Strategy. | 48 px3rem | ExtraBold 800 | 1.05 | -0.02em | Primary page title. One per page below the breadcrumb. |
| H2 | How we sound and behave. | 32 px2rem | Bold 700 | 1.1 | -0.015em | Section heading inside a page. |
| H3 | Tone of voice. | 24 px1.5rem | Semibold 600 | 1.2 | -0.01em | Card titles, sub-section heads. |
| H4 | Working statement. | 20 px1.25rem | Semibold 600 | 1.25 | -0.005em | Inline sub-heads, callouts. |
| Lede | A short introduction that sits beneath a page title. | 20 px1.25rem | Regular 400 | 1.55 | normal | Intro paragraph. One short paragraph at most. |
| Body | We help water companies save water and strengthen resilience through integrated demand management. | 16 px1rem | Regular 400 / Medium 500 | 1.65 | normal | Reading copy. Default for paragraphs. |
| Small / Caption | Source: Aqualogic Brand Strategy, 2025. | 14 px0.875rem | Regular 400 | 1.5 | 0.005em | Captions, image credits, fine print. |
| Eyebrow | AQUALOGIC / POSITIONING | 12 px0.75rem | Semibold 600 | 1.2 | 0.16em | Uppercase. Sits above a heading to label the section or page. |
Fallback stack
Use this CSS stack so the brand still feels right when Manrope can’t load:
font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
Already wired in the portal’s Tailwind config under the font-sans token.
Secondary editorial typeface
For long-form editorial and reports where a serif sits more comfortably with extended reading, use Source Serif 4 (Adobe / Google Fonts, open source). Pair at a slightly smaller size than the equivalent Manrope step so the two voices balance.
Practical intervention, intelligent use of expertise.
Use sparingly. Aqualogic’s default voice is Manrope.
An 8 px base unit. Predictable, easy to math at any zoom level, and aligned with both Tailwind’s default spacing scale and most print grids.
