Growfye

Pro

From growfye.webflow.ioPublished Aug 18, 2026

Contemporary business template, editorial forest-green palette, warm pastel section bands, and Cabinet-Grotesk display type.

Overview

Growfye is a contemporary business/consulting template that pairs editorial restraint with warm, approachable color banding. The identity is built around a single deep forest-green ink (#062721) that carries all text, headings, and high-emphasis actions — there is no separate "brand accent" color. Visual interest comes instead from alternating full-width section backgrounds in three soft pastels (grey, mint, chartreuse), creating a rhythmic scroll cadence without competing with content.

The type system splits duties between two families: Cabinet-Grotesk for display headings (h1–h3), chosen for its geometric warmth and tight display tracking; Inter for all body text, labels, and UI chrome, chosen for its screen-optimised legibility at 16px. The contrast between a characterful grotesk and a neutral neo-grotesque is the typographic signature.

Colors

Typography

h1

familyCabinet-Grotesk

size3.5rem

weight700

leading1

h2

familyCabinet-Grotesk

size2.5rem

weight700

leading1.1

h3

familyCabinet-Grotesk

size1.5rem

weight700

leading1.1

body-md

familyInter

size1rem

weight400

leading1.6

body-sm

familyInter

size0.875rem

weight400

leading1.5

label

familyInter

size1rem

weight500

leading1.4

Spacing

Rounded & Borders

Components

button primary

button primary hover

button secondary

card

surface grey

surface mint

surface chartreuse

status success

status error

nav

Do's & Don'ts

Do alternate section backgrounds using the surface-* tokens — the color-band rhythm is the layout's signature device.
Do keep #062721 as the only text color. The green-ink-on-pastel contrast is the palette's unifying principle.
Do use Cabinet-Grotesk exclusively for headings (h1–h3) and Inter exclusively for body and UI.
Don't introduce additional accent colors. If a new state is needed, use success or error — do not create a sixth brand color.
Don't use fully-rounded pills on buttons. The 8px radius is intentional and distinguishes Growfye from consumer/playful templates.
Don't nest component variants. Define button-primary-hover as a sibling, not as a child of button-primary.
Don't set body text below 0.875rem (14px) — the body-sm token is the floor.
Accessibility caveat: The status-error badge (#062721 text on #E94D35 fill) measures 4.23:1 — just below the WCAG AA 4.5:1 threshold. This is inherited from the source template's error token. For strict AA compliance, darken error to #D13D26 or use error only as a border/ icon color with primary text on a neutral background.