---
version: alpha
name: Glaze Wheelhouse
description: "Earthy creator tools: moss-green actions on cool green-grey neutrals, soft 12–16px shapes and a Gloock display voice."
colors:
  background: "#f5f7f5"
  foreground: "#161c18"
  card: "#ffffff"
  card-foreground: "#161c18"
  popover: "#ffffff"
  popover-foreground: "#161c18"
  primary: "#55621d"
  primary-foreground: "#ffffff"
  secondary: "#e9ecea"
  secondary-foreground: "#2b322e"
  muted: "#e9ecea"
  muted-foreground: "#4f5853"
  accent: "#eaf0cf"
  accent-foreground: "#2d3411"
  destructive: "#c02d56"
  destructive-foreground: "#ffffff"
  success: "#17654a"
  success-foreground: "#ffffff"
  warning: "#f3e09a"
  warning-foreground: "#4a3304"
  border: "#d5dad6"
  input: "#b8bfba"
  ring: "#6c7d26"
  dark-background: "#161c18"
  dark-foreground: "#f5f7f5"
  dark-card: "#202722"
  dark-card-foreground: "#f5f7f5"
  dark-popover: "#2b322e"
  dark-popover-foreground: "#f5f7f5"
  dark-primary: "#a2b353"
  dark-primary-foreground: "#1a1f09"
  dark-secondary: "#3d4540"
  dark-secondary-foreground: "#e9ecea"
  dark-muted: "#3d4540"
  dark-muted-foreground: "#b8bfba"
  dark-accent: "#2d3411"
  dark-accent-foreground: "#eaf0cf"
  dark-destructive: "#f66e89"
  dark-destructive-foreground: "#380a18"
  dark-success: "#4fb287"
  dark-success-foreground: "#04221a"
  dark-warning: "#d6b246"
  dark-warning-foreground: "#2d1f02"
  dark-border: "#3d4540"
  dark-input: "#4f5853"
  dark-ring: "#a2b353"
typography:
  display-lg:
    fontFamily: Gloock
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -0.025em
  display-md:
    fontFamily: Gloock
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -0.02em
  heading-lg:
    fontFamily: Gloock
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.015em
  heading-md:
    fontFamily: Albert Sans
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Albert Sans
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.005em
  body-lg:
    fontFamily: Albert Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Albert Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Albert Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
  label:
    fontFamily: Albert Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.005em
  caption:
    fontFamily: Albert Sans
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.01em
  code:
    fontFamily: DM Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
rounded:
  sm: 6px
  md: 12px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 44px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 44px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
---

# Glaze Wheelhouse

## 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.

Moods: warm, approachable, handmade, calm. Built for: creator-economy, membership, digital-goods. Density: comfortable.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

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.

- **Primary** `#55621d` / dark `#a2b353`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f5f7f5` / dark `#161c18` on `#161c18` / dark `#f5f7f5`: page surface and body text.
- **Card** `#ffffff` / dark `#202722`: raised surfaces.
- **Secondary** `#e9ecea` / dark `#3d4540`: secondary buttons and quiet controls.
- **Muted** `#e9ecea` / dark `#3d4540` with **muted-foreground** `#4f5853` / dark `#b8bfba`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#eaf0cf` / dark `#2d3411`: highlights, selected rows, badges.
- **Destructive** `#c02d56` / dark `#f66e89`, **Success** `#17654a` / dark `#4fb287`, **Warning** `#f3e09a` / dark `#d6b246`: status only, always paired with an icon or label.
- **Border** `#d5dad6` / dark `#3d4540`, **Input** `#b8bfba` / dark `#4f5853`, **Ring** `#6c7d26` / dark `#a2b353`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## 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.

- Display: **Gloock** (fallback Georgia, serif)
- Interface: **Albert Sans** (fallback system-ui, sans-serif)
- Mono: **DM Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Gloock | 56px | 1.08 | 400 |
| display-md | Gloock | 40px | 1.12 | 400 |
| heading-lg | Gloock | 28px | 1.2 | 400 |
| heading-md | Albert Sans | 20px | 1.3 | 600 |
| heading-sm | Albert Sans | 16px | 1.4 | 600 |
| body-lg | Albert Sans | 18px | 1.6 | 400 |
| body-md | Albert Sans | 16px | 1.6 | 400 |
| body-sm | Albert Sans | 14px | 1.55 | 400 |
| label | Albert Sans | 14px | 1.3 | 500 |
| caption | Albert Sans | 12px | 1.5 | 500 |
| code | DM Mono | 14px | 1.55 | 400 |

## 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.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

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.

- 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)`

## 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.

Radius scale: sm 6px, md 12px, lg 16px, xl 24px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 40px tall, 16px horizontal padding, label type. Input: 44px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **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.
- **Do:** Show focus with a 2px ring token offset 2px from the control, on buttons, inputs, chips and cards that are links.
- **Do:** Set prices and counts in Albert Sans with font-feature-settings: 'tnum', and right-align them in tables.
- **Do:** Use Gloock only for heading-lg (28px), display-md (40px) and display-lg (56px), in sentence case.
- **Do:** Pair every success, warning and destructive badge or alert with an icon or text label.
- **Do:** Keep list rows at least 48px tall and inputs 44px tall; use radius.md (12px) on controls and radius.lg (16px) on cards.
- **Don't:** Don't use primary or brand tokens for errors, refunds or failed payments; use destructive and destructive-foreground.
- **Don't:** 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:** 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:** Don't use #000000 or neutral greys outside the ramp; every surface, border and text color comes from neutral.50–neutral.950.
- **Don't:** Don't set Gloock below 28px, in all caps, or at any weight other than 400.
- **Don't:** Don't use muted-foreground for prices, error text or form labels; use foreground, destructive and label typography.