version: "1.0"
name: "Material Design"

colors:
  background: "#FAFAFA"
  surface: "#FFFFFF"
  text-primary: "#1C1B1F"
  text-secondary: "#757575"
  border: "#E0E0E0"
  accent-1: "#6200EE"
  accent-2: "#03DAC6"
  accent-3: "#3700B3"
  shadow: "rgba(0,0,0,0.12)"

typography:
  headline-lg:
    family: "Roboto"
    weight: 500
    size: "48px"
    line-height: "1.08"
    letter-spacing: "-0.03em"
  headline-sm:
    family: "Roboto"
    weight: 500
    size: "24px"
    line-height: "1.25"
  body-md:
    family: "Roboto"
    weight: 400
    size: "16px"
    line-height: "1.6"
  label-md:
    family: "Roboto"
    weight: 600
    size: "13px"
    text-transform: "uppercase"
    letter-spacing: "0.05em"

rounded:
  sm: "4px"
  md: "8px"
  lg: "16px"

spacing:
  xs: "8px"
  sm: "16px"
  md: "24px"
  lg: "40px"

border-width:
  sm: "0px"
  md: "0px"
  lg: "0px"

components:
  button-primary:
    background: "#6200EE"
    color: "#FFFFFF"
    border: "none"
    border-radius: "8px"
    box-shadow: "0 3px 8px rgba(98,0,238,0.24)"
    padding: "10px 24px"

  surface-card:
    background: "#FFFFFF"
    border: "none"
    border-radius: "8px"
    box-shadow: "0 3px 6px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)"
    padding: "24px"

rationale:
  - Use elevation and tonal color to separate layers before adding borders.
  - Design components as a system: spacing, states, and motion should feel predictable across the whole UI.