version: "1.0"
name: "Bento Grid"

colors:
  background: "#F5F7FB"
  surface: "#FFFFFF"
  text-primary: "#111827"
  text-secondary: "#6B7280"
  border: "#E5E7EB"
  accent-1: "#4F46E5"
  accent-2: "#A78BFA"
  accent-3: "#14B8A6"
  shadow: "rgba(15,23,42,0.08)"

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

rounded:
  sm: "18px"
  md: "28px"
  lg: "36px"

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

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

components:
  tile-card:
    background: "#FFFFFF"
    border: "1px solid #E5E7EB"
    border-radius: "28px"
    box-shadow: "0 20px 45px rgba(15,23,42,0.08)"
    padding: "24px"

  button-primary:
    background: "#111827"
    color: "#FFFFFF"
    border: "none"
    border-radius: "999px"
    padding: "12px 22px"
    hover:
      opacity: "0.92"

rationale:
  - Compose pages from clearly framed tiles with different emphasis levels instead of long uniform sections.
  - Let whitespace and varying cell spans communicate hierarchy before color does.