Skip to content
Monday Morning Monday Morning
⌘K

Design System & Skins

Monday Morning’s desktop app ships with a design system built on design tokens and CSS custom properties. The visual layer is fully themeable — you can switch between built-in skins or create your own. The system is designed to keep the app’s look consistent while giving you control over colors, spacing, and typography.

Design tokens

Section titled “Design tokens”

Design tokens are the foundation. They define the visual primitives — colors, spacing, font sizes, border radii — as named values that the entire UI references:

/* Example token set */
--mm-bg-primary: #0a0a0a;
--mm-bg-card: #141414;
--mm-bg-hover: #1a1a1a;
--mm-text-primary: #e5e5e5;
--mm-text-secondary: #999999;
--mm-accent: #3b82f6;
--mm-border: #262626;
--mm-radius-sm: 4px;
--mm-radius-md: 8px;
--mm-spacing-sm: 8px;
--mm-spacing-md: 16px;

Every component in the app uses these tokens instead of hard-coded values. When you change a token, the change propagates everywhere that token is used.

Skins

Section titled “Skins”

A skin is a complete set of token values that gives the app a distinct visual identity. Monday Morning includes several built-in skins:

SkinDescription
Default DarkThe standard dark theme — neutral grays with blue accents
LightLight backgrounds with dark text for bright environments
MidnightDeeper blacks with purple accents
TerminalMonospace fonts, green-on-black, retro terminal aesthetic

Each skin overrides the same set of CSS custom properties, so the layout and component structure stay identical — only the visual presentation changes.

Switching skins

Section titled “Switching skins”

You can change skins from the desktop app’s settings:

  1. Open Settings (gear icon or keyboard shortcut)
  2. Navigate to the Appearance section
  3. Select a skin from the dropdown
  4. The change applies immediately — no restart needed

The selected skin is stored in your local preferences and persists across sessions.

How the design system is structured

Section titled “How the design system is structured”

The token architecture follows a three-layer model:

Primitive tokens     →  Semantic tokens     →  Component tokens
(raw values)            (purpose-based)         (specific usage)


--color-blue-500     →  --mm-accent          →  --mm-button-bg
--color-gray-900     →  --mm-bg-primary      →  --mm-sidebar-bg
--size-4             →  --mm-spacing-md      →  --mm-card-padding
  • Primitive tokens are raw values (colors, sizes) that never appear in component CSS directly.
  • Semantic tokens (the --mm-* properties) describe purpose: “this is the primary background” or “this is the accent color.”
  • Component tokens are optional overrides for specific components when the semantic token isn’t granular enough.

Most of the time, you only work with semantic tokens. Component tokens exist as escape hatches.

Creating a custom skin

Section titled “Creating a custom skin”

To create your own skin, define a CSS file that overrides the semantic tokens:

my-custom-skin.css
:root[data-skin="custom"] {
  --mm-bg-primary: #1a1a2e;
  --mm-bg-card: #16213e;
  --mm-bg-hover: #0f3460;
  --mm-text-primary: #e5e5e5;
  --mm-text-secondary: #a0a0b0;
  --mm-accent: #e94560;
  --mm-border: #1a1a3e;
}

Place this file in the app’s custom styles directory and register it in settings. The app picks up the new skin without any rebuild step.

Figma integration

Section titled “Figma integration”

The design token set is mirrored in a Figma library, connected via the Figma MCP integration. This means:

  • Designers work with the same token names and values that appear in code
  • Token updates in Figma can be synced to the codebase
  • Component designs in Figma match what renders in the app

The Figma connection uses the MCP (Model Context Protocol) bridge, so Claude Code sessions can read design tokens and component specs directly from Figma when working on UI tasks.

Section titled “Related”