# Zoe Dao-Kroeker — Design Guidelines (machine-readable)

Generated live from colors_and_type.css, last changed August 30, 2026.
Human version: https://zoedaokroeker.com/design-guidelines/

## Type usage

Open Sans — body copy, UI, and every heading level except the H1/hero display face.
Fontdiner Swanky — H1 and hero headlines ONLY, not the whole heading system.

## Known gaps

Stated plainly so nothing here gets invented to fill them:
- Voice and tone are NOT documented for this site. Do not infer a house style
  from existing copy.
- Contrast ratios are computed in the browser on the human page and are not
  reproduced in this export.

## Tokens

Full token set below, generated from colors_and_type.css — the single source of
truth. Do not use any colour, font, weight, size or spacing value not listed here.

```json
{
    "site": "Zoe Dao-Kroeker",
    "source": "https://zoedaokroeker.com/design-guidelines/",
    "note": "Generated directly from this theme's colors_and_type.css at page load — always current, not hand-maintained.",
    "colors": {
        "primitives": {
            "dark": "#2B1810",
            "white": "#FFFFFF",
            "neutral": "#F5F7F2",
            "coral": "#FF6B4D",
            "magenta": "#E8177B",
            "green": "#049A5C",
            "blue": "#2F7FFF",
            "grey-1": "#5C3829",
            "grey-2": "#885C49",
            "grey-3": "#A78576",
            "grey-4": "#C0B1AA",
            "grey-5": "#E1DDDB",
            "cta": "#FFB300",
            "cta-dark": "#C28800",
            "cta-light": "#FFF3D6",
            "blush": "#F5DBD6",
            "deep-teal": "#0F5754",
            "ochre": "#CB9D4D",
            "error": "#C4351E",
            "info": "#2D6CDF"
        },
        "roles": {
            "background": "var(--zoe-neutral)",
            "background_raised": "var(--zoe-white)",
            "background_inverse": "var(--zoe-dark)",
            "text": "var(--zoe-dark)",
            "text_muted": "var(--zoe-grey-1)",
            "text_on_dark": "var(--zoe-neutral)",
            "accent": "var(--zoe-blue)",
            "accent_deep": "var(--zoe-coral)",
            "cta": "var(--zoe-cta)",
            "border": "var(--zoe-grey-5)"
        }
    },
    "type": {
        "fonts": {
            "sans": "Open Sans — body copy, UI, and every heading level except the H1/hero display face",
            "display": "Fontdiner Swanky — H1 and hero headlines only, not the whole heading system"
        },
        "weights": {
            "regular": "400",
            "medium": null,
            "semibold": "600",
            "bold": "700",
            "black": "800"
        },
        "heading_weights": {
            "h1": "regular",
            "h2": "bold",
            "h3": "semibold"
        },
        "heading_elements_in_use": [
            "h1",
            "h2",
            "h3"
        ],
        "scale_px": {
            "h1": {
                "min_px": 30,
                "max_px": 52,
                "fluid": true,
                "line_height": "1.25",
                "pt_for_print_and_slides": 39
            },
            "h2": {
                "min_px": 26,
                "max_px": 36,
                "fluid": true,
                "line_height": "1.08",
                "pt_for_print_and_slides": 27
            },
            "h3": {
                "min_px": 19,
                "max_px": 24,
                "fluid": true,
                "line_height": "1.25",
                "pt_for_print_and_slides": 18
            },
            "h4": {
                "min_px": 16,
                "max_px": 18,
                "fluid": true,
                "line_height": "1.35",
                "pt_for_print_and_slides": 13.5
            },
            "lead": {
                "min_px": 20,
                "max_px": 22,
                "fluid": true,
                "line_height": "1.55",
                "pt_for_print_and_slides": 16.5
            },
            "body": {
                "min_px": 16,
                "max_px": 16,
                "fluid": false,
                "line_height": "1.75",
                "pt_for_print_and_slides": 12
            },
            "small": {
                "min_px": 14,
                "max_px": 14,
                "fluid": false,
                "line_height": "1.6",
                "pt_for_print_and_slides": 10.5
            },
            "micro": {
                "min_px": 12,
                "max_px": 12,
                "fluid": false,
                "line_height": "1.4",
                "pt_for_print_and_slides": 9
            }
        }
    },
    "spacing_px": [
        2,
        4,
        8,
        12,
        16,
        20,
        24,
        32,
        40,
        48,
        56,
        64,
        80,
        96,
        120
    ],
    "radius": {
        "none": "0",
        "sm": "6px",
        "md": "14px",
        "lg": "20px",
        "xl": "32px",
        "pill": "999px"
    }
}
```