{
  "color": {
    "white": {
      "$value": "#FFFFFF",
      "$type": "color",
      "$description": "White — Primary page background, card surfaces, button text on green"
    },
    "snow": {
      "$value": "#F7F7F7",
      "$type": "color",
      "$description": "Snow — Secondary background, section fills, inactive states"
    },
    "eel": {
      "$value": "#3C3C3C",
      "$type": "color",
      "$description": "Eel — Primary text, headings, body copy"
    },
    "eel-light": {
      "$value": "#4B4B4B",
      "$type": "color",
      "$description": "Eel Light — Slightly lighter body text variant"
    },
    "slug": {
      "$value": "#777777",
      "$type": "color",
      "$description": "Slug — Secondary text, placeholder text, muted labels"
    },
    "swan": {
      "$value": "#E5E5E5",
      "$type": "color",
      "$description": "Swan — Borders, dividers, disabled state backgrounds"
    },
    "green": {
      "$value": "#58CC02",
      "$type": "color",
      "$description": "Green — Primary action buttons, active states, progress, success indicators"
    },
    "green-hover": {
      "$value": "#4CAF00",
      "$type": "color",
      "$description": "Green Hover — Hover state for primary green elements"
    },
    "green-dark": {
      "$value": "#46A302",
      "$type": "color",
      "$description": "Green Dark — Pressed/active state for primary green elements, 3D button shadow"
    },
    "bee": {
      "$value": "#FFC800",
      "$type": "color",
      "$description": "Bee — Streak indicators, XP badges, yellow accent, warning"
    },
    "fox": {
      "$value": "#FF9600",
      "$type": "color",
      "$description": "Fox — Streak fire, orange accent, animated highlights"
    },
    "cardinal": {
      "$value": "#FF4B4B",
      "$type": "color",
      "$description": "Cardinal — Error states, hearts/lives indicator, destructive actions"
    },
    "macaw": {
      "$value": "#1CB0F6",
      "$type": "color",
      "$description": "Macaw — Info indicators, links, blue accent, skill tree highlights"
    },
    "regalia": {
      "$value": "#CE82FF",
      "$type": "color",
      "$description": "Regalia — Super badge, premium accent, purple highlights"
    },
    "basil": {
      "$value": "#1899D6",
      "$type": "color",
      "$description": "Basil — Info background, blue dark variant"
    }
  },
  "gradient": {
    "green": {
      "$value": "linear-gradient(180deg, #58CC02 0%, #46A302 100%)",
      "$type": "gradient",
      "$description": "Green Gradient — Primary button gradient, progress fills"
    },
    "super": {
      "$value": "linear-gradient(135deg, #CE82FF 0%, #1CB0F6 100%)",
      "$type": "gradient",
      "$description": "Super Gradient — Super/Premium badges and accents"
    },
    "warm": {
      "$value": "linear-gradient(135deg, #FF9600 0%, #FFC800 100%)",
      "$type": "gradient",
      "$description": "Warm Gradient — Streak fire, warm decorative backgrounds"
    }
  },
  "font": {
    "feather-bold": {
      "$value": "Feather Bold",
      "$type": "fontFamily",
      "$description": "Primary display and heading typeface. Rounded letterforms reinforce the brand's approachable personality. Substitute: Nunito."
    },
    "feather": {
      "$value": "Feather",
      "$type": "fontFamily",
      "$description": "Body and UI text. The workhorse of the UI with a wide weight range. Substitute: Nunito."
    },
    "source-code-pro": {
      "$value": "Source Code Pro",
      "$type": "fontFamily",
      "$description": "Monospaced text for code snippets and technical details. Substitute: ui-monospace."
    }
  },
  "typography": {
    "display": {
      "$value": {
        "fontFamily": "Feather Bold",
        "fontSize": "32px",
        "fontWeight": 700,
        "lineHeight": 1.17,
        "letterSpacing": "-0.02em"
      },
      "$type": "typography",
      "$description": "Display — 32px, line-height 1.17, letter-spacing -0.02em, for hero headlines"
    },
    "heading-lg": {
      "$value": {
        "fontFamily": "Feather Bold",
        "fontSize": "28px",
        "fontWeight": 700,
        "lineHeight": 1.2,
        "letterSpacing": "-0.02em"
      },
      "$type": "typography",
      "$description": "Heading Large — 28px, line-height 1.2, letter-spacing -0.02em"
    },
    "heading": {
      "$value": {
        "fontFamily": "Feather Bold",
        "fontSize": "24px",
        "fontWeight": 700,
        "lineHeight": 1.2,
        "letterSpacing": "-0.02em"
      },
      "$type": "typography",
      "$description": "Heading — 24px, line-height 1.2, letter-spacing -0.02em"
    },
    "body-lg": {
      "$value": {
        "fontFamily": "Feather",
        "fontSize": "20px",
        "fontWeight": 400,
        "lineHeight": 1.4
      },
      "$type": "typography",
      "$description": "Body Large — 20px, line-height 1.4"
    },
    "body": {
      "$value": {
        "fontFamily": "Feather",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "-0.01em"
      },
      "$type": "typography",
      "$description": "Body — 16px, line-height 1.5, letter-spacing -0.01em, default body text"
    },
    "body-sm": {
      "$value": {
        "fontFamily": "Feather",
        "fontSize": "15px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "-0.01em"
      },
      "$type": "typography",
      "$description": "Body Small — 15px, line-height 1.5, letter-spacing -0.01em"
    },
    "body-xs": {
      "$value": {
        "fontFamily": "Feather",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "-0.01em"
      },
      "$type": "typography",
      "$description": "Body XS — 14px, line-height 1.5, letter-spacing -0.01em"
    },
    "caption": {
      "$value": {
        "fontFamily": "Feather",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": 1.5
      },
      "$type": "typography",
      "$description": "Caption — 12px, line-height 1.5, for meta info and labels"
    }
  },
  "spacing": {
    "4": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing 4px"
    },
    "8": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing 8px"
    },
    "12": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing 12px"
    },
    "16": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing 16px"
    },
    "20": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Spacing 20px"
    },
    "24": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing 24px"
    },
    "32": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing 32px"
    },
    "40": {
      "$value": "40px",
      "$type": "dimension",
      "$description": "Spacing 40px"
    },
    "48": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing 48px"
    },
    "64": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "Spacing 64px"
    },
    "80": {
      "$value": "80px",
      "$type": "dimension",
      "$description": "Spacing 80px"
    }
  },
  "radius": {
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius sm"
    },
    "md": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Border radius md"
    },
    "lg": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Border radius lg — cards"
    },
    "xl": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Border radius xl"
    },
    "2xl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Border radius 2xl — illustrations"
    },
    "pill": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius pill — buttons, badges"
    }
  },
  "shadow": {
    "sm": {
      "$value": "0 1px 2px rgba(0, 0, 0, 0.05)",
      "$type": "shadow",
      "$description": "Shadow small — subtle card lift"
    },
    "md": {
      "$value": "0 4px 12px rgba(0, 0, 0, 0.08)",
      "$type": "shadow",
      "$description": "Shadow medium — card elevation"
    },
    "lg": {
      "$value": "0 8px 24px rgba(0, 0, 0, 0.1)",
      "$type": "shadow",
      "$description": "Shadow large — modal and overlay elevation"
    },
    "button": {
      "$value": "0 4px 0 #46A302",
      "$type": "shadow",
      "$description": "Button shadow — 3D depth effect on primary green buttons"
    },
    "button-pressed": {
      "$value": "0 2px 0 #46A302",
      "$type": "shadow",
      "$description": "Button pressed shadow — reduced depth on active press"
    }
  },
  "layout": {
    "section-gap": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Gap between major content sections"
    },
    "card-padding": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Internal padding for card components"
    },
    "element-gap": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Gap between distinct UI elements within a section"
    },
    "max-content-width": {
      "$value": "960px",
      "$type": "dimension",
      "$description": "Maximum content width for centered layout"
    }
  },
  "surface": {
    "white": {
      "$value": "#FFFFFF",
      "$type": "color",
      "$description": "Surface level 0: Primary page background, the clean white canvas"
    },
    "snow": {
      "$value": "#F7F7F7",
      "$type": "color",
      "$description": "Surface level 1: Secondary sections, alternating fills"
    },
    "swan": {
      "$value": "#E5E5E5",
      "$type": "color",
      "$description": "Surface level 2: Borders, dividers, disabled states"
    }
  },
  "$extensions": {
    "com.refero.extraction": {
      "url": "https://duolingo.com",
      "siteName": "Duolingo",
      "extractedAt": "2026-05-13T02:25:00.000Z",
      "variant": "extended"
    },
    "com.design-md-editor.source": {
      "url": "https://www.duolingo.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}