/* ============================================================
SKILLS NATION — DESIGN TOKENS
Single source of truth. Everything else references this file.
Source: Skills Nation Brand Guideline v1.0 (Nov 2024), Figma
file "bussines" → pages "Skills Nation Brand Guideline" and
"Skills Nation Brand Assets".
Do not hardcode a hex value anywhere else. Add it here first.
============================================================ */
:root {
/* ---------- 1. BRAND CORE ---------------------------------
Skills Nation blue is the master brand color. It is the only
color allowed to carry the logo. */
--sn-blue-900: #3976E9; /* primary — logo, CTAs, key accents */
--sn-blue-700: #518DFF; /* hover / secondary fills */
--sn-blue-400: #7AA8FF; /* illustration, shapes */
--sn-blue-100: #BCD3FF; /* tinted backgrounds */
/* ---------- 2. INK & NEUTRALS -----------------------------
#194650 is the display ink from the brand guideline. Black is
reserved for body copy and the negative logo. */
--sn-ink: #194650; /* hero, headlines, sub-heads */
--sn-black: #000000; /* body, body accent, short content */
--sn-white: #FFFFFF;
--sn-off-white: #F5F5F5; /* the guideline's "do" background */
--sn-grey-500: #6B7F85; /* muted captions on light */
--sn-grey-200: #D8E0E2; /* hairlines, dividers */
/* Alpha ink — for dividers and muted copy over tints */
--sn-ink-72: rgba(25, 70, 80, 0.72);
--sn-ink-56: rgba(25, 70, 80, 0.56);
--sn-ink-16: rgba(25, 70, 80, 0.16);
--sn-ink-10: rgba(25, 70, 80, 0.10);
/* ---------- 3. PROGRAM PALETTES ---------------------------
Six programs, four steps each: 900 (solid) → 100 (wash).
900 = solid fills, big shapes. 700 = secondary shape.
400 = soft shape / duotone. 100 = page background wash. */
/* Skills Nation — master brand / anything cross-program */
--sn-p-skillsnation-900: #3976E9;
--sn-p-skillsnation-700: #518DFF;
--sn-p-skillsnation-400: #7AA8FF;
--sn-p-skillsnation-100: #BCD3FF;
/* HBCU Public Service */
--sn-p-hbcu-900: #316E69;
--sn-p-hbcu-700: #61C2C0;
--sn-p-hbcu-400: #80D6D4;
--sn-p-hbcu-100: #A7E2E1;
/* Out-of-School Program */
/* 900 was #FFB804 (guideline v1.0 label). Updated 2026-08-26: the current Figma
palette board and the official gold gradient wave both paint #F1BE47 — Malena
confirmed it supersedes. Contrast re-checked: ink on #F1BE47 ≈ 6.0:1 (on-900 rule
unchanged), white ≈ 1.7:1 (yellow-is-never-text rule unchanged). */
--sn-p-outofschool-900: #F1BE47;
--sn-p-outofschool-700: #FFD15E;
--sn-p-outofschool-400: #FFE196;
--sn-p-outofschool-100: #FFF1CC;
/* Youth Apprenticeship — REPALETTED 2026-09-08 from orange to the three
colours DOES asked for: #215E99, #A5C9EB and #C00001. The old ramp was
#ED7133 / F39565 / FFBF9F / FFE4D6.
900 and 400 are two of their three verbatim. 700 and 100 are derived, not
invented from scratch: 700 is 34% of the way from 900 toward 400, and 100
is 400 lifted 66% toward white — the same construction the other seven
ramps use.
MEASURED, and this ramp is a real improvement on the orange. #215E99 is
6.72:1 against white BOTH ways, so it carries small text on white and
white small text on itself. The orange was 3.00:1 and needed a separate
darkened ink (#CA4F12) plus a signed-off AA exception on the hero; both
are gone. Ink on 400 is 5.98 and on 100 is 8.68. */
--sn-p-youth-900: #215E99;
--sn-p-youth-700: #4E82B5;
--sn-p-youth-400: #A5C9EB;
--sn-p-youth-100: #E0EDF8;
/* The third colour. It is 6.48:1 on white, so it carries small text there —
and 1.04:1 on the 900 blue, which is invisible. NEVER put this on the
blue: that pairing is the one way to misuse this palette. */
--sn-p-youth-pop: #C00001;
/* Pre-Apprenticeship */
--sn-p-preapp-900: #F2ABA8;
--sn-p-preapp-700: #FFC7C4;
--sn-p-preapp-400: #FFDEDC;
--sn-p-preapp-100: #FFF0EF;
/* College Fellowship Program */
--sn-p-college-900: #8AD8C5;
--sn-p-college-700: #A2EFDD;
--sn-p-college-400: #BDFCEE;
--sn-p-college-100: #DEFFF8;
/* ---------- 4. TYPOGRAPHY ---------------------------------
Red Hat Display only. Five weights, each with a fixed job. */
--sn-font: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
--sn-w-light: 300; /* Hero — the signature Skills Nation voice */
--sn-w-regular: 400; /* Body */
--sn-w-medium: 500; /* Headlines, short content */
--sn-w-bold: 700; /* Body accent, buttons */
--sn-w-black: 900; /* Sub-heads, eyebrows — ALWAYS UPPERCASE */
/* Type scale, tuned for a 1080 × 1350 canvas viewed at
thumbnail size in a feed. Sizes are in px on purpose: the
canvas is a fixed pixel artboard, not a responsive page. */
--sn-fs-stat: 240px; /* single big number */
--sn-fs-display-1: 128px; /* hero, 2–4 words */
--sn-fs-display-2: 104px; /* hero, 5–8 words */
--sn-fs-display-3: 84px; /* hero, 9–14 words */
--sn-fs-headline: 64px;
--sn-fs-title: 48px;
--sn-fs-lead: 32px;
--sn-fs-eyebrow: 24px;
--sn-fs-body: 26px;
--sn-fs-body-sm: 22px;
--sn-fs-caption: 18px;
--sn-lh-tight: 0.92;
--sn-lh-snug: 1.05;
--sn-lh-normal: 1.25;
--sn-lh-body: 1.45;
--sn-ls-display: -0.03em; /* large light type needs tightening */
--sn-ls-eyebrow: 0.16em; /* black uppercase needs opening up */
/* ---------- 5. SPACE & SHAPE ------------------------------ */
--sn-space-1: 8px;
--sn-space-2: 16px;
--sn-space-3: 24px;
--sn-space-4: 32px;
--sn-space-5: 40px;
--sn-space-6: 56px;
--sn-space-7: 72px;
--sn-space-8: 96px;
--sn-space-9: 120px;
--sn-radius-sm: 16px;
--sn-radius-md: 24px;
--sn-radius-lg: 32px;
--sn-radius-xl: 48px;
--sn-radius-pill: 999px;
/* Logo clear space: 5X, where X = 1/10 of the logo's height.
For a 96px-tall logo that is 48px of clear space on all sides. */
--sn-logo-clearspace-ratio: 0.5;
/* ---------- 6. CANVAS ------------------------------------- */
--sn-canvas-w: 1080px;
--sn-canvas-h: 1350px;
--sn-canvas-pad: 88px; /* safe margin — never place type outside */
--sn-content-w: 904px; /* 1080 − 2 × 88 */
}
/* ============================================================
PROGRAM THEMES
Set data-program on the canvas element and every --p-* token
below resolves to that program's palette. This is the whole
point of the system: one attribute reskins a template.
…
Two contrast-checked tokens do the heavy lifting. Do not
substitute --p-900 for either of them:
--p-on-900 the only legible text colour ON the solid 900 fill.
--p-accent the only legible text colour in the program's hue
on a LIGHT ground. For the three pale palettes
(yellow, rose, mint) it resolves to ink on purpose:
those programs carry their colour in the shapes,
never in the type.
Small text (under 24px) always uses --sn-ink, never --p-accent.
============================================================ */
[data-program="skills-nation"] {
--p-900: var(--sn-p-skillsnation-900);
--p-700: var(--sn-p-skillsnation-700);
--p-400: var(--sn-p-skillsnation-400);
--p-100: var(--sn-p-skillsnation-100);
--p-accent: var(--sn-p-skillsnation-900); /* 4.2:1 on white — display & 24px+ only */
--p-on-900: var(--sn-white); /* 4.2:1 — large & bold text only */
--p-wash: color-mix(in srgb, var(--p-100) 50%, var(--sn-white));
--p-name: "Skills Nation";
}
[data-program="hbcu"] {
--p-900: var(--sn-p-hbcu-900);
--p-700: var(--sn-p-hbcu-700);
--p-400: var(--sn-p-hbcu-400);
--p-100: var(--sn-p-hbcu-100);
--p-accent: var(--sn-p-hbcu-900); /* 6.2:1 on white — safe at any size */
--p-on-900: var(--sn-white); /* 6.2:1 — safe at any size */
--p-wash: color-mix(in srgb, var(--p-100) 50%, var(--sn-white));
--p-name: "HBCU Public Service";
}
[data-program="outofschool"] {
--p-900: var(--sn-p-outofschool-900);
--p-700: var(--sn-p-outofschool-700);
--p-400: var(--sn-p-outofschool-400);
--p-100: var(--sn-p-outofschool-100);
--p-accent: var(--sn-ink); /* yellow is 1.7:1 on white — colour stays in the shapes */
--p-on-900: var(--sn-ink); /* 6.1:1 — NEVER white on yellow */
--p-wash: color-mix(in srgb, var(--p-100) 50%, var(--sn-white));
--p-name: "Out-of-School Program";
}
[data-program="youth"] {
--p-900: var(--sn-p-youth-900);
--p-700: var(--sn-p-youth-700);
--p-400: var(--sn-p-youth-400);
--p-100: var(--sn-p-youth-100);
--p-accent: var(--sn-p-youth-900); /* 6.72:1 on white — any size */
--p-on-900: var(--sn-white); /* 6.72:1 — white now passes; it did not on the orange */
--p-wash: color-mix(in srgb, var(--p-100) 50%, var(--sn-white));
--p-name: "Youth Apprenticeship";
}
[data-program="preapp"] {
--p-900: var(--sn-p-preapp-900);
--p-700: var(--sn-p-preapp-700);
--p-400: var(--sn-p-preapp-400);
--p-100: var(--sn-p-preapp-100);
--p-accent: var(--sn-ink); /* rose is 1.7:1 on white — colour stays in the shapes */
--p-on-900: var(--sn-ink); /* 5.6:1 */
--p-wash: color-mix(in srgb, var(--p-100) 50%, var(--sn-white));
--p-name: "Pre-Apprenticeship";
}
[data-program="college"] {
--p-900: var(--sn-p-college-900);
--p-700: var(--sn-p-college-700);
--p-400: var(--sn-p-college-400);
--p-100: var(--sn-p-college-100);
--p-accent: var(--sn-ink); /* mint is 1.6:1 on white — colour stays in the shapes */
--p-on-900: var(--sn-ink); /* 6.5:1 */
--p-wash: color-mix(in srgb, var(--p-100) 50%, var(--sn-white));
--p-name: "College Fellowship Program";
}
/* Fallback so a template without data-program still renders on brand */
.sn-canvas:not([data-program]) {
--p-accent: var(--sn-blue-900);
--p-900: var(--sn-blue-900);
--p-700: var(--sn-blue-700);
--p-400: var(--sn-blue-400);
--p-100: var(--sn-blue-100);
--p-on-900: var(--sn-white);
--p-wash: color-mix(in srgb, var(--p-100) 50%, var(--sn-white));
--p-name: "Skills Nation";
}
/* ============================================================
SITE GROUNDS
Sampled from the live skillsnation.org program cards, Aug 2026.
These are deeper and warmer than the guideline ramps — the site
pairs each ground with a "pop" circle borrowed from a different
family (navy + red, gold + cream, periwinkle + rose). That pairing
is what makes the cards read, so keep them together.
--g-bg the ground
--g-ink the only legible text colour on it
--g-pop the contrast circle / accent shape
BODY COPY: only on navy, gold, periwinkle, mint and blue. Orange
and teal clear 3:1 for display type but fail for anything under
24px — those two are for big type and photography, not paragraphs.
============================================================ */
[data-ground="navy"] { /* Pathways to Public Service */
--g-bg: #153E6E; --g-ink: #FFFFFF; --g-pop: #ED1C24; /* 11.1:1 — any size */
}
/* RENAMED FROM "orange" 2026-09-08, when DOES replaced Youth's palette. A key
called orange that renders blue is how the next person gets it wrong. */
[data-ground="yap-blue"] { /* Youth Apprenticeship */
--g-bg: #215E99; --g-ink: #FFFFFF; --g-pop: #A5C9EB; /* 6.72:1 — any size */
}
[data-ground="teal"] { /* civic / DC, the rowhouse card */
--g-bg: #629D98; --g-ink: #FFFFFF; --g-pop: #316E69; /* 3.1:1 — DISPLAY ONLY */
}
/* RETIRED ON SOCIAL (Aug 2026). #EAC05D is a real colour on
skillsnation.org so the token stays, but a full-bleed gold canvas was
reviewed and rejected — muddy at feed size, and it fights the type.
Reach for `mint` instead. Out-of-School keeps its yellow in shapes
via data-program="outofschool". */
[data-ground="gold"] { /* Out-of-School Program — site only */
--g-bg: #EAC05D; --g-ink: #194650; --g-pop: #FCE5AB; /* 6.2:1 — any size */
}
[data-ground="periwinkle"] { /* Pharmacy Technician */
--g-bg: #93AEFB; --g-ink: #194650; --g-pop: #FFE0DF; /* 4.8:1 — any size */
}
[data-ground="mint"] { /* College Fellowship */
--g-bg: #E4FFDD; --g-ink: #194650; --g-pop: #8AD8C5; /* 15.5:1 — any size */
}
[data-ground="rose"] { /* Pre-Apprenticeship */
--g-bg: #F2ABA8; --g-ink: #194650; --g-pop: #F7D3D2; /* 5.6:1 — any size */
}
[data-ground="blue"] { /* Skills Nation master */
--g-bg: #3976E9; --g-ink: #FFFFFF; --g-pop: #BCD3FF; /* 4.2:1 — 24px+ */
}