Presets Glaze Wheelhouse
Glaze Wheelhouse
Earthy creator tools: moss-green actions on cool green-grey neutrals, soft 12–16px shapes and a Gloock display voice.
Colour
Five ramps, 50 to 950
Semantic tokens
Light and dark
Typography
Gloock, Albert Sans and DM Mono
Grow what matters
display-lg · 56/1.08 · 400 · -0.025em
Gloock
Grow what matters
display-md · 40/1.12 · 400 · -0.02em
Gloock
A calmer way to work
heading-lg · 28/1.2 · 400 · -0.015em
Gloock
A calmer way to work
heading-md · 20/1.3 · 600 · -0.01em
Albert Sans
A calmer way to work
heading-sm · 16/1.4 · 600 · -0.005em
Albert Sans
Good systems disappear. People notice the product, not the parts.
body-lg · 18/1.6 · 400
Albert Sans
Good systems disappear. People notice the product, not the parts.
body-md · 16/1.6 · 400
Albert Sans
Good systems disappear. People notice the product, not the parts.
body-sm · 14/1.55 · 400
Albert Sans
Save changes
label · 14/1.3 · 500 · 0.005em
Albert Sans
Updated 2 minutes ago
caption · 12/1.5 · 500 · 0.01em
Albert Sans
const theme = preset("glaze-wheelhouse")
code · 14/1.55 · 400
DM Mono
Spacing · radius · shadow
The quiet rules
6px
12px
16px
24px
full
Components
Every part, every state
Buttons
Inputs
Navigation
Feedback
Cards, table and overlays
$48,210
74% of the $65k goalWhat changed this quarter, and what to do next.
Product designer
| Customer | Date | Status | Amount | |
|---|---|---|---|---|
| MRMd Rakib Shekh | Mar 12 | Paid | $2,400.00 | |
| NJNusrat Jahan | Mar 11 | Pending | $860.00 | |
| IJIsrat Jahan | Mar 09 | Failed | $1,120.00 |
“Q3 launch” and its 24 files will be removed for everyone. You can’t undo this.
When customers write to you, their messages show up here.
Invite your teamScreens
Glaze Wheelhouse as a real product
Landing page
Glaze Wheelhouse
Earthy creator tools: moss-green actions on cool green-grey neutrals, soft 12–16px shapes and a Gloock display voice.
+24.6%
Dashboard
Good morning, Rakib
Overview
$48,210
+12.4%2,318
+4.1%1.8%
-0.3%| Customer | Date | Status | Amount | |
|---|---|---|---|---|
| MRMd Rakib Shekh | Mar 12 | Paid | $2,400.00 | |
| NJNusrat Jahan | Mar 11 | Pending | $860.00 | |
| IJIsrat Jahan | Mar 09 | Failed | $1,120.00 |
Phone app
Welcome back
Md Rakib Shekh$12,480
Q3 launch
Pricing
$0 /month
For trying things out
Start free- 1 project
- Basic reports
- Email support
$24 /month
For growing teams
Choose Pro- Unlimited projects
- Team workspaces
- Priority support
- Advanced reports
$79 /month
For larger organisations
Choose Business- Everything in Pro
- SSO and audit log
- A dedicated manager
Sign in
Welcome back
Sign in to continue to your workspace.
“We set up our whole workspace in an afternoon.”
NJNusrat JahanHead of operations
Settings
Settings
Use Glaze Wheelhouse
In Figma
Open UIX, go to Presets and search “Glaze Wheelhouse”. Press Use this preset, then Sync to Figma.
Install UIXIn code
Install the theme with shadcn/ui, or download the files.
DESIGN.mdtheme.csstokens.dtcg.jsonfigma-variables.jsonshadcn-theme.jsonpreset.json
Send to your AI agent
Connect the UIX MCP once, then ask Claude Code, Cursor or any MCP client: “Use the Glaze Wheelhouse preset”.
Get your MCP linkAbout 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.
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.
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.
Don’t
- 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.
- Access
- Free
- Industries
- creator economy, membership, digital goods
- Mood
- warm, approachable, handmade, calm
- Display font
- Gloock
- Body font
- Albert Sans
- Mono font
- DM Mono
- Density
- Comfortable
- Contrast
- Standard
- Corner radius
- 12px