Foundation

Colours & Accent

White is the dominant background. Forest green and lime create emphasis and rhythm - not wallpaper. If in doubt, use white. Reach for colour only when you need to signal a transition or draw deliberate attention.

Core Palette

White

#FFFFFF

--color-white / bg-background

Primary page background. Default for all content sections.

Off-white

#EEF2E3

--color-off-white / bg-secondary

Subtle warm tint. Differentiates adjacent light sections without adding weight.

Lime

#C8F169

--color-lime / bg-primary

Brand accent. CTAs, hover states, active indicators, logo container, eyebrows on dark.

Lime soft

#EBF8C2

--color-lime-soft / bg-accent

Lightest green tint. Card fills, highlight bands, tag backgrounds, quote cards.

Forest

#043F2E

--color-forest / bg-forest

Deep green. Hero, testimonial, footer, and sidebar. Anchoring contrast.

Forest mid

#0A5C3D

--color-forest-mid

Mid-tone forest. Card backgrounds inside dark sections, bento wrappers.

Primary heading text

Ink

#043F2E

--color-ink / text-foreground

Headings and primary body text on light backgrounds.

Secondary label text

Ink muted

#4A7A62

--color-ink-muted / text-muted-foreground

Secondary text: labels, captions, metadata, eyebrows on light sections.

1px border

Border

#D4E8C2

--color-border / border-border

Subtle borders on cards, inputs, and dividers on light backgrounds.

Status Colours

Danger, warning, and info sit outside the brand greens but share their warmth. Terracotta red, amber, and muted steel blue echo the organic palette without competing with lime. Use soft tints for backgrounds and the saturated tokens for text, borders, and icons.

Danger

#C44B47

--color-danger / text-danger

Errors, destructive actions, and required field markers. Earthy terracotta red that complements the greens.

Danger soft

#F5E0DE

--color-danger-soft / bg-danger-soft

Alert backgrounds, error banners, and validation callouts. Pair with text-danger on badges and compact labels.

Warning

#A8651A

--color-warning / text-warning

Caution states, pending actions, and non-blocking alerts. Warm amber, distinct from lime.

Warning soft

#F8ECDC

--color-warning-soft / bg-warning-soft

Warning bands and subtle highlights. Pair with text-warning on badges and compact labels.

Info

#2D6A9F

--color-info / text-info

Informational states, neutral updates, and notification headings. Muted steel blue, distinct from brand greens.

Info soft

#E0ECF5

--color-info-soft / bg-info-soft

Info banners, notification backgrounds, and callouts. Pair with text-info on badges and compact labels.

Semantic Tokens

CSS custom properties in globals.css map brand colours to shadcn/ui semantic roles. Use Tailwind utilities where possible.

--background

bg-background#FFFFFFPage and card surfaces

--foreground

text-foreground#043F2EPrimary text on light surfaces

--primary

bg-primary#C8F169Primary buttons, logo container

--primary-foreground

text-primary-foreground#043F2EText on primary (lime) fills

--secondary

bg-secondary#EEF2E3Subtle section and panel backgrounds

--muted

bg-muted#EEF2E3Muted backgrounds (same as secondary)

--muted-foreground

text-muted-foreground#4A7A62Secondary text

--accent

bg-accent#EBF8C2Highlight bands, accent cards

--accent-foreground

text-accent-foreground#043F2EText on accent backgrounds

--danger

text-danger#C44B47Errors, destructive actions, required markers

--danger-soft

bg-danger-soft#F5E0DEError banners and validation backgrounds

--warning

text-warning#A8651ACaution labels and pending states

--warning-soft

bg-warning-soft#F8ECDCWarning bands and subtle highlights

--info

text-info#2D6A9FInformational labels and notification headings

--info-soft

bg-info-soft#E0ECF5Info banners and notification backgrounds

--destructive

text-destructive#C44B47shadcn/ui alias for danger

--border

border-border#D4E8C2Card, input, and divider borders

--ring

ring-ring#C8F169Focus rings on interactive elements

Section Backgrounds

Four section types create page rhythm. Dark and accent sections appear at most 2–3 times per page. Never place two dark sections back-to-back.

Default section

Everything in one place

Body copy uses muted foreground on light sections and white at 70% opacity on dark.

Default#FFFFFFMost sections

Subtle section

Everything in one place

Body copy uses muted foreground on light sections and white at 70% opacity on dark.

Subtle#EEF2E3Alternating light sections

Accent section

Everything in one place

Body copy uses muted foreground on light sections and white at 70% opacity on dark.

Accent#EBF8C2CTA bands, callouts

Dark section

Everything in one place

Body copy uses muted foreground on light sections and white at 70% opacity on dark.

Dark#043F2EHero, testimonial, footer

Foreground Colours

Text colour always follows the background. Ink on light, white on dark. Lime is reserved for accents: eyebrows, links, and syntax, not body copy.

text-foreground / text-ink

#043F2E

Headings, primary labels, and interactive text on white, off-white, and lime-soft backgrounds.

text-ink-muted / text-muted-foreground

#4A7A62

Body copy, captions, metadata, and eyebrows on light sections.

text-white

#FFFFFF

Headings and body on forest and forest-mid backgrounds. Never use ink on dark sections.

text-lime

#C8F169

Eyebrow labels, links, and emphasis on dark sections. Code syntax highlights.

text-primary-foreground

#043F2E

Text on lime-filled buttons and primary actions. Never white text on lime.

text-danger / text-destructive

#C44B47

Error messages, destructive labels, and required asterisks on light backgrounds.

text-warning

#A8651A

Caution labels and warning icons on light backgrounds. Use danger-soft or warning-soft fills behind copy.

text-info

#2D6A9F

Informational labels and notification headings on light backgrounds. Use info-soft fills behind copy.

Accent Usage

Lime accent on light and dark

Primary CTA: lime fill, ink text. One per section maximum.

Inline links use lime underlines on light backgrounds.

Focus ring uses lime via --ring.

What owners love

Eyebrow on dark sections

Status Usage

Danger, warning, and info on light backgrounds

Levy payment failed

Soft danger background with ink body copy and terracotta heading.

AGM date not confirmed

Soft warning background with amber heading and ink-muted body for longer copy.

Owner portal update available

Soft info background with steel blue heading and ink-muted body for longer copy.

Required fields use required danger text. Pending items can use warning inline.

Cards & Surfaces

Card styles by context

Bordered

Default card

On default or off-white sections. Subtle border, optional light shadow.

Accent

Lime-soft fill

Featured content, quote cards, highlight panels. No border.

Dark

Forest-mid fill

Inside dark sections and bento grids. White text, lime eyebrows.

Page Cadence

A typical landing page alternates light and dark to create rhythm without overwhelming colour. Dark sections anchor; accent bands energise.

HeroDark

Social proofDefault

FeaturesSubtle

CTA bandAccent

Feature rowsDefault

TestimonialDark

PricingSubtle

Final CTAAccent

FooterDark

Rules

White is the default. Coloured sections are deliberate moments, not the baseline.
Never use white text on lime buttons: always ink on lime.
Never use ink text on forest backgrounds: always white or white at reduced opacity.
Eyebrows: ink-muted on light sections, lime on dark sections.
Borders on light surfaces use the green-tinted border token, not grey.
No more than three dark sections per page. Never two dark sections in a row.
Logo: forest letterforms on lime container (light bg), forest container with white letterforms (primary bg), or lime letterforms on forest container (dark bg). Container rotated 15°; letterforms upright.
Danger, warning, and info are for status only. Never use them as section backgrounds or brand accents.
Status backgrounds: danger-soft, warning-soft, or info-soft with saturated text (text-danger, text-warning, or text-info) on badges and compact labels. Longer callout body copy may use ink-muted.