Design System v1.2 — components & code
Every token and class in the master CSS, rendered live next to the exact HTML/CSS you need to call it. Copy‑paste straight from the code blocks below.
⬇ Download design-system CSS ← Back to Brand System
.css files by default, so the master file is hosted with a .txt extension — the download button above forces the correct LUkraine-design-system-v1.2.css filename when you save it. Because the file is served as text/plain, browsers will refuse to load it directly via <link rel="stylesheet"> from this URL (strict MIME-type checking). Download it and host it inside your own project instead — once served with a real .css extension from your own server, it works exactly as shown on this page.
Colour tokens
CSS custom properties defined on :root. Use them anywhere via var(--lu-name) instead of hardcoding hex values.
| Swatch | Variable | Hex | Use |
|---|---|---|---|
--lu-red | #DD3F39 | Humanitarian pillar | |
--lu-blue | #0295D6 | Education pillar | |
--lu-purple | #8E44AD | Youth pillar | |
--lu-gold | #F9A027 | Cultural Bridges & Advocacy pillar | |
--lu-dark | #16384A | Primary text / dark backgrounds | |
--lu-beige | #FFFCFA | Page background | |
--lu-muted | #5C737F | Secondary text (WCAG AA on beige) | |
--lu-border | #E6EAEC | Hairlines, dividers |
.my-element{
color: var(--lu-dark);
background: var(--lu-beige);
border-color: var(--lu-border);
}Spacing & radius tokens
| Variable | Value |
|---|---|
--sp-1 | 4px |
--sp-2 | 8px |
--sp-3 | 12px |
--sp-4 | 16px |
--sp-6 | 24px |
--sp-8 | 32px |
--radius-sm | 6px |
--radius-md | 10px |
--radius-full | 999px (pills / circles) |
--transition-fast | 120ms ease |
Buttons — .lu-btn
<button class="lu-btn">Primary</button>
<button class="lu-btn lu-btn--ghost">Ghost</button>
<button class="lu-btn lu-btn--sm">Small</button>
<a class="lu-btn lu-btn--ghost lu-btn--sm" href="#">Ghost small link</a>Cards — .lu-card
Body copy goes here, using the page’s normal text styles.
<div class="lu-card">
<div class="lu-card__title">Card title</div>
<p>Body copy goes here.</p>
</div>Tags — .lu-tag
<span class="lu-tag">Draft</span>Pills — .lu-pill
<span class="lu-pill lu-pill--humanitarian">Humanitarian</span>
<span class="lu-pill lu-pill--education">Education</span>
<span class="lu-pill lu-pill--youth">Youth</span>
<span class="lu-pill lu-pill--culture">Culture & Advocacy</span>S — .lu-swatch
<span class="lu-swatch" style="background:#DD3F39"></span>
<span class="lu-swatch lu-swatch--active" style="background:#0295D6"></span>Accessibility
--lu-muted on --lu-beige and --lu-dark on white both pass WCAG AA (4.5:1) for normal text — verify any new colour pairing before shipping. --lu-gold on white fails AA for small text: pair it with dark text (see .lu-pill--culture) or use it as a background swatch only. Keep :focus-visible outlines; never set outline:none without an equally visible custom focus style in its place. The stylesheet also respects prefers-reduced-motion.