Guide
SSG Style & Color Guidelines
This document describes the visual design tokens of the built-in themes. All text colors meet WCAG 2.2 AA contrast (≥4.5:1 for normal text) against their intended background (audit FE-002).
Principles
- Accessibility first — WCAG 2.2 AA contrast for body and muted text.
- System fonts — themes use a native font stack (no external font CDN, no visitor IP leak to third parties; audit FE-003).
- CSS custom properties — every color/spacing token is a
--varin:root, so a theme can be re-skinned by overriding variables. - Responsive & mobile-first — layouts use relative units and flexbox/grid.
Themes
krowy — light, natural green
| Token | Value | Notes |
|---|---|---|
--color-bg-primary |
#f8faf5 |
page background |
--color-text |
dark green/near-black | body text |
--color-text-muted |
#4a6b4a |
meta/dates — 5.72:1 on bg-primary (AA) |
--font-family |
'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif |
system stack |
simple — modern dark
| Token | Value | Notes |
|---|---|---|
--color-bg-card |
#222222 |
card background |
--color-text-muted |
#9a9a9a |
meta/dates — 5.65:1 on card (AA) |
--color-accent |
#6366f1 |
links/buttons; paired with light text on the accent as a button background |
--font-family |
'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif |
system stack |
imd — editorial
| Token | Value | Notes |
|---|---|---|
--font-main |
'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif |
system fallback |
--font-head |
'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif |
system fallback |
Checking contrast
When changing a text color, verify it against its background:
- Normal text (< 18.66px, or < 24px non-bold): ≥ 4.5:1
- Large text (≥ 24px, or ≥ 18.66px bold): ≥ 3:1
Tools: WebAIM Contrast Checker or any WCAG contrast calculator. Accent colors used as links rely on additional non-color affordances (underline/hover); accent used as a button background must keep its label text at ≥ 4.5:1.
Fonts
Themes ship no bundled or CDN webfonts. The first family in each stack (Inter,
Manrope, Space Grotesk) is used only if the visitor already has it installed;
otherwise the browser falls back to the platform UI font. This keeps builds
self-contained and privacy-respecting.