{
  "$description": "DYNGLE Design v0.3.0. Dynamic + Mingle.",
  "color": {
    "brand": {
      "black": {
        "$type": "color",
        "$value": "#101114",
        "$description": "Text, primary logo, strong surfaces"
      },
      "white": {
        "$type": "color",
        "$value": "#F7F7F4",
        "$description": "Default brand background"
      },
      "lime": {
        "$type": "color",
        "$value": "#C8FF4D",
        "$description": "Energy, emphasis, points of connection"
      },
      "violet": {
        "$type": "color",
        "$value": "#6657FF",
        "$description": "Brand signature / large color fields"
      }
    },
    "gray": {
      "0": {
        "$type": "color",
        "$value": "#FFFFFF"
      },
      "50": {
        "$type": "color",
        "$value": "#F7F7F4"
      },
      "100": {
        "$type": "color",
        "$value": "#EFEFEB"
      },
      "200": {
        "$type": "color",
        "$value": "#E4E4DF"
      },
      "300": {
        "$type": "color",
        "$value": "#D2D2CC"
      },
      "400": {
        "$type": "color",
        "$value": "#AEAEA8"
      },
      "500": {
        "$type": "color",
        "$value": "#7F8085"
      },
      "600": {
        "$type": "color",
        "$value": "#62646B"
      },
      "700": {
        "$type": "color",
        "$value": "#45474D"
      },
      "800": {
        "$type": "color",
        "$value": "#2B2D32"
      },
      "850": {
        "$type": "color",
        "$value": "#202125"
      },
      "900": {
        "$type": "color",
        "$value": "#17181B"
      },
      "950": {
        "$type": "color",
        "$value": "#101114"
      },
      "1000": {
        "$type": "color",
        "$value": "#0A0A0C"
      }
    },
    "violet": {
      "50": {
        "$type": "color",
        "$value": "#F5F6FF"
      },
      "100": {
        "$type": "color",
        "$value": "#E9EBFF"
      },
      "200": {
        "$type": "color",
        "$value": "#D3D8FF"
      },
      "300": {
        "$type": "color",
        "$value": "#B4BAFF"
      },
      "400": {
        "$type": "color",
        "$value": "#9094FF"
      },
      "500": {
        "$type": "color",
        "$value": "#6657FF"
      },
      "600": {
        "$type": "color",
        "$value": "#5443E8"
      },
      "700": {
        "$type": "color",
        "$value": "#4833C7"
      },
      "800": {
        "$type": "color",
        "$value": "#35249A"
      },
      "900": {
        "$type": "color",
        "$value": "#24166F"
      },
      "950": {
        "$type": "color",
        "$value": "#16074F"
      }
    },
    "lime": {
      "50": {
        "$type": "color",
        "$value": "#F4FFE5"
      },
      "100": {
        "$type": "color",
        "$value": "#E9FFC7"
      },
      "200": {
        "$type": "color",
        "$value": "#D9FF97"
      },
      "300": {
        "$type": "color",
        "$value": "#C8FF4D"
      },
      "400": {
        "$type": "color",
        "$value": "#ABE42A"
      },
      "500": {
        "$type": "color",
        "$value": "#8EC600"
      },
      "600": {
        "$type": "color",
        "$value": "#6EA200"
      },
      "700": {
        "$type": "color",
        "$value": "#547A12"
      },
      "800": {
        "$type": "color",
        "$value": "#395F00"
      },
      "900": {
        "$type": "color",
        "$value": "#264400"
      },
      "950": {
        "$type": "color",
        "$value": "#142B00"
      }
    },
    "red": {
      "50": {
        "$type": "color",
        "$value": "#FFF4F3"
      },
      "100": {
        "$type": "color",
        "$value": "#FFE6E5"
      },
      "200": {
        "$type": "color",
        "$value": "#FFCDCA"
      },
      "300": {
        "$type": "color",
        "$value": "#FFA5A1"
      },
      "400": {
        "$type": "color",
        "$value": "#F87071"
      },
      "500": {
        "$type": "color",
        "$value": "#E04A51"
      },
      "600": {
        "$type": "color",
        "$value": "#C52F3B"
      },
      "700": {
        "$type": "color",
        "$value": "#9D1627"
      },
      "800": {
        "$type": "color",
        "$value": "#790D1B"
      },
      "900": {
        "$type": "color",
        "$value": "#56040F"
      },
      "950": {
        "$type": "color",
        "$value": "#3A0006"
      }
    },
    "green": {
      "50": {
        "$type": "color",
        "$value": "#F0FAF3"
      },
      "100": {
        "$type": "color",
        "$value": "#DFF3E5"
      },
      "200": {
        "$type": "color",
        "$value": "#C1E5CE"
      },
      "300": {
        "$type": "color",
        "$value": "#98D0AD"
      },
      "400": {
        "$type": "color",
        "$value": "#6AB488"
      },
      "500": {
        "$type": "color",
        "$value": "#459A6A"
      },
      "600": {
        "$type": "color",
        "$value": "#167447"
      },
      "700": {
        "$type": "color",
        "$value": "#14653E"
      },
      "800": {
        "$type": "color",
        "$value": "#0A4C2D"
      },
      "900": {
        "$type": "color",
        "$value": "#04351D"
      },
      "950": {
        "$type": "color",
        "$value": "#002210"
      }
    },
    "amber": {
      "50": {
        "$type": "color",
        "$value": "#FEF6E9"
      },
      "100": {
        "$type": "color",
        "$value": "#FCEAD1"
      },
      "200": {
        "$type": "color",
        "$value": "#F5D6A7"
      },
      "300": {
        "$type": "color",
        "$value": "#E8B86D"
      },
      "400": {
        "$type": "color",
        "$value": "#F5AF2D"
      },
      "500": {
        "$type": "color",
        "$value": "#D89600"
      },
      "600": {
        "$type": "color",
        "$value": "#AD7700"
      },
      "700": {
        "$type": "color",
        "$value": "#885D00"
      },
      "800": {
        "$type": "color",
        "$value": "#563900"
      },
      "900": {
        "$type": "color",
        "$value": "#3C2700"
      },
      "950": {
        "$type": "color",
        "$value": "#261700"
      }
    },
    "semantic": {
      "light": {
        "bg": {
          "$type": "color",
          "$value": "{color.gray.0}",
          "$description": "Default page background"
        },
        "bg-subtle": {
          "$type": "color",
          "$value": "{color.gray.50}",
          "$description": "Distinct surface / Living White"
        },
        "bg-muted": {
          "$type": "color",
          "$value": "{color.gray.100}",
          "$description": "Inactive / secondary areas"
        },
        "bg-elevated": {
          "$type": "color",
          "$value": "{color.gray.0}",
          "$description": "Cards, popovers, dialogs"
        },
        "bg-inverse": {
          "$type": "color",
          "$value": "{color.gray.950}",
          "$description": "Inverse surface"
        },
        "fg": {
          "$type": "color",
          "$value": "{color.gray.950}",
          "$description": "Default body text"
        },
        "fg-muted": {
          "$type": "color",
          "$value": "{color.gray.600}",
          "$description": "Secondary descriptions"
        },
        "fg-subtle": {
          "$type": "color",
          "$value": "{color.gray.500}",
          "$description": "Decoration / metadata (not for body text)"
        },
        "fg-inverse": {
          "$type": "color",
          "$value": "{color.gray.50}",
          "$description": "Text on inverse surfaces"
        },
        "border": {
          "$type": "color",
          "$value": "{color.gray.200}",
          "$description": "Dividers"
        },
        "border-strong": {
          "$type": "color",
          "$value": "{color.gray.300}",
          "$description": "Emphasized dividers"
        },
        "border-control": {
          "$type": "color",
          "$value": "{color.gray.500}",
          "$description": "Input control borders (3:1 or more)"
        },
        "action": {
          "$type": "color",
          "$value": "{color.violet.600}",
          "$description": "Primary actions / selection"
        },
        "action-hover": {
          "$type": "color",
          "$value": "{color.violet.700}",
          "$description": "Primary action hover"
        },
        "action-subtle": {
          "$type": "color",
          "$value": "{color.violet.50}",
          "$description": "Selected item background"
        },
        "action-fg": {
          "$type": "color",
          "$value": "{color.violet.600}",
          "$description": "Links / selected text"
        },
        "on-action": {
          "$type": "color",
          "$value": "{color.gray.0}",
          "$description": "Text on action color"
        },
        "accent": {
          "$type": "color",
          "$value": "{color.lime.300}",
          "$description": "Brand emphasis / points of connection"
        },
        "accent-hover": {
          "$type": "color",
          "$value": "{color.lime.400}",
          "$description": "Accent hover"
        },
        "on-accent": {
          "$type": "color",
          "$value": "{color.gray.950}",
          "$description": "Text on lime (always dark)"
        },
        "brand": {
          "$type": "color",
          "$value": "{color.violet.500}",
          "$description": "Brand color fields"
        },
        "focus": {
          "$type": "color",
          "$value": "{color.violet.600}",
          "$description": "Focus ring"
        },
        "positive": {
          "$type": "color",
          "$value": "{color.green.600}",
          "$description": "Success text / icons"
        },
        "positive-subtle": {
          "$type": "color",
          "$value": "{color.green.50}",
          "$description": "Success background"
        },
        "critical": {
          "$type": "color",
          "$value": "{color.red.600}",
          "$description": "Errors / danger"
        },
        "critical-subtle": {
          "$type": "color",
          "$value": "{color.red.50}",
          "$description": "Error background"
        },
        "warning": {
          "$type": "color",
          "$value": "{color.amber.700}",
          "$description": "Caution"
        },
        "warning-subtle": {
          "$type": "color",
          "$value": "{color.amber.50}",
          "$description": "Caution background"
        },
        "chart-1": {
          "$type": "color",
          "$value": "{color.violet.500}",
          "$description": "Chart series 1 / Life"
        },
        "chart-2": {
          "$type": "color",
          "$value": "{color.lime.700}",
          "$description": "Chart series 2 / Wellness"
        },
        "chart-3": {
          "$type": "color",
          "$value": "{color.red.500}",
          "$description": "Chart series 3 / Bio"
        }
      },
      "dark": {
        "bg": {
          "$type": "color",
          "$value": "{color.gray.1000}",
          "$description": "Default page background"
        },
        "bg-subtle": {
          "$type": "color",
          "$value": "{color.gray.950}",
          "$description": "Distinct surface / Living White"
        },
        "bg-muted": {
          "$type": "color",
          "$value": "{color.gray.900}",
          "$description": "Inactive / secondary areas"
        },
        "bg-elevated": {
          "$type": "color",
          "$value": "{color.gray.900}",
          "$description": "Cards, popovers, dialogs"
        },
        "bg-inverse": {
          "$type": "color",
          "$value": "{color.gray.50}",
          "$description": "Inverse surface"
        },
        "fg": {
          "$type": "color",
          "$value": "{color.gray.50}",
          "$description": "Default body text"
        },
        "fg-muted": {
          "$type": "color",
          "$value": "{color.gray.400}",
          "$description": "Secondary descriptions"
        },
        "fg-subtle": {
          "$type": "color",
          "$value": "{color.gray.500}",
          "$description": "Decoration / metadata (not for body text)"
        },
        "fg-inverse": {
          "$type": "color",
          "$value": "{color.gray.950}",
          "$description": "Text on inverse surfaces"
        },
        "border": {
          "$type": "color",
          "$value": "{color.gray.800}",
          "$description": "Dividers"
        },
        "border-strong": {
          "$type": "color",
          "$value": "{color.gray.700}",
          "$description": "Emphasized dividers"
        },
        "border-control": {
          "$type": "color",
          "$value": "{color.gray.500}",
          "$description": "Input control borders (3:1 or more)"
        },
        "action": {
          "$type": "color",
          "$value": "{color.violet.500}",
          "$description": "Primary actions / selection"
        },
        "action-hover": {
          "$type": "color",
          "$value": "{color.violet.600}",
          "$description": "Primary action hover"
        },
        "action-subtle": {
          "$type": "color",
          "$value": "{color.violet.950}",
          "$description": "Selected item background"
        },
        "action-fg": {
          "$type": "color",
          "$value": "{color.violet.300}",
          "$description": "Links / selected text"
        },
        "on-action": {
          "$type": "color",
          "$value": "{color.gray.0}",
          "$description": "Text on action color"
        },
        "accent": {
          "$type": "color",
          "$value": "{color.lime.300}",
          "$description": "Brand emphasis / points of connection"
        },
        "accent-hover": {
          "$type": "color",
          "$value": "{color.lime.200}",
          "$description": "Accent hover"
        },
        "on-accent": {
          "$type": "color",
          "$value": "{color.gray.950}",
          "$description": "Text on lime (always dark)"
        },
        "brand": {
          "$type": "color",
          "$value": "{color.violet.500}",
          "$description": "Brand color fields"
        },
        "focus": {
          "$type": "color",
          "$value": "{color.lime.300}",
          "$description": "Focus ring"
        },
        "positive": {
          "$type": "color",
          "$value": "{color.green.400}",
          "$description": "Success text / icons"
        },
        "positive-subtle": {
          "$type": "color",
          "$value": "{color.green.950}",
          "$description": "Success background"
        },
        "critical": {
          "$type": "color",
          "$value": "{color.red.400}",
          "$description": "Errors / danger"
        },
        "critical-subtle": {
          "$type": "color",
          "$value": "{color.red.950}",
          "$description": "Error background"
        },
        "warning": {
          "$type": "color",
          "$value": "{color.amber.300}",
          "$description": "Caution"
        },
        "warning-subtle": {
          "$type": "color",
          "$value": "{color.amber.950}",
          "$description": "Caution background"
        },
        "chart-1": {
          "$type": "color",
          "$value": "{color.violet.400}",
          "$description": "Chart series 1 / Life"
        },
        "chart-2": {
          "$type": "color",
          "$value": "{color.lime.300}",
          "$description": "Chart series 2 / Wellness"
        },
        "chart-3": {
          "$type": "color",
          "$value": "{color.red.400}",
          "$description": "Chart series 3 / Bio"
        }
      }
    }
  },
  "space": {
    "0": {
      "$type": "dimension",
      "$value": "0px"
    },
    "1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "5": {
      "$type": "dimension",
      "$value": "20px"
    },
    "6": {
      "$type": "dimension",
      "$value": "24px"
    },
    "8": {
      "$type": "dimension",
      "$value": "32px"
    },
    "10": {
      "$type": "dimension",
      "$value": "40px"
    },
    "12": {
      "$type": "dimension",
      "$value": "48px"
    },
    "16": {
      "$type": "dimension",
      "$value": "64px"
    },
    "20": {
      "$type": "dimension",
      "$value": "80px"
    },
    "24": {
      "$type": "dimension",
      "$value": "96px"
    }
  },
  "radius": {
    "xs": {
      "$type": "dimension",
      "$value": "4px"
    },
    "sm": {
      "$type": "dimension",
      "$value": "8px"
    },
    "md": {
      "$type": "dimension",
      "$value": "12px"
    },
    "lg": {
      "$type": "dimension",
      "$value": "20px"
    },
    "xl": {
      "$type": "dimension",
      "$value": "28px"
    },
    "full": {
      "$type": "dimension",
      "$value": "9999px"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": "'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif"
    },
    "mono": {
      "$type": "fontFamily",
      "$value": "'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace"
    }
  },
  "typography": {
    "display-1": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.sans}",
        "fontSize": "72px",
        "lineHeight": 1,
        "letterSpacing": "-0.05em",
        "fontWeight": 700
      },
      "$description": "Large brand headlines"
    },
    "display-2": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.sans}",
        "fontSize": "56px",
        "lineHeight": 1.05,
        "letterSpacing": "-0.045em",
        "fontWeight": 700
      },
      "$description": "Section headlines"
    },
    "heading-1": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.sans}",
        "fontSize": "40px",
        "lineHeight": 1.2,
        "letterSpacing": "-0.035em",
        "fontWeight": 700
      },
      "$description": "Page titles"
    },
    "heading-2": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.sans}",
        "fontSize": "30px",
        "lineHeight": 1.3,
        "letterSpacing": "-0.03em",
        "fontWeight": 650
      },
      "$description": "Section titles"
    },
    "heading-3": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.sans}",
        "fontSize": "22px",
        "lineHeight": 1.4,
        "letterSpacing": "-0.02em",
        "fontWeight": 650
      },
      "$description": "Cards / subheadings"
    },
    "body-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.sans}",
        "fontSize": "18px",
        "lineHeight": 1.7,
        "letterSpacing": "-0.01em",
        "fontWeight": 400
      },
      "$description": "Lead paragraphs"
    },
    "body": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.sans}",
        "fontSize": "16px",
        "lineHeight": 1.7,
        "letterSpacing": "-0.005em",
        "fontWeight": 400
      },
      "$description": "Default body text"
    },
    "label": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.sans}",
        "fontSize": "14px",
        "lineHeight": 1.5,
        "letterSpacing": "0em",
        "fontWeight": 600
      },
      "$description": "Labels / buttons"
    },
    "caption": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.sans}",
        "fontSize": "12px",
        "lineHeight": 1.5,
        "letterSpacing": "0.01em",
        "fontWeight": 500
      },
      "$description": "Captions / metadata"
    }
  },
  "duration": {
    "instant": {
      "$type": "duration",
      "$value": "100ms",
      "$description": "Toggles, checks, presses"
    },
    "fast": {
      "$type": "duration",
      "$value": "160ms",
      "$description": "Hover, focus, small state changes"
    },
    "base": {
      "$type": "duration",
      "$value": "240ms",
      "$description": "Panels, tabs, content transitions"
    },
    "slow": {
      "$type": "duration",
      "$value": "400ms",
      "$description": "Large layout changes / dialogs"
    },
    "expressive": {
      "$type": "duration",
      "$value": "700ms",
      "$description": "Entering brand areas / emphasis transitions"
    },
    "brand": {
      "$type": "duration",
      "$value": "1200ms",
      "$description": "Symbol join motion (on user request)"
    }
  },
  "easing": {
    "standard": {
      "$type": "cubicBezier",
      "$value": [
        0.2,
        0,
        0,
        1
      ],
      "$description": "Most UI transitions"
    },
    "enter": {
      "$type": "cubicBezier",
      "$value": [
        0,
        0,
        0,
        1
      ],
      "$description": "Elements entering / decelerate"
    },
    "exit": {
      "$type": "cubicBezier",
      "$value": [
        0.3,
        0,
        1,
        1
      ],
      "$description": "Elements leaving / accelerate"
    },
    "expressive": {
      "$type": "cubicBezier",
      "$value": [
        0.2,
        0.8,
        0.2,
        1
      ],
      "$description": "Brand emphasis / large moves"
    },
    "mingle": {
      "$type": "cubicBezier",
      "$value": [
        0.65,
        0,
        0.35,
        1
      ],
      "$description": "Two elements meeting and joining"
    }
  },
  "spring": {
    "snappy": {
      "$value": {
        "stiffness": 520,
        "damping": 34,
        "mass": 1
      },
      "$description": "Small controls / instant response"
    },
    "mingle": {
      "$value": {
        "stiffness": 180,
        "damping": 16,
        "mass": 1
      },
      "$description": "Symbol join / attraction"
    },
    "gentle": {
      "$value": {
        "stiffness": 110,
        "damping": 20,
        "mass": 1
      },
      "$description": "Large elements / parallax"
    }
  }
}