{
  "schemaVersion": "1.0",
  "id": "glaze-wheelhouse",
  "version": "1.1.0",
  "name": "Glaze Wheelhouse",
  "tier": "free",
  "summary": "Earthy creator tools: moss-green actions on cool green-grey neutrals, soft 12–16px shapes and a Gloock display voice.",
  "tags": {
    "industries": [
      "creator-economy",
      "membership",
      "digital-goods"
    ],
    "moods": [
      "warm",
      "approachable",
      "handmade",
      "calm"
    ],
    "density": "comfortable",
    "contrast": "standard"
  },
  "rationale": {
    "overview": "Glaze Wheelhouse is for creators who sell memberships, digital downloads and commissions, and who want their tools to feel like a small studio rather than a marketplace. Warmth comes from three sources: moss tones (brand.500–700), rounded forms (radius.md 12px, radius.lg 16px) and 24px gutters. The system uses no textures, hand-drawn doodles or faux-worn edges. Surfaces stay flat. The handmade feel comes from color, shape and the Gloock headings.",
    "color": "One action hue, Willow (brand), carries primary buttons, selected states and the focus ring. In light mode, primary is brand.700 (#55621d). It measures about 6.6:1 against white primary-foreground and about 6.1:1 against background. The ring uses brand.600, which measures about 4.2:1 on background. In dark mode, primary lifts to brand.400 (#a2b353) with brand.950 text, measuring about 7.3:1. Neutrals are a cool green-grey with a constant low tint (G > B > R on every step), so long lists never turn beige or muddy. Dark background is neutral.950 (#161c18). Dark card is #202722, one small step above it. Popover uses neutral.900 so floating layers sit highest. Success is a teal-leaning green (hue about 155°) and sits clearly apart from the yellow-green brand (about 70°). Warning is an ochre from the same earth family. Destructive is magenta-crimson (danger.600 light, danger.400 dark), far from the brand in hue in both modes. Every status pair measures at least 5.5:1.",
    "typography": "The type scale climbs at a 1.4 ratio through the heading tier: heading-md 20, heading-lg 28, display-md 40, display-lg 56. Body steps are 14, 16 and 18. Gloock ships one weight (400). It is used only from heading-lg (28px) upward, with letterSpacing tightening from -0.015em at 28px to -0.025em at 56px. Albert Sans covers navigation, forms, tables and buttons at 400, 500 and 600. body-md is 16px with a 1.6 line height for long descriptions. DM Mono at 400 and 500 is used only for order IDs, license keys and code.",
    "layout": "Comfortable density on a 4px base grid. Content columns max out at 1120px. Creator cards and product grids use space.6 (24px) gutters. List rows are at least 48px tall (space.12). Card padding is space.6.",
    "elevation": "Low elevation overall. Cards use a 1px border token plus shadow.sm. shadow.md is for menus and popovers. shadow.lg is only for dialogs and sheets. In dark mode, cards lift by surface color (#202722 on #161c18) rather than by stronger shadows.",
    "shapes": "radius.md (12px) applies to buttons and inputs. radius.lg (16px) applies to cards. radius.xl (24px) applies to large media frames and cover art. radius.sm (6px) applies to tooltips and inline tags. radius.full is reserved for badges and filter chips."
  },
  "primitives": {
    "color": {
      "brand": {
        "50": "#f6f8ec",
        "100": "#eaf0cf",
        "200": "#d6e1a6",
        "300": "#bccd78",
        "400": "#a2b353",
        "500": "#879a36",
        "600": "#6c7d26",
        "700": "#55621d",
        "800": "#414b18",
        "900": "#2d3411",
        "950": "#1a1f09"
      },
      "neutral": {
        "50": "#f5f7f5",
        "100": "#e9ecea",
        "200": "#d5dad6",
        "300": "#b8bfba",
        "400": "#98a09b",
        "500": "#7b8580",
        "600": "#626c67",
        "700": "#4f5853",
        "800": "#3d4540",
        "900": "#2b322e",
        "950": "#161c18"
      },
      "success": {
        "50": "#e8f7ef",
        "100": "#c9eedb",
        "200": "#a3dfc2",
        "300": "#76cba5",
        "400": "#4fb287",
        "500": "#30946c",
        "600": "#1f7b57",
        "700": "#17654a",
        "800": "#0f4f39",
        "900": "#093826",
        "950": "#04221a"
      },
      "warning": {
        "50": "#fdf8e6",
        "100": "#faefc4",
        "200": "#f3e09a",
        "300": "#e8cc6a",
        "400": "#d6b246",
        "500": "#bf9629",
        "600": "#a17a16",
        "700": "#845f0c",
        "800": "#664708",
        "900": "#4a3304",
        "950": "#2d1f02"
      },
      "danger": {
        "50": "#fff3f6",
        "100": "#ffe1e9",
        "200": "#ffc4d3",
        "300": "#ff98b3",
        "400": "#f66e89",
        "500": "#e0456c",
        "600": "#c02d56",
        "700": "#9c2145",
        "800": "#7a1834",
        "900": "#560f25",
        "950": "#380a18"
      }
    },
    "font": {
      "display": {
        "family": "Gloock",
        "fallback": "Georgia, serif",
        "source": "google",
        "weights": [
          400
        ]
      },
      "sans": {
        "family": "Albert Sans",
        "fallback": "system-ui, sans-serif",
        "source": "google",
        "weights": [
          400,
          500,
          600
        ]
      },
      "mono": {
        "family": "DM Mono",
        "fallback": "ui-monospace, monospace",
        "source": "google",
        "weights": [
          400,
          500
        ]
      }
    },
    "radius": {
      "none": 0,
      "sm": 6,
      "md": 12,
      "lg": 16,
      "xl": 24,
      "full": 9999
    },
    "space": {
      "0": 0,
      "1": 4,
      "2": 8,
      "3": 12,
      "4": 16,
      "5": 20,
      "6": 24,
      "8": 32,
      "10": 40,
      "12": 48,
      "16": 64,
      "20": 80,
      "24": 96,
      "0.5": 2,
      "1.5": 6
    },
    "shadow": {
      "sm": "0 1px 2px rgba(43, 50, 46, 0.06)",
      "md": "0 4px 14px -2px rgba(43, 50, 46, 0.12)",
      "lg": "0 16px 40px -8px rgba(43, 50, 46, 0.20)"
    }
  },
  "typography": {
    "display-lg": {
      "font": "display",
      "size": 56,
      "lineHeight": 1.08,
      "weight": 400,
      "letterSpacing": -0.025
    },
    "display-md": {
      "font": "display",
      "size": 40,
      "lineHeight": 1.12,
      "weight": 400,
      "letterSpacing": -0.02
    },
    "heading-lg": {
      "font": "display",
      "size": 28,
      "lineHeight": 1.2,
      "weight": 400,
      "letterSpacing": -0.015
    },
    "heading-md": {
      "font": "sans",
      "size": 20,
      "lineHeight": 1.3,
      "weight": 600,
      "letterSpacing": -0.01
    },
    "heading-sm": {
      "font": "sans",
      "size": 16,
      "lineHeight": 1.4,
      "weight": 600,
      "letterSpacing": -0.005
    },
    "body-lg": {
      "font": "sans",
      "size": 18,
      "lineHeight": 1.6,
      "weight": 400,
      "letterSpacing": 0
    },
    "body-md": {
      "font": "sans",
      "size": 16,
      "lineHeight": 1.6,
      "weight": 400,
      "letterSpacing": 0
    },
    "body-sm": {
      "font": "sans",
      "size": 14,
      "lineHeight": 1.55,
      "weight": 400,
      "letterSpacing": 0
    },
    "label": {
      "font": "sans",
      "size": 14,
      "lineHeight": 1.3,
      "weight": 500,
      "letterSpacing": 0.005
    },
    "caption": {
      "font": "sans",
      "size": 12,
      "lineHeight": 1.5,
      "weight": 500,
      "letterSpacing": 0.01
    },
    "code": {
      "font": "mono",
      "size": 14,
      "lineHeight": 1.55,
      "weight": 400,
      "letterSpacing": 0
    }
  },
  "semantic": {
    "light": {
      "background": "{color.neutral.50}",
      "foreground": "{color.neutral.950}",
      "card": "#ffffff",
      "card-foreground": "{color.neutral.950}",
      "popover": "#ffffff",
      "popover-foreground": "{color.neutral.950}",
      "primary": "{color.brand.700}",
      "primary-foreground": "#ffffff",
      "secondary": "{color.neutral.100}",
      "secondary-foreground": "{color.neutral.900}",
      "muted": "{color.neutral.100}",
      "muted-foreground": "{color.neutral.700}",
      "accent": "{color.brand.100}",
      "accent-foreground": "{color.brand.900}",
      "destructive": "{color.danger.600}",
      "destructive-foreground": "#ffffff",
      "success": "{color.success.700}",
      "success-foreground": "#ffffff",
      "warning": "{color.warning.200}",
      "warning-foreground": "{color.warning.900}",
      "border": "{color.neutral.200}",
      "input": "{color.neutral.300}",
      "ring": "{color.brand.600}"
    },
    "dark": {
      "background": "{color.neutral.950}",
      "foreground": "{color.neutral.50}",
      "card": "#202722",
      "card-foreground": "{color.neutral.50}",
      "popover": "{color.neutral.900}",
      "popover-foreground": "{color.neutral.50}",
      "primary": "{color.brand.400}",
      "primary-foreground": "{color.brand.950}",
      "secondary": "{color.neutral.800}",
      "secondary-foreground": "{color.neutral.100}",
      "muted": "{color.neutral.800}",
      "muted-foreground": "{color.neutral.300}",
      "accent": "{color.brand.900}",
      "accent-foreground": "{color.brand.100}",
      "destructive": "{color.danger.400}",
      "destructive-foreground": "{color.danger.950}",
      "success": "{color.success.400}",
      "success-foreground": "{color.success.950}",
      "warning": "{color.warning.400}",
      "warning-foreground": "{color.warning.950}",
      "border": "{color.neutral.800}",
      "input": "{color.neutral.700}",
      "ring": "{color.brand.400}"
    }
  },
  "components": {
    "button": {
      "height": 40,
      "paddingX": "{space.4}",
      "radius": "{radius.md}",
      "typography": "{typography.label}",
      "fontWeight": 600
    },
    "input": {
      "height": 44,
      "paddingX": "{space.3}",
      "radius": "{radius.md}",
      "typography": "{typography.body-sm}",
      "borderWidth": 1
    },
    "card": {
      "padding": "{space.6}",
      "radius": "{radius.lg}",
      "shadow": "{shadow.sm}",
      "borderWidth": 1
    },
    "badge": {
      "height": 24,
      "paddingX": "{space.2}",
      "radius": "{radius.full}",
      "typography": "{typography.caption}"
    }
  },
  "guidance": {
    "do": [
      "Use the primary button (brand.700 light, brand.400 dark) for exactly one main action per view, such as Publish or Buy; render other actions as secondary or ghost variants.",
      "Show focus with a 2px ring token offset 2px from the control, on buttons, inputs, chips and cards that are links.",
      "Set prices and counts in Albert Sans with font-feature-settings: 'tnum', and right-align them in tables.",
      "Use Gloock only for heading-lg (28px), display-md (40px) and display-lg (56px), in sentence case.",
      "Pair every success, warning and destructive badge or alert with an icon or text label.",
      "Keep list rows at least 48px tall and inputs 44px tall; use radius.md (12px) on controls and radius.lg (16px) on cards."
    ],
    "dont": [
      "Don't use primary or brand tokens for errors, refunds or failed payments; use destructive and destructive-foreground.",
      "Don't set body paragraphs on accent (brand.100 light, brand.900 dark); reserve it for selected rows, highlights and active filter chips.",
      "Don't give cards shadow.md or shadow.lg; cards use shadow.sm plus a 1px border, and dark cards lift through the #202722 surface.",
      "Don't use #000000 or neutral greys outside the ramp; every surface, border and text color comes from neutral.50–neutral.950.",
      "Don't set Gloock below 28px, in all caps, or at any weight other than 400.",
      "Don't use muted-foreground for prices, error text or form labels; use foreground, destructive and label typography."
    ]
  }
}