{
  "schemaVersion": 1,
  "identity": {
    "name": "Clarity Workspace",
    "description": "A practical design system for a focused web application workspace.",
    "audience": "Product teams building and maintaining a modern web application.",
    "visualReference": "A well-organized studio desk: calm surfaces, clear hierarchy, precise tools, and one confident accent for important work.",
    "principles": [
      "Make the current task and its next action immediately clear.",
      "Use color to communicate meaning before decoration.",
      "Keep supporting information quiet so primary work can lead."
    ],
    "tone": "Clear, pragmatic, and purposeful."
  },
  "themes": {
    "defaultTheme": "light",
    "light": {
      "background": "#F8FAFC",
      "foreground": "#0F172A",
      "card": "#FFFFFF",
      "cardForeground": "#0F172A",
      "popover": "#FFFFFF",
      "popoverForeground": "#0F172A",
      "primary": "#2563EB",
      "primaryForeground": "#FFFFFF",
      "secondary": "#E2E8F0",
      "secondaryForeground": "#0F172A",
      "muted": "#F1F5F9",
      "mutedForeground": "#475569",
      "accent": "#DBEAFE",
      "accentForeground": "#1E3A8A",
      "destructive": "#DC2626",
      "destructiveForeground": "#FFFFFF",
      "border": "#CBD5E1",
      "input": "#CBD5E1",
      "ring": "#2563EB",
      "success": "#16A34A",
      "successForeground": "#FFFFFF",
      "warning": "#D97706",
      "warningForeground": "#FFFFFF",
      "info": "#0284C7",
      "infoForeground": "#FFFFFF",
      "sidebar": "#0F172A",
      "sidebarForeground": "#F8FAFC",
      "chart1": "#2563EB",
      "chart2": "#16A34A",
      "chart3": "#D97706",
      "chart4": "#7C3AED",
      "chart5": "#DB2777"
    },
    "dark": {
      "background": "#0F172A",
      "foreground": "#F8FAFC",
      "card": "#172033",
      "cardForeground": "#F8FAFC",
      "popover": "#172033",
      "popoverForeground": "#F8FAFC",
      "primary": "#60A5FA",
      "primaryForeground": "#0F172A",
      "secondary": "#273449",
      "secondaryForeground": "#F8FAFC",
      "muted": "#1E293B",
      "mutedForeground": "#CBD5E1",
      "accent": "#1E3A8A",
      "accentForeground": "#DBEAFE",
      "destructive": "#F87171",
      "destructiveForeground": "#0F172A",
      "border": "#334155",
      "input": "#475569",
      "ring": "#60A5FA",
      "success": "#4ADE80",
      "successForeground": "#052E16",
      "warning": "#FBBF24",
      "warningForeground": "#451A03",
      "info": "#38BDF8",
      "infoForeground": "#082F49",
      "sidebar": "#020617",
      "sidebarForeground": "#E2E8F0",
      "chart1": "#60A5FA",
      "chart2": "#4ADE80",
      "chart3": "#FBBF24",
      "chart4": "#A78BFA",
      "chart5": "#F472B6"
    }
  },
  "typography": {
    "fontFamilies": {
      "body": "system-sans",
      "heading": "system-sans",
      "mono": "system-mono"
    },
    "fontFeatureSettings": "normal",
    "fontVariationSettings": "normal",
    "levels": {
      "display": {
        "fontSize": "3rem",
        "fontWeight": 700,
        "lineHeight": 1.1,
        "letterSpacing": "-0.03em"
      },
      "h1": {
        "fontSize": "2.25rem",
        "fontWeight": 700,
        "lineHeight": 1.15,
        "letterSpacing": "-0.02em"
      },
      "h2": {
        "fontSize": "1.875rem",
        "fontWeight": 650,
        "lineHeight": 1.2,
        "letterSpacing": "-0.015em"
      },
      "h3": {
        "fontSize": "1.5rem",
        "fontWeight": 600,
        "lineHeight": 1.3,
        "letterSpacing": "-0.01em"
      },
      "bodyLg": {
        "fontSize": "1.125rem",
        "fontWeight": 400,
        "lineHeight": 1.6,
        "letterSpacing": "0em"
      },
      "bodyMd": {
        "fontSize": "1rem",
        "fontWeight": 400,
        "lineHeight": 1.6,
        "letterSpacing": "0em"
      },
      "bodySm": {
        "fontSize": "0.875rem",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "0em"
      },
      "labelLg": {
        "fontSize": "0.875rem",
        "fontWeight": 600,
        "lineHeight": 1.3,
        "letterSpacing": "0em"
      },
      "labelMd": {
        "fontSize": "0.75rem",
        "fontWeight": 600,
        "lineHeight": 1.3,
        "letterSpacing": "0.01em"
      },
      "labelSm": {
        "fontSize": "0.625rem",
        "fontWeight": 600,
        "lineHeight": 1.2,
        "letterSpacing": "0.02em"
      },
      "code": {
        "fontSize": "0.875rem",
        "fontWeight": 500,
        "lineHeight": 1.5,
        "letterSpacing": "0em"
      }
    }
  },
  "spacing": {
    "scale": {
      "xs": "2px",
      "sm": "4px",
      "md": "8px",
      "lg": "16px",
      "xl": "24px",
      "2xl": "32px"
    },
    "sectionGap": "24px",
    "cardPadding": "16px",
    "controlPadding": "8px",
    "density": "compact"
  },
  "geometry": {
    "radii": {
      "none": "0px",
      "sm": "2px",
      "md": "4px",
      "lg": "8px",
      "xl": "12px",
      "full": "9999px"
    },
    "borderWidth": "1px",
    "shadows": {
      "none": "none",
      "sm": "0 1px 2px 0 rgb(15 23 42 / 0.05)",
      "md": "0 8px 16px -4px rgb(15 23 42 / 0.12)",
      "lg": "0 20px 28px -8px rgb(15 23 42 / 0.18)"
    }
  },
  "layout": {
    "navigationMode": "sidebar",
    "maxContentWidth": "1120px",
    "pageMargin": "16px",
    "sidebarWidth": "240px",
    "gridColumns": {
      "mobile": 1,
      "tablet": 2,
      "desktop": 3
    }
  },
  "responsive": {
    "breakpoints": {
      "tablet": "768px",
      "desktop": "1024px"
    }
  },
  "components": {
    "button": {
      "size": "md",
      "variant": "default"
    },
    "controlHeight": "36px",
    "tableDensity": "compact",
    "cardStyle": "outlined",
    "overlayRadius": "sm"
  },
  "states": {
    "hoverOpacity": 0.92,
    "activeOpacity": 0.85,
    "disabledOpacity": 0.5,
    "loadingIndicator": "spinner",
    "errorMessage": "We could not complete that action. Please try again.",
    "successMessage": "Your changes were saved.",
    "emptyMessage": "There is nothing here yet."
  },
  "icons": {
    "library": "lucide",
    "size": "20px",
    "strokeWidth": 2
  },
  "motion": {
    "fast": "100ms",
    "normal": "140ms",
    "slow": "200ms",
    "easing": "standard",
    "allowAnimations": true
  },
  "accessibility": {
    "focusRingWidth": "2px",
    "focusRingOffset": "2px",
    "minimumControlSize": "40px",
    "reducedMotionPolicy": "respect-system",
    "contrastPolicy": "warn"
  },
  "guidance": {
    "categoryRationales": [
      {
        "category": "identity",
        "rationale": "Keep the product context clear so agents can make decisions in the intended voice."
      },
      {
        "category": "colors",
        "rationale": "Use semantic color roles to make hierarchy and status understandable across screens."
      },
      {
        "category": "typography",
        "rationale": "Use the named type roles to preserve a readable, calm information hierarchy."
      },
      {
        "category": "spacing",
        "rationale": "Use the spacing scale to group related work and keep scan paths predictable."
      },
      {
        "category": "geometry",
        "rationale": "Use restrained radii, borders, and shadows to distinguish structure without decoration."
      },
      {
        "category": "layout",
        "rationale": "Keep primary work visible within a stable application shell and navigation model."
      },
      {
        "category": "responsive",
        "rationale": "Reflow content at the configured breakpoints while preserving task priority."
      },
      {
        "category": "components",
        "rationale": "Reuse component defaults so actions, data, and overlays behave consistently."
      },
      {
        "category": "states",
        "rationale": "Show clear local feedback for interaction states without hiding essential information."
      },
      {
        "category": "icons",
        "rationale": "Use familiar icons as supporting cues and retain text for essential actions."
      },
      {
        "category": "motion",
        "rationale": "Use brief non-essential motion only to clarify feedback and state changes."
      },
      {
        "category": "accessibility",
        "rationale": "Preserve visible focus, usable targets, and reviewable contrast in every interaction."
      }
    ],
    "compositionRules": [
      "Keep the primary action visible without competing with supporting controls.",
      "Group related work in clear sections with consistent spacing."
    ],
    "dos": [
      "Use semantic color roles consistently across screens.",
      "Preserve keyboard focus and clear feedback for every interaction."
    ],
    "donts": [
      "Do not use decorative color where it can be mistaken for a status.",
      "Do not hide essential actions behind hover-only interactions."
    ],
    "implementationNotes": [
      "Prefer semantic design tokens over one-off visual values."
    ],
    "additionalSections": []
  }
}