{
  "$name": "Material Design 3",
  "$description": "Google's Material Design 3 (Material You) — dynamic color, expressive motion, adaptive layouts.",
  "color": {
    "$type": "color",
    "primary": { "$value": "#6750A4", "$description": "Primary key color — used for prominent buttons, active states, FABs" },
    "on-primary": { "$value": "#FFFFFF", "$description": "Text/icons on primary color" },
    "primary-container": { "$value": "#EADDFF", "$description": "Tonal container for primary — used for filled tonal buttons, cards" },
    "on-primary-container": { "$value": "#21005D", "$description": "Text/icons on primary container" },
    "secondary": { "$value": "#625B71", "$description": "Secondary key color — less prominent components like filter chips" },
    "on-secondary": { "$value": "#FFFFFF", "$description": "Text/icons on secondary color" },
    "secondary-container": { "$value": "#E8DEF8", "$description": "Tonal container for secondary — navigation items, toggles" },
    "on-secondary-container": { "$value": "#1D192B", "$description": "Text/icons on secondary container" },
    "tertiary": { "$value": "#7D5260", "$description": "Tertiary key color — complementary accent for balance" },
    "on-tertiary": { "$value": "#FFFFFF", "$description": "Text/icons on tertiary color" },
    "tertiary-container": { "$value": "#FFD8E4", "$description": "Tonal container for tertiary" },
    "on-tertiary-container": { "$value": "#31111D", "$description": "Text/icons on tertiary container" },
    "error": { "$value": "#B3261E", "$description": "Error color — validation errors, destructive actions" },
    "on-error": { "$value": "#FFFFFF", "$description": "Text/icons on error color" },
    "error-container": { "$value": "#F9DEDC", "$description": "Tonal container for error states" },
    "on-error-container": { "$value": "#410E0B", "$description": "Text/icons on error container" },
    "background": { "$value": "#FFFBFE", "$description": "App background — lowest layer" },
    "on-background": { "$value": "#1C1B1F", "$description": "Text/icons on background" },
    "surface": { "$value": "#FFFBFE", "$description": "Default surface for cards, sheets, dialogs" },
    "on-surface": { "$value": "#1C1B1F", "$description": "Text/icons on surface" },
    "surface-variant": { "$value": "#E7E0EC", "$description": "Lower-emphasis surface — inputs, dividers" },
    "on-surface-variant": { "$value": "#49454F", "$description": "Secondary text/icons on surface" },
    "outline": { "$value": "#79747E", "$description": "Prominent border — text fields, dividers" },
    "outline-variant": { "$value": "#CAC4D0", "$description": "Subtle border — decorative dividers" },
    "inverse-surface": { "$value": "#313033", "$description": "Inverse surface for snackbars, tooltips" },
    "inverse-on-surface": { "$value": "#F4EFF4", "$description": "Text on inverse surface" },
    "inverse-primary": { "$value": "#D0BCFF", "$description": "Primary color in inverse context" },
    "surface-dim": { "$value": "#DED8E1", "$description": "Dimmed surface — scrolled content behind app bars" },
    "surface-bright": { "$value": "#FEF7FF", "$description": "Bright surface — highest luminance surface" },
    "surface-container-lowest": { "$value": "#FFFFFF", "$description": "Lowest-emphasis container surface" },
    "surface-container-low": { "$value": "#F7F2FA", "$description": "Low-emphasis container surface" },
    "surface-container": { "$value": "#F3EDF7", "$description": "Default container surface — cards, dialogs" },
    "surface-container-high": { "$value": "#ECE6F0", "$description": "High-emphasis container — navigation bars, FABs" },
    "surface-container-highest": { "$value": "#E6E0E9", "$description": "Highest-emphasis container — text fields, search bars" },
    "scrim": { "$value": "#000000", "$description": "Scrim overlay behind modals and dialogs" },
    "shadow": { "$value": "#000000", "$description": "Shadow color for elevation" }
  },
  "color-dark": {
    "$type": "color",
    "primary": { "$value": "#D0BCFF", "$description": "Dark mode primary — lighter purple for visibility" },
    "on-primary": { "$value": "#381E72", "$description": "Dark mode text/icons on primary" },
    "primary-container": { "$value": "#4F378B", "$description": "Dark mode primary container" },
    "on-primary-container": { "$value": "#EADDFF", "$description": "Dark mode text on primary container" },
    "secondary": { "$value": "#CCC2DC", "$description": "Dark mode secondary" },
    "on-secondary": { "$value": "#332D41", "$description": "Dark mode text on secondary" },
    "secondary-container": { "$value": "#4A4458", "$description": "Dark mode secondary container" },
    "on-secondary-container": { "$value": "#E8DEF8", "$description": "Dark mode text on secondary container" },
    "tertiary": { "$value": "#EFB8C8", "$description": "Dark mode tertiary" },
    "on-tertiary": { "$value": "#492532", "$description": "Dark mode text on tertiary" },
    "tertiary-container": { "$value": "#633B48", "$description": "Dark mode tertiary container" },
    "on-tertiary-container": { "$value": "#FFD8E4", "$description": "Dark mode text on tertiary container" },
    "error": { "$value": "#F2B8B5", "$description": "Dark mode error" },
    "on-error": { "$value": "#601410", "$description": "Dark mode text on error" },
    "error-container": { "$value": "#8C1D18", "$description": "Dark mode error container" },
    "on-error-container": { "$value": "#F9DEDC", "$description": "Dark mode text on error container" },
    "background": { "$value": "#1C1B1F", "$description": "Dark mode background" },
    "on-background": { "$value": "#E6E1E5", "$description": "Dark mode text on background" },
    "surface": { "$value": "#1C1B1F", "$description": "Dark mode surface" },
    "on-surface": { "$value": "#E6E1E5", "$description": "Dark mode text on surface" },
    "surface-variant": { "$value": "#49454F", "$description": "Dark mode surface variant" },
    "on-surface-variant": { "$value": "#CAC4D0", "$description": "Dark mode text on surface variant" },
    "outline": { "$value": "#938F99", "$description": "Dark mode outline" },
    "outline-variant": { "$value": "#49454F", "$description": "Dark mode subtle outline" },
    "inverse-surface": { "$value": "#E6E1E5", "$description": "Dark mode inverse surface" },
    "inverse-on-surface": { "$value": "#313033", "$description": "Dark mode text on inverse surface" },
    "inverse-primary": { "$value": "#6750A4", "$description": "Dark mode inverse primary" },
    "surface-dim": { "$value": "#1C1B1F", "$description": "Dark mode dimmed surface" },
    "surface-bright": { "$value": "#3B383E", "$description": "Dark mode bright surface" },
    "surface-container-lowest": { "$value": "#0F0D13", "$description": "Dark mode lowest container" },
    "surface-container-low": { "$value": "#211F26", "$description": "Dark mode low container" },
    "surface-container": { "$value": "#252329", "$description": "Dark mode default container" },
    "surface-container-high": { "$value": "#2B2930", "$description": "Dark mode high container" },
    "surface-container-highest": { "$value": "#36343B", "$description": "Dark mode highest container" },
    "scrim": { "$value": "#000000", "$description": "Scrim overlay — same in dark mode" },
    "shadow": { "$value": "#000000", "$description": "Shadow color — same in dark mode" }
  },
  "typography": {
    "font-family": {
      "$type": "fontFamily",
      "display": { "$value": "\"Google Sans\", \"Roboto\", system-ui, sans-serif", "$description": "Display and headline font — Google Sans for brand expression" },
      "body": { "$value": "\"Roboto\", system-ui, -apple-system, sans-serif", "$description": "Body, title, and label font — Roboto for readability" },
      "mono": { "$value": "\"Roboto Mono\", \"Consolas\", monospace", "$description": "Monospace for code and tabular data" }
    },
    "font-size": {
      "$type": "dimension",
      "display-large": { "$value": "57px", "$description": "Display Large — hero text, largest display style" },
      "display-medium": { "$value": "45px", "$description": "Display Medium — prominent display text" },
      "display-small": { "$value": "36px", "$description": "Display Small — smallest display style" },
      "headline-large": { "$value": "32px", "$description": "Headline Large — page-level headings" },
      "headline-medium": { "$value": "28px", "$description": "Headline Medium — section headings" },
      "headline-small": { "$value": "24px", "$description": "Headline Small — subsection headings" },
      "title-large": { "$value": "22px", "$description": "Title Large — top app bar, dialog titles" },
      "title-medium": { "$value": "16px", "$description": "Title Medium — list headers, card titles" },
      "title-small": { "$value": "14px", "$description": "Title Small — secondary titles, tabs" },
      "body-large": { "$value": "16px", "$description": "Body Large — prominent body text" },
      "body-medium": { "$value": "14px", "$description": "Body Medium — default body text" },
      "body-small": { "$value": "12px", "$description": "Body Small — captions, helper text" },
      "label-large": { "$value": "14px", "$description": "Label Large — buttons, navigation labels" },
      "label-medium": { "$value": "12px", "$description": "Label Medium — chips, badges" },
      "label-small": { "$value": "11px", "$description": "Label Small — smallest readable label" }
    },
    "font-weight": {
      "$type": "fontWeight",
      "regular": { "$value": "400", "$description": "Regular — body text, descriptions" },
      "medium": { "$value": "500", "$description": "Medium — titles, labels, buttons" },
      "bold": { "$value": "700", "$description": "Bold — emphasis, strong headings" }
    },
    "line-height": {
      "$type": "number",
      "display-large": { "$value": "64px", "$description": "Line height for Display Large" },
      "display-medium": { "$value": "52px", "$description": "Line height for Display Medium" },
      "display-small": { "$value": "44px", "$description": "Line height for Display Small" },
      "headline-large": { "$value": "40px", "$description": "Line height for Headline Large" },
      "headline-medium": { "$value": "36px", "$description": "Line height for Headline Medium" },
      "headline-small": { "$value": "32px", "$description": "Line height for Headline Small" },
      "title-large": { "$value": "28px", "$description": "Line height for Title Large" },
      "title-medium": { "$value": "24px", "$description": "Line height for Title Medium" },
      "title-small": { "$value": "20px", "$description": "Line height for Title Small" },
      "body-large": { "$value": "24px", "$description": "Line height for Body Large" },
      "body-medium": { "$value": "20px", "$description": "Line height for Body Medium" },
      "body-small": { "$value": "16px", "$description": "Line height for Body Small" },
      "label-large": { "$value": "20px", "$description": "Line height for Label Large" },
      "label-medium": { "$value": "16px", "$description": "Line height for Label Medium" },
      "label-small": { "$value": "16px", "$description": "Line height for Label Small" }
    },
    "letter-spacing": {
      "$type": "dimension",
      "display-large": { "$value": "-0.25px", "$description": "Tight tracking for Display Large" },
      "display-medium": { "$value": "0px", "$description": "Default tracking for Display Medium" },
      "display-small": { "$value": "0px", "$description": "Default tracking for Display Small" },
      "headline-large": { "$value": "0px", "$description": "Default tracking for Headline Large" },
      "headline-medium": { "$value": "0px", "$description": "Default tracking for Headline Medium" },
      "headline-small": { "$value": "0px", "$description": "Default tracking for Headline Small" },
      "title-large": { "$value": "0px", "$description": "Default tracking for Title Large" },
      "title-medium": { "$value": "0.15px", "$description": "Slight tracking for Title Medium" },
      "title-small": { "$value": "0.1px", "$description": "Slight tracking for Title Small" },
      "body-large": { "$value": "0.5px", "$description": "Open tracking for Body Large readability" },
      "body-medium": { "$value": "0.25px", "$description": "Moderate tracking for Body Medium" },
      "body-small": { "$value": "0.4px", "$description": "Open tracking for Body Small readability" },
      "label-large": { "$value": "0.1px", "$description": "Slight tracking for Label Large" },
      "label-medium": { "$value": "0.5px", "$description": "Open tracking for Label Medium" },
      "label-small": { "$value": "0.5px", "$description": "Open tracking for Label Small" }
    }
  },
  "spacing": {
    "$type": "dimension",
    "0": { "$value": "0px", "$description": "No spacing" },
    "1": { "$value": "4px", "$description": "4dp — minimum spacing unit" },
    "2": { "$value": "8px", "$description": "8dp — tight spacing between related elements" },
    "3": { "$value": "12px", "$description": "12dp — compact component padding" },
    "4": { "$value": "16px", "$description": "16dp — standard component padding, list item height" },
    "6": { "$value": "24px", "$description": "24dp — section spacing, card padding" },
    "8": { "$value": "32px", "$description": "32dp — group spacing" },
    "12": { "$value": "48px", "$description": "48dp — large section gaps" },
    "16": { "$value": "64px", "$description": "64dp — page-level spacing" }
  },
  "radius": {
    "$type": "dimension",
    "none": { "$value": "0px", "$description": "No rounding — sharp corners" },
    "xs": { "$value": "4px", "$description": "Extra small — small chips, badges" },
    "sm": { "$value": "8px", "$description": "Small — buttons, text fields, small cards" },
    "md": { "$value": "12px", "$description": "Medium — cards, dialogs" },
    "lg": { "$value": "16px", "$description": "Large — navigation drawers, bottom sheets" },
    "xl": { "$value": "28px", "$description": "Extra large — FABs, extended FABs, large sheets" },
    "full": { "$value": "9999px", "$description": "Full — circular buttons, pills, avatars" }
  },
  "elevation": {
    "level0": {
      "$type": "shadow",
      "$value": "none",
      "$description": "Level 0 — no elevation, flat on surface"
    },
    "level1": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15)",
      "$description": "Level 1 — cards, app bars, navigation bars"
    },
    "level2": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15)",
      "$description": "Level 2 — elevated buttons, menus, bottom sheets"
    },
    "level3": {
      "$type": "shadow",
      "$value": "0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3)",
      "$description": "Level 3 — navigation drawers, FABs"
    },
    "level4": {
      "$type": "shadow",
      "$value": "0 6px 10px 4px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.3)",
      "$description": "Level 4 — search bar when scrolled"
    },
    "level5": {
      "$type": "shadow",
      "$value": "0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.3)",
      "$description": "Level 5 — dialogs, modals, date pickers"
    }
  },
  "motion": {
    "duration": {
      "$type": "duration",
      "short1": { "$value": "50ms", "$description": "Micro-interactions — ripple start" },
      "short2": { "$value": "100ms", "$description": "Quick feedback — button press" },
      "short3": { "$value": "150ms", "$description": "Small transitions — icon changes" },
      "short4": { "$value": "200ms", "$description": "Standard accelerate — exit animations" },
      "medium1": { "$value": "250ms", "$description": "Standard decelerate — enter animations" },
      "medium2": { "$value": "300ms", "$description": "Standard — component state changes" },
      "medium3": { "$value": "350ms", "$description": "Moderate transitions" },
      "medium4": { "$value": "400ms", "$description": "Emphasized decelerate — enter with emphasis" },
      "long1": { "$value": "450ms", "$description": "Complex transitions" },
      "long2": { "$value": "500ms", "$description": "Emphasized — full emphasized motion" },
      "long3": { "$value": "550ms", "$description": "Large surface transitions" },
      "long4": { "$value": "600ms", "$description": "Route transitions — page changes" },
      "extra-long1": { "$value": "700ms", "$description": "Complex route transitions" },
      "extra-long2": { "$value": "800ms", "$description": "Staggered animations" },
      "extra-long3": { "$value": "900ms", "$description": "Large staggered groups" },
      "extra-long4": { "$value": "1000ms", "$description": "Maximum duration — full-screen transitions" }
    },
    "easing": {
      "$type": "cubicBezier",
      "emphasized": { "$value": [0.2, 0, 0, 1], "$description": "Emphasized — default for most transitions, natural deceleration" },
      "emphasized-decelerate": { "$value": [0.05, 0.7, 0.1, 1], "$description": "Emphasized decelerate — entering elements" },
      "emphasized-accelerate": { "$value": [0.3, 0, 0.8, 0.15], "$description": "Emphasized accelerate — exiting elements" },
      "standard": { "$value": [0.2, 0, 0, 1], "$description": "Standard — utility transitions, less expressive" },
      "standard-decelerate": { "$value": [0, 0, 0, 1], "$description": "Standard decelerate — elements entering the screen" },
      "standard-accelerate": { "$value": [0.3, 0, 1, 1], "$description": "Standard accelerate — elements leaving the screen" },
      "linear": { "$value": [0, 0, 1, 1], "$description": "Linear — progress indicators, continuous animations" }
    }
  }
}
