Folio Index

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#FFFFFF"
    foreground: "#111111"
    card: "#FFFFFF"
    card-foreground: "#111111"
    popover: "#FFFFFF"
    popover-foreground: "#111111"
    primary: "#111111"
    primary-foreground: "#FFFFFF"
    secondary: "#F0F0F0"
    secondary-foreground: "#111111"
    muted: "#F5F5F5"
    muted-foreground: "#555555"
    accent: "#D4F54A"
    accent-foreground: "#111111"
    destructive: "#E03232"
    destructive-foreground: "#000000"
    border: "#DCDCDC"
    input: "#DCDCDC"
    ring: "#111111"
    success: "#71BE96"
    success-foreground: "#111111"
    warning: "#F5A330"
    warning-foreground: "#111111"
    chart-1: "#71BE96"
    chart-2: "#B6CEDE"
    chart-3: "#D4F54A"
    chart-4: "#295A41"
    chart-5: "#94995A"
  palette:
    - { name: "white", hex: "#ffffff", role: "background" }
    - { name: "pitch-black", hex: "#111111", role: "frame / text / primary" }
    - { name: "acid-yellow", hex: "#d4f54a", role: "accent / CTA pill fill" }
    - { name: "mint-green", hex: "#71be96", role: "role-tag fill / success" }
    - { name: "bright-mint", hex: "#99f1c5", role: "lighter mint variant / data-viz" }
    - { name: "sky-blue", hex: "#b6cede", role: "role-tag fill / light vibrant" }
    - { name: "light-grey", hex: "#cacaca", role: "border / divider" }
    - { name: "off-white", hex: "#f8f8f8", role: "subtle background tint" }
    - { name: "mid-grey", hex: "#dcdcdc", role: "input / border / hairline" }
    - { name: "near-white", hex: "#ebebeb", role: "muted surface" }
    - { name: "forest-green", hex: "#295a41", role: "dark vibrant / data-viz" }
    - { name: "slate-teal", hex: "#89a6ae", role: "scored / muted teal" }
    - { name: "olive-muted", hex: "#94995a", role: "muted / data-viz" }
    - { name: "dark-muted-green", hex: "#223424", role: "dark muted" }
    - { name: "mid-grey-text", hex: "#555555", role: "muted foreground" }
    - { name: "warm-olive-light", hex: "#c4c07a", role: "data-viz series 5 dark mode" }
    - { name: "red-destructive", hex: "#e03232", role: "destructive / error" }
    - { name: "amber-warning", hex: "#f5a330", role: "warning" }
typography:

/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=DM%20Sans:wght@400;500;700&family=JetBrains%20Mono:wght@400;500;700&display=swap");

:root {
  --radius: 0.5rem;
  --font-heading: 'DM Sans', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --background: 0 0% 100%;
  --foreground: 0 0% 7%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 7%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 7%;
  --primary: 0 0% 7%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 94%;
  --secondary-foreground: 0 0% 7%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 33%;
  --accent: 72 90% 63%;
  --accent-foreground: 0 0% 7%;
  --destructive: 0 74% 54%;
  --destructive-foreground: 0 0% 0%;
  --border: 0 0% 86%;
  --input: 0 0% 86%;
  --ring: 0 0% 7%;
  --success: 149 37% 59%;
  --success-foreground: 0 0% 7%;
  --warning: 35 91% 57%;
  --warning-foreground: 0 0% 7%;
  --chart-1: 149 37% 59%;
  --chart-2: 204 38% 79%;
  --chart-3: 72 90% 63%;
  --chart-4: 149 37% 26%;
  --chart-5: 65 26% 48%;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.04);
  --shadow-md: 0 2px 6px 0 rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 12px 0 rgba(0,0,0,0.07);
  --shadow-xl: 0 8px 24px 0 rgba(0,0,0,0.08);
  --gradient-hero: linear-gradient(135deg, #ffffff 55%, #d4f54a 100%);
  --gradient-brand: linear-gradient(90deg, #71be96 0%, #d4f54a 100%);
  --gradient-subtle: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  --duration: 150ms;
  --duration-slow: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --button-radius: 9999px;
  --card-radius: 0rem;
  --input-radius: 0rem;
  --badge-radius: 9999px;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --heading-transform: none;