Amber honey · Spruce green · Craft brand heritage

Forest green matched with golden amber

A warm heritage theme marrying deep forest greens with rich honey-amber accents and delicate editorial Garamond typography. Specially constructed for craft breweries, outdoor getaways, and artisanal brands.

Lifestyle & Organic Minimal & Brutalist Creative & Portfolios

00 — Color Identity

Accent roles

Each accent has a specific role in the design language. Click any swatch below to copy its hex value.

Amber Gold

#B45309

Primary accent, rules, CTAs

Spruce Green

#15803D

Secondary highlights, hover states

Honey Amber

#D97706

Link highlight, alert badges

Forest Green

#166534

Decorative highlights, detail

01 — Foundation

Color palette

Click any swatch to copy its hex value. Accent colors are shared across modes; surface tokens update when you switch between light and dark.

Accent — shared

Surfaces — dark mode

02 — Tokens

CSS variables

Drop this block into your project's global stylesheet. Includes shared accents plus light and dark surface tokens — toggle data-theme on <html> to switch.

03 — Typography

Type scale

Cormorant Garamond + Outfit

Cormorant Garamond creates highly refined, classic roman headlines with open kerning. Outfit handles clean, modern sans-serif body copy and labels.

DisplayCormorant Garamond Display

Amber Woods

Heading 1Cormorant Garamond H1

Section title

Heading 2Cormorant Garamond H2

Subsection label

BodyCormorant Garamond Regular

Use the text token for primary copy and text-mid for supporting paragraphs. Keep line height around 1.7–1.8 for readability in both light and dark modes.

LabelOutfit Medium

Eyebrow · Metadata · Captions

04 — Components

UI patterns

Common building blocks using the palette. Uppercase labels and heavy weight are part of the theme voice.

Buttons

Feature spotlight

Supporting copy sits in text-mid with a short accent rule underneath the headline.

Cards

New 01

Card title

Elevated panel with ember shadow fill and crimson badge accent.

Draft 02

Card title

Hover lifts the card slightly — keep motion on transform only.

Live 03

Card title

Forge background on the card header creates depth without extra imagery.

05 — Contrast & Harmony

Design theory

Mathematical color relationships and accessibility validation. Checks compliance against W3C WCAG 2.1 contrast ratios.

Theme Metrics

Core colors

4.5:1

Min contrast target

WCAG Contrast Validation

Primary Text on Bg

Target: ≥ 7:1 (AAA)

Pass AAA

Body Copy on Bg

Target: ≥ 4.5:1 (AA)

Pass AA

White Copy on Accent

Target: ≥ 3:1 (UI Component)

Pass AA

Accent Color Spectrum

Visual segments detailing color pairing distribution across accents.

Generates high-contrast analogous and monochromatic relationships to ensure active components are highly visible.

06 — Spacing & Geometry

Layout System

Proportional spacing scale guidelines. Built on a modular unit grid to govern container padding, margins, and layout gutters.

Proportional Spacing Scale

--sp-1

4px

--sp-2

8px

--sp-3

12px

--sp-4

16px

--sp-5

24px

--sp-6

32px

Layout Symmetrical Grid

Visual representation of wide-margin gutters and core content boundaries.

Gutter

Max Content Width (1240px)

Gutter

Leverages a symmetrical layout grid to structure blocks. Wide margins ensure high-fidelity reading focus across viewport transitions.

07 — Guidelines

Design principles

Core behavioral guidelines to preserve the design language's integrity when scaling templates.

Forest moss base

Structure background panels in deep spruce green to give the brand a warm, forest-like presence.

Honey amber rules

Keep borders and rule highlights golden amber, driving the reader to links and highlights.

Artisanal serif

Cormorant Garamond details provide historic prestige; apply in centered formats.