/* ============================================================================
Woodlark — Colors & Type
The single source of truth for brand tokens. Import this file anywhere.
Hero is the deep purple (#4D0E88). Everything else orbits a near-black ground.
White-on-dark is the default; light backgrounds are an exception.
============================================================================ */
/* -------- Webfonts -- DM Sans is the Woodlark brand font ------------------- */
/* Local brand font files. The variable TTFs cover the full optical-size and
weight ranges in one file each. DM Mono is still pulled from Google Fonts
until a local file is supplied. */
@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 100 1000;
font-display: swap;
src: url("fonts/DMSans-VariableFont_opsz_wght.ttf") format("truetype-variations"),
url("fonts/DMSans-VariableFont_opsz_wght.ttf") format("truetype");
font-variation-settings: "opsz" 14;
}
@font-face {
font-family: "DM Sans";
font-style: italic;
font-weight: 100 1000;
font-display: swap;
src: url("fonts/DMSans-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"),
url("fonts/DMSans-Italic-VariableFont_opsz_wght.ttf") format("truetype");
font-variation-settings: "opsz" 14;
}
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap");
:root {
/* ------------------------------------------------------------------------
Brand palette — primitive tokens
Sourced from the supplied #MindfulPalettes No.272 swatches + the
near-black ground used across all logo lockups.
------------------------------------------------------------------------ */
--wl-ink: #0E0B14; /* near-black ground, slightly cool-purple */
--wl-ink-2: #171412; /* warm near-black from palette */
--wl-ink-3: #1F1B26; /* elevated surface on dark */
--wl-bone: #F2F2ED; /* cream off-white from palette */
--wl-bone-2: #E6E4DC; /* one step warmer than bone */
--wl-paper: #FFFFFF;
--wl-purple: #4D0E88; /* HERO — Woodlark purple */
--wl-purple-2: #6B1FB8; /* hover / lifted state */
--wl-purple-3: #2A0850; /* pressed / depth */
--wl-violet: #983FB2; /* secondary purple */
--wl-violet-2: #B870D0; /* tint */
--wl-citron: #E6D943; /* yellow accent — energy */
--wl-citron-2: #F2E670; /* tint */
--wl-fern: #11CC55; /* green accent — go / live */
--wl-fern-2: #3FE07A; /* tint */
/* Strapline gradient stops — "Growth, by design".
The anchor strapline runs blue → mid-violet → pink across the
whole Woodlark headline brand, above all four sub-brands. */
--wl-blue: #5170FF; /* strapline start */
--wl-mid: #B06BDF; /* strapline midpoint */
--wl-pink: #FF66C4; /* strapline end */
/* Greys — neutral scale running from ink to bone */
--wl-grey-900: #1A1720;
--wl-grey-800: #26222F;
--wl-grey-700: #3A3545;
--wl-grey-600: #5A5466;
--wl-grey-500: #807A8B;
--wl-grey-400: #A8A2B0;
--wl-grey-300: #CFCAD2;
--wl-grey-200: #E6E2E8;
--wl-grey-100: #F1EEF3;
/* ------------------------------------------------------------------------
Semantic colors — use these in product code, not the primitives above.
Defined for the default DARK surface (white-on-dark is the brand norm).
------------------------------------------------------------------------ */
--bg: var(--wl-ink);
--bg-elev: var(--wl-ink-3);
--bg-sunken: #08060C;
--fg: var(--wl-bone); /* primary text on dark */
--fg-muted: var(--wl-grey-400); /* secondary text */
--fg-faint: var(--wl-grey-600); /* meta, hints */
--fg-inverse: var(--wl-ink);
--border: rgba(255,255,255,0.08);
--border-strong: rgba(255,255,255,0.16);
--accent: var(--wl-purple);
--accent-fg: var(--wl-bone);
--accent-hover: var(--wl-purple-2);
--accent-active: var(--wl-purple-3);
--highlight: var(--wl-citron);
--success: var(--wl-fern);
--warning: var(--wl-citron);
--danger: #E5484D;
/* ------------------------------------------------------------------------
Sub-brand accents
Each of the four sub-brands owns one stop from the strapline + hero ladder.
Use `[data-product="ai|studio|3pl|growth"]` on a page or section root
to swap --accent in semantically.
AI → bright purple #A56CFF (flagship, lifted off near-black)
Growth → mid-violet #B06BDF (strapline midpoint, expansion)
Studio → pink #FF66C4 (strapline end, warmest)
3PL → blue #5170FF (strapline start, cool / operational)
A hover/active pair is derived for each so call-to-actions and links
pick up the sub-brand's voice without a one-off override.
------------------------------------------------------------------------ */
--brand-ai: #A56CFF;
--brand-ai-hover: #B888FF;
--brand-ai-tint: rgba(165, 108, 255, 0.18);
--brand-growth: #B06BDF;
--brand-growth-hover: #C685E7;
--brand-growth-tint: rgba(176, 107, 223, 0.18);
--brand-studio: #FF66C4;
--brand-studio-hover: #FF85D2;
--brand-studio-tint: rgba(255, 102, 196, 0.18);
--brand-3pl: #5170FF;
--brand-3pl-hover: #6E89FF;
--brand-3pl-tint: rgba(81, 112, 255, 0.18);
/* ------------------------------------------------------------------------
Brand gradients — from the supplied palette source.
Use sparingly: hero panels, key page transitions, occasional cards.
------------------------------------------------------------------------ */
--grad-aurora: linear-gradient(180deg, #E6D943 0%, #983FB2 55%, #4D0E88 100%);
--grad-violet: linear-gradient(180deg, #983FB2 0%, #4D0E88 100%);
--grad-eclipse: linear-gradient(180deg, #983FB2 0%, #4D0E88 50%, #171412 100%);
--grad-meadow: linear-gradient(180deg, #11CC55 0%, #4D0E88 100%);
--grad-sun: linear-gradient(180deg, #F2F2ED 0%, #E6D943 100%);
--grad-spotlight: radial-gradient(60% 50% at 50% 0%, #6B1FB8 0%, #4D0E88 40%, #0E0B14 100%);
/* The strapline gradient — the single most important gradient in the
system. Used for the words "Growth, by design" set in DM Sans, and
for the headline gradient on hero panels that need to convey range. */
--grad-strapline: linear-gradient(90deg, #5170FF 0%, #B06BDF 50%, #FF66C4 100%);
/* ------------------------------------------------------------------------
Type system — DM Sans is THE Woodlark brand font.
Wordmark: WOODLARK in DM Sans Bold (700), uppercase, +0.18em tracking.
Brand extension (AI / STUDIO / 3PL) in DM Sans Regular (400),
also uppercase — always set as the suffix to WOODLARK.
Display: DM Sans 700 / 500 / 400 across the scale.
Body: DM Sans 400 / 500 — same family, optical-size aware.
Mono: DM Mono — stays in the DM family for ticker, data, code.
Manrope is kept as a fallback only for environments without DM Sans.
------------------------------------------------------------------------ */
--font-display: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
/* Type scale — fluid-ish, designed for product + marketing */
--t-display-xxl: 88px; /* hero billboard */
--t-display-xl: 64px; /* page hero */
--t-display-l: 48px;
--t-display-m: 36px;
--t-h1: 32px;
--t-h2: 24px;
--t-h3: 20px;
--t-h4: 17px;
--t-body: 16px;
--t-body-sm: 14px;
--t-caption: 12px;
--t-micro: 11px;
--lh-tight: 1.05;
--lh-snug: 1.20;
--lh-normal: 1.45;
--lh-loose: 1.65;
--tr-tight: -0.03em; /* display */
--tr-snug: -0.015em; /* headings */
--tr-normal: 0;
--tr-wide: 0.04em; /* small caps eyebrow labels */
--tr-mark: 0.18em; /* wordmark, button labels, eyebrow */
/* ------------------------------------------------------------------------
Radii / shadow / spacing — geometric, restrained
------------------------------------------------------------------------ */
--r-xs: 4px;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 18px;
--r-xl: 28px;
--r-2xl: 40px;
--r-pill: 999px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
--shadow-md: 0 6px 18px rgba(0,0,0,0.35);
--shadow-lg: 0 18px 48px rgba(0,0,0,0.45);
--shadow-glow: 0 0 0 1px rgba(152,63,178,0.40), 0 12px 40px rgba(77,14,136,0.35);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
--space-9: 56px;
--space-10: 72px;
--space-11: 96px;
}
/* --- Light surface override (use sparingly — brand default is dark) ----- */
[data-surface="light"], .wl-light {
--bg: var(--wl-bone);
--bg-elev: var(--wl-paper);
--bg-sunken: var(--wl-bone-2);
--fg: var(--wl-ink);
--fg-muted: var(--wl-grey-600);
--fg-faint: var(--wl-grey-500);
--fg-inverse: var(--wl-bone);
--border: rgba(14,11,20,0.10);
--border-strong: rgba(14,11,20,0.20);
}
/* --- Sub-brand scoping --------------------------------------------------- */
[data-product="ai"] { --accent: var(--brand-ai); --accent-hover: var(--brand-ai-hover); --accent-tint: var(--brand-ai-tint); }
[data-product="growth"] { --accent: var(--brand-growth); --accent-hover: var(--brand-growth-hover); --accent-tint: var(--brand-growth-tint); }
[data-product="studio"] { --accent: var(--brand-studio); --accent-hover: var(--brand-studio-hover); --accent-tint: var(--brand-studio-tint); }
[data-product="3pl"] { --accent: var(--brand-3pl); --accent-hover: var(--brand-3pl-hover); --accent-tint: var(--brand-3pl-tint); }
/* ============================================================================
Semantic element styles — drop on any page and headings auto-style.
============================================================================ */
html, body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--t-body);
line-height: var(--lh-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, .wl-h1, h2, .wl-h2, h3, .wl-h3, h4, .wl-h4 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: var(--tr-snug);
line-height: var(--lh-tight);
text-wrap: balance;
margin: 0;
}
h1, .wl-h1 { font-size: var(--t-display-l); letter-spacing: var(--tr-tight); }
h2, .wl-h2 { font-size: var(--t-display-m); }
h3, .wl-h3 { font-size: var(--t-h2); }
h4, .wl-h4 { font-size: var(--t-h3); }
.wl-display-xxl { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-xxl); letter-spacing: var(--tr-tight); line-height: 0.95; }
.wl-display-xl { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-xl); letter-spacing: var(--tr-tight); line-height: var(--lh-tight); }
.wl-display-l { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-l); letter-spacing: var(--tr-tight); line-height: var(--lh-tight); }
p, .wl-body { font-size: var(--t-body); line-height: var(--lh-normal); margin: 0; text-wrap: pretty; }
.wl-body-sm { font-size: var(--t-body-sm); line-height: var(--lh-normal); }
.wl-caption { font-size: var(--t-caption); line-height: var(--lh-normal); color: var(--fg-muted); }
.wl-micro { font-size: var(--t-micro); line-height: var(--lh-normal); color: var(--fg-faint); }
/* Eyebrow / kicker label — small all-caps, wide-tracked. Used everywhere. */
.wl-eyebrow {
font-family: var(--font-display);
font-size: var(--t-caption);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tr-mark);
color: var(--fg-muted);
}
code, kbd, pre, .wl-mono {
font-family: var(--font-mono);
font-feature-settings: "calt" 0;
}
a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--wl-violet-2); }
/* ----------------------------------------------------------------------------
The Woodlark wordmark.
WOODLARK — DM Sans Bold (700), uppercase, +0.18em tracking.
AI / STUDIO / 3PL — DM Sans Regular (400), uppercase, same tracking.
Always uppercase. Always paired with a thin mid-dot " · " separator
when the brand extension appears.
Usage:
WOODLARK
WOODLARK · AI
---------------------------------------------------------------------------- */
.wl-wordmark {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: var(--tr-mark);
text-transform: uppercase;
}
.wl-wordmark__ext { font-weight: 400; }
/* ----------------------------------------------------------------------------
The strapline — "Growth, by design".
Sits ABOVE the four sub-brands as the anchor for the whole Woodlark business.
Set in DM Sans Regular (400), sentence-cased, with the brand gradient
applied as the type fill. Never set with a flat color in marketing.
Usage:
Growth, by design
---------------------------------------------------------------------------- */
.wl-strapline {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.18;
background: var(--grad-strapline);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
padding-bottom: 0.06em;
display: inline-block;
}
/* Mono fallback for environments where -webkit-background-clip is unsupported.
In that case prefer the solid mid-violet stop. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.wl-strapline { color: var(--wl-mid); -webkit-text-fill-color: currentColor; }
}