# Uno Themes Simple

> Comprehensive reference for the Uno Simple theme — designer/wireframe-style theming for Uno Platform apps. Covers SimpleTheme configuration (color/font overrides, default size), Simple-specific style keys (danger buttons, size variants, error inputs, PersonPicture variants), controls without Material equivalent (Expander, AutoSuggestBox, ToolTip, PersonPicture), Simple utility brushes (overlays, scrims, measurement/debug), and the Simple-specific pink primitive scale.

- Skill: `unoplatform/uno-themes-simple` (Agent Skill)
- Install (CLI): `npx skillmds@latest add unoplatform/uno-themes-simple`
- Raw SKILL.md: https://api.skillmd.com/api/skills/unoplatform/uno-themes-simple/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: unoplatform (https://skillmd.com/u/unoplatform)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/unoplatform/uno-themes-simple

---


# Uno Simple Theme — Agent Skill

The Simple theme is Uno's designer/wireframe-style theme. It shares the semantic surface (style keys, typography keys, color keys, brush keys) with Material via the **Semantic Design Language** — see `uno-themes-semantic-colors-brushes` for the shared layer. This skill covers the **Simple-only** style keys, brushes, and `SimpleTheme` configuration that are not portable to other themes.

## Workflow

> **Docs lookup:** call `uno_platform_docs_search(...)` first, then `uno_platform_docs_fetch(sourcePath="…")` using the `sourcePath` field from a result (a relative `.md` path; add the result's `anchor` for a section). Never pass a URL, a `.html` link, or a hand-built path.

### Step 1: Search the docs for the topic

| Topic | Search query |
|---|---|
| Installation / `SimpleTheme` setup | `uno_platform_docs_search("Uno Simple theme installation SimpleTheme UnoFeatures")` |
| Simple style keys (buttons, inputs, etc.) | `uno_platform_docs_search("Uno Simple controls styles danger size variants")` |
| `DefaultSize` (Small / Medium) | `uno_platform_docs_search("Uno Simple DefaultSize SimpleControlSize button height")` |
| Color override / palette | `uno_platform_docs_search("Uno Simple ColorOverrideSource palette grayscale")` |
| Font override | `uno_platform_docs_search("Uno Simple FontOverrideSource Inter font family")` |
| Utility brushes (overlays, scrims) | `uno_platform_docs_search("Uno Simple utility brushes overlay scrim measurement")` |

### Step 2: Fetch a page

Uno's published docs have **no Simple-theme-specific pages** — the inline tables in this skill are the authoritative reference for Simple. For cross-theme topics, search and fetch the `sourcePath` from a result, e.g. lightweight styling:

- **Lightweight Styling** (cross-theme): `external/uno.themes/doc/lightweight-styling.md`

```
uno_platform_docs_fetch(sourcePath="external/uno.themes/doc/lightweight-styling.md")
```

## Critical Rules

- **Simple uses a flat grayscale palette** for all roles except Error (which uses red). Primary, Secondary, Tertiary, Surface, and Outline are achromatic grays. To introduce brand colors, override the palette via `ColorOverrideSource` / `ColorOverrideDictionary`.
- **Simple defaults to Inter** for all typography (`SimpleFontFamily`); `CharacterSpacing=0` on all styles; font weights are `Bold` / `SemiBold` / `Normal` (no `Medium`).
- **Typography style keys are NEVER theme-prefixed.** Write `DisplayLarge`, `BodyMedium`, `LabelSmall` — NOT `SimpleDisplayLarge`. The theme-prefix pattern only applies to the Simple-only control styles listed below.
- **`DefaultSize` affects implicit styles only.** Setting `<SimpleTheme DefaultSize="Medium" />` switches the unsized button / icon-button / toggle-button defaults from 32px (Small) to 40px (Medium). Size-specific styles (`SimpleSmall*`, `SimpleMedium*`) always use their declared size regardless of `DefaultSize`.

## SimpleTheme Configuration

`SimpleTheme` (namespace `using:Uno.Simple`) accepts:

| Property | Type | Default | Purpose |
|---|---|---|---|
| `ColorOverrideSource` | `string` (URI) | — | Path to a XAML ResourceDictionary overriding `*Color` keys |
| `ColorOverrideDictionary` | `ResourceDictionary` | — | Inline ResourceDictionary overriding `*Color` keys |
| `FontOverrideSource` | `string` (URI) | — | Path to a XAML ResourceDictionary overriding font resources |
| `FontOverrideDictionary` | `ResourceDictionary` | — | Inline ResourceDictionary overriding font resources |
| `DefaultSize` | `SimpleControlSize` | `Small` | Default size variant for buttons / icon buttons / toggle buttons |

```xml
<SimpleTheme xmlns="using:Uno.Simple"
             ColorOverrideSource="ms-appx:///Styles/Application/ColorOverride.xaml"
             FontOverrideSource="ms-appx:///Styles/Application/FontOverride.xaml"
             DefaultSize="Medium" />
```

When overriding the palette, **always provide both `Light` and `Default` (Dark) theme values**.

## Simple-Only Style Keys

### Button Variants (no Material equivalent)

| Style Key | Control | Use For |
|---|---|---|
| `SimpleDangerPrimaryButtonStyle` | `Button` | Destructive filled action ("Delete account") |
| `SimpleDangerSubtleButtonStyle` | `Button` | Destructive text action |
| `SimpleIconButtonNeutralStyle` | `Button` | Neutral (secondary) icon button |
| `SimpleIconButtonSubtleStyle` | `Button` | Subtle (tertiary) icon button |
| `SimpleIconButtonDangerPrimaryStyle` | `Button` | Destructive filled icon button |
| `SimpleIconButtonDangerSubtleStyle` | `Button` | Destructive subtle icon button |

### Size Variants (Small / Medium)

Pattern: `Simple{Size}{Style}`. `Small` = 32px, `Medium` = 40px (button height).

| Size | Button | Icon Button | ToggleButton |
|---|---|---|---|
| Small | `SimpleSmallFilledButtonStyle`, `SimpleSmallFilledTonalButtonStyle`, `SimpleSmallTextButtonStyle`, `SimpleSmallDangerPrimaryButtonStyle`, `SimpleSmallDangerSubtleButtonStyle` | `SimpleSmallIconButtonStyle`, `SimpleSmallIconButtonNeutralStyle`, `SimpleSmallIconButtonSubtleStyle`, `SimpleSmallIconButtonDangerPrimaryStyle`, `SimpleSmallIconButtonDangerSubtleStyle` | `SimpleSmallToggleButtonStyle` |
| Medium | `SimpleMediumFilledButtonStyle`, `SimpleMediumFilledTonalButtonStyle`, `SimpleMediumTextButtonStyle`, `SimpleMediumDangerPrimaryButtonStyle`, `SimpleMediumDangerSubtleButtonStyle` | `SimpleMediumIconButtonStyle`, `SimpleMediumIconButtonNeutralStyle`, `SimpleMediumIconButtonSubtleStyle`, `SimpleMediumIconButtonDangerPrimaryStyle`, `SimpleMediumIconButtonDangerSubtleStyle` | `SimpleMediumToggleButtonStyle` |

### Input Variants

| Style Key | Control | Use For |
|---|---|---|
| `SimpleTextBoxErrorStyle` | `TextBox` | Error / validation state |
| `SimpleTextBoxSmallStyle` | `TextBox` | Small size variant |
| `SimpleComboBoxErrorStyle` | `ComboBox` | Error / validation state |

### Controls Without Material Equivalent

| Style Key | Control | Notes |
|---|---|---|
| `SimpleExpanderStyle` | `Expander` | No Material counterpart |
| `SimpleAutoSuggestBoxStyle` | `AutoSuggestBox` | No Material counterpart |
| `SimpleToolTipStyle` | `ToolTip` | No Material counterpart |
| `SimplePersonPictureStyle` | `PersonPicture` | Circular, medium (default) |
| `SimplePersonPictureSmallStyle` | `PersonPicture` | Circular, small |
| `SimplePersonPictureLargeStyle` | `PersonPicture` | Circular, large |
| `SimplePersonPictureSquareStyle` | `PersonPicture` | Square (rounded), medium |
| `SimplePersonPictureSquareSmallStyle` | `PersonPicture` | Square (rounded), small |
| `SimplePersonPictureSquareLargeStyle` | `PersonPicture` | Square (rounded), large |

## Simple-Specific Utility Brushes

Beyond the shared semantic brushes, Simple defines utility brushes for overlays, scrims, and measurement/debug overlays. Defined in Simple's `ColorPalette.xaml`; no shared equivalent.

| Brush Key | Light | Dark | Purpose |
|---|---|---|---|
| `SimpleBackgroundUtilitiesBlanketBrush` | `#B2000000` | `#B2000000` | Heavy overlay / blanket |
| `SimpleBackgroundUtilitiesMeasurementBrush` | Pink 200 | Pink 800 | Measurement overlay background |
| `SimpleBackgroundUtilitiesOverlayBrush` | `#80000000` | `#80000000` | Semi-transparent overlay |
| `SimpleBackgroundUtilitiesScrimBrush` | `#CCFFFFFF` | `#CC000000` | Scrim behind dialogs / sheets |
| `SimpleTextUtilitiesOnMeasurementBrush` | Pink 800 | Pink 200 | Text on measurement surfaces |
| `SimpleTextUtilitiesOnOverlayBrush` | `OnSurfaceInverseBrush` | `OnSurfaceBrush` | Text on overlay surfaces |
| `SimpleIconUtilitiesBrush` | Pink 600 | Pink 400 | Measurement / debug icons |
| `SimpleIconUtilitiesOnMeasurementBrush` | Pink 800 | Pink 200 | Icons on measurement surfaces |
| `SimpleBorderUtilitiesMeasurementBrush` | Pink 400 | Pink 600 | Measurement / debug borders |
| `SimpleBorderUtilitiesSwatchBrush` | `#3D000000` | `#3DFFFFFF` | Color swatch borders |

These reference a Simple-specific **pink primitive scale**: `SimplePink200Color` through `SimplePink800Color`. Pink values **intentionally swap** between light and dark themes to maintain contrast.

## Customization Methods

Simple supports five escalating overrides (ordered by scope):

1. **Override color palette (full cascade)** — `ColorOverrideSource` / `ColorOverrideDictionary` on `SimpleTheme`. All brushes cascade.
2. **Switch default size variant** — `DefaultSize="Medium"` on `SimpleTheme`. Affects implicit button / icon-button / toggle-button styles only; size-named variants are unaffected.
3. **Override specific brushes (targeted)** — `<SolidColorBrush x:Key="FilledButtonBackground" Color="..." />` in App.xaml.
4. **Override per-control instance (scoped)** — wrap the brush override inside the control's `Resources` block.
5. **Override font family** — `FontOverrideSource` / `FontOverrideDictionary` on `SimpleTheme`, or override `SimpleFontFamily` directly. Default is **Inter**.

Customization precedence (highest → lowest): per-instance `Control.Resources` → `Page.Resources` → app-level overrides → `SimpleTheme` defaults → `SharedColorPalette` / `SharedColors` / `SharedTypography` foundation.

## Related Skills

- [[uno-themes-semantic-colors-brushes]] — **Read this first** for the shared semantic surface (style keys, typography, palette, brushes) common to Simple AND Material. Most styling should use those portable keys; reach for Simple-prefixed styles only when targeting Simple-specific concepts (danger variants, explicit sizes, Expander, etc.).
- [[uno-themes-material]] — Material theme reference. Use when targeting Material instead of (or alongside) Simple.