{
  "name": "ALSO Youth brand tokens",
  "version": "1.1.0",
  "status": "Final",
  "color": {
    "slate": {
      "value": "#536370",
      "name": "Logo Slate",
      "use": "Wordmark, headings, secondary text"
    },
    "slate-deep": {
      "value": "#36434C",
      "name": "Deep Slate",
      "use": "Body text, footer, dark panels"
    },
    "cloud": {
      "value": "#F3F5F4",
      "name": "Cloud",
      "use": "Page background"
    },
    "white": {
      "value": "#FFFFFF",
      "name": "White",
      "use": "Cards, text on dark"
    },
    "action": {
      "value": "#3065AE",
      "name": "Pride Blue (action)",
      "use": "Buttons and links. White text on it is 5.8:1. As link text it is 5.3:1 on Cloud."
    },
    "mist": {
      "value": "#E3E8EA",
      "name": "Mist",
      "use": "Hairlines and quiet fills, derived from Logo Slate"
    }
  },
  "pride": {
    "red": {
      "value": "#EC1C24",
      "name": "Pride Red"
    },
    "orange": {
      "value": "#F28325",
      "name": "Pride Orange"
    },
    "yellow": {
      "value": "#FCEE21",
      "name": "Pride Yellow"
    },
    "green": {
      "value": "#73BF44",
      "name": "Pride Green"
    },
    "blue": {
      "value": "#0085C8",
      "name": "Pride Blue"
    },
    "violet": {
      "value": "#93278F",
      "name": "Pride Violet"
    },
    "trans-blue": {
      "value": "#ABE1FA",
      "name": "Trans Light Blue"
    },
    "trans-pink": {
      "value": "#F7BFD7",
      "name": "Trans Pink"
    },
    "brown": {
      "value": "#8C6239",
      "name": "Brown"
    },
    "black": {
      "value": "#333333",
      "name": "Black"
    }
  },
  "ribbon": {
    "order": [
      "black",
      "brown",
      "trans-blue",
      "trans-pink",
      "white",
      "red",
      "orange",
      "yellow",
      "green",
      "blue",
      "violet"
    ],
    "note": "The Progress Pride order used by the logo's flag. The ribbon is the site's color and motion system."
  },
  "font": {
    "display": {
      "family": "Bricolage Grotesque",
      "source": "Google Fonts via next/font",
      "axes": "opsz 12 to 96, wdth 75 to 100, wght 200 to 800"
    },
    "body": {
      "family": "Figtree",
      "source": "Google Fonts via next/font",
      "axes": "wght 300 to 900"
    }
  },
  "radius": {
    "sm": "8px",
    "md": "14px",
    "lg": "22px",
    "xl": "32px",
    "pill": "999px"
  },
  "space": {
    "gutter": "16px",
    "section": "clamp(64px, 10vw, 128px)"
  },
  "motion": {
    "ease-out": "cubic-bezier(0.22, 1, 0.36, 1)",
    "duration-fast": "160ms",
    "duration-base": "320ms",
    "duration-slow": "700ms",
    "ribbon-wave": "14s",
    "reduced": "All motion stops under prefers-reduced-motion: reduce"
  },
  "personality": {
    "words": [
      "Welcoming",
      "Proud",
      "Hopeful"
    ],
    "tone": "Mostly playful, mostly loud and proud",
    "imagery": "A mix of illustration and photos. Every image already on the current alsoyouth.org is approved to post (2026-09-28). New photos of identifiable youth need consent."
  }
}