{
  "name": "Design Guidelines",
  "description": "UI/UX 디자인 가이드라인",
  "rules": {
    "colors": {
      "primary": {
        "main": "#1976d2",
        "light": "#42a5f5",
        "dark": "#1565c0"
      },
      "secondary": {
        "main": "#9c27b0",
        "light": "#ba68c8",
        "dark": "#7b1fa2"
      },
      "error": "#d32f2f",
      "warning": "#ed6c02",
      "info": "#0288d1",
      "success": "#2e7d32"
    },
    "darkMode": {
      "colors": {
        "background": {
          "primary": "#121212",
          "secondary": "#1e1e1e",
          "paper": "#262626"
        },
        "text": {
          "primary": "rgba(255, 255, 255, 0.87)",
          "secondary": "rgba(255, 255, 255, 0.6)",
          "disabled": "rgba(255, 255, 255, 0.38)"
        },
        "action": {
          "active": "rgba(255, 255, 255, 0.7)",
          "hover": "rgba(255, 255, 255, 0.1)",
          "selected": "rgba(255, 255, 255, 0.08)"
        }
      },
      "elevation": {
        "ambient": "rgba(0, 0, 0, 0.05)",
        "spotLight": "rgba(0, 0, 0, 0.2)"
      },
      "implementation": {
        "strategy": "CSS 변수 기반 테마 전환",
        "mediaQuery": "@media (prefers-color-scheme: dark) { ... }",
        "userPreference": "localStorage 또는 쿠키에 저장"
      }
    },
    "typography": {
      "fontFamily": {
        "primary": "Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif",
        "monospace": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace"
      },
      "fontSizes": {
        "h1": "2.5rem",
        "h2": "2rem",
        "h3": "1.75rem",
        "h4": "1.5rem",
        "h5": "1.25rem",
        "h6": "1rem",
        "body": "1rem",
        "small": "0.875rem"
      },
      "lineHeights": {
        "tight": 1.2,
        "normal": 1.5,
        "relaxed": 1.75
      }
    },
    "spacing": {
      "base": "8px",
      "multipliers": [0, 0.5, 1, 1.5, 2, 3, 4, 5, 6]
    },
    "breakpoints": {
      "xs": "0px",
      "sm": "600px",
      "md": "900px",
      "lg": "1200px",
      "xl": "1536px"
    },
    "responsiveDesign": {
      "approach": "모바일 우선(Mobile First) 디자인",
      "gridSystem": "CSS Grid 또는 Flexbox 기반 12-column 시스템",
      "mediaQueries": {
        "xs": "@media (min-width: 0px)",
        "sm": "@media (min-width: 600px)",
        "md": "@media (min-width: 900px)",
        "lg": "@media (min-width: 1200px)",
        "xl": "@media (min-width: 1536px)"
      },
      "layoutPrinciples": [
        "모바일에서는 단일 컬럼 레이아웃",
        "태블릿에서는 2-3 컬럼 레이아웃",
        "데스크톱에서는 다중 컬럼 레이아웃"
      ],
      "adaptiveUI": {
        "navigationPatterns": {
          "mobile": "햄버거 메뉴 또는 바텀 내비게이션",
          "desktop": "가로 메뉴 또는 사이드바"
        },
        "touchTargets": "모바일에서 최소 44x44px 크기 확보",
        "fontSizing": "vw 또는 clamp() 함수를 사용한 반응형 폰트 크기"
      },
      "images": {
        "srcset": "<img srcset=\"image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w\" sizes=\"(max-width: 600px) 100vw, 50vw\">",
        "pictureElement": "<picture>...<source media=\"(max-width: 600px)\" srcset=\"...\">, ...</picture>"
      }
    },
    "components": {
      "buttons": {
        "borderRadius": "4px",
        "padding": "8px 16px",
        "minHeight": "36px"
      },
      "inputs": {
        "borderRadius": "4px",
        "padding": "8px 12px",
        "minHeight": "40px"
      },
      "cards": {
        "borderRadius": "8px",
        "padding": "16px",
        "shadow": "0 2px 4px rgba(0,0,0,0.1)"
      }
    },
    "animations": {
      "timing": {
        "veryFast": "100ms",
        "fast": "200ms",
        "normal": "300ms",
        "slow": "500ms"
      },
      "easing": {
        "standard": "cubic-bezier(0.4, 0.0, 0.2, 1)",
        "decelerate": "cubic-bezier(0.0, 0.0, 0.2, 1)",
        "accelerate": "cubic-bezier(0.4, 0.0, 1, 1)"
      },
      "transitions": {
        "hover": "background-color {timing} {easing}, color {timing} {easing}, transform {timing} {easing}",
        "pageTransition": "opacity {timing} {easing}, transform {timing} {easing}",
        "modalOpen": "opacity {timing} {easing}, transform {timing} {easing}"
      },
      "motion": {
        "principles": [
          "목적이 있는 애니메이션 사용",
          "부드럽고 자연스러운 움직임",
          "사용자 제어감 유지",
          "상태 변화의 명확한 시각화"
        ],
        "patterns": {
          "fadeIn": "opacity: 0 -> 1",
          "slideIn": "transform: translateY(20px) -> translateY(0)",
          "scale": "transform: scale(0.95) -> scale(1)",
          "contentReveal": "height: 0 -> auto, opacity: 0 -> 1"
        },
        "reducedMotion": "@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }"
      }
    },
    "iconsAndImages": {
      "icons": {
        "system": "Material Icons, Feather Icons 등 일관된 아이콘 시스템 사용",
        "sizes": {
          "small": "16x16px",
          "medium": "24x24px",
          "large": "32x32px"
        },
        "stroke": {
          "width": "1.5-2px",
          "linecap": "round",
          "linejoin": "round"
        },
        "formats": ["SVG", "Icon Font"],
        "color": "현재 텍스트 색상 상속 또는 명시적 컬러 사용"
      },
      "images": {
        "aspectRatios": {
          "standard": "16:9",
          "portrait": "3:4",
          "square": "1:1",
          "wide": "21:9"
        },
        "quality": {
          "web": "JPEG 품질 80%, WebP 품질 85%",
          "thumbnail": "최적화된 저용량 이미지"
        },
        "treatment": {
          "cornerRadius": "일관된 모서리 반경 적용",
          "shadow": "필요한 경우에만 미묘한 그림자 적용",
          "overlay": "텍스트 가독성을 위한 오버레이 적용 시 일관된 패턴 사용"
        },
        "accessibility": {
          "altText": "모든 이미지에 설명적인 대체 텍스트 제공",
          "decorative": "장식 이미지는 alt=\"\" 사용"
        }
      },
      "illustrations": {
        "style": "브랜드 아이덴티티와 일관된 일러스트레이션 스타일",
        "usage": "빈 상태, 오류 상태, 성공 상태 등 주요 UI 상태 표현에 활용",
        "principles": [
          "단순하고 명확한 메시지 전달",
          "다양한 화면 크기에서 가독성 유지",
          "주변 UI 요소와의 조화"
        ]
      }
    },
    "accessibility": {
      "colorContrast": "4.5:1",
      "focusVisible": true,
      "skipLinks": true,
      "ariaLabels": true
    }
  }
}