Skip to content

Card Design Styles

Jump to bottom
tempus2016 edited this page Jun 22, 2026 · 1 revision

Every TaskMate card can be themed independently, with a global default that any card can inherit. Pick a single look for your whole dashboard, or give each card its own style — completion sounds, layout, and behaviour are unchanged; only the visual skin differs.

The four card design styles: Classic, Playroom, Console, Clean Pro

New in v4.2.0 (#539)

The Four Styles

Style Feel Accent Fonts
Classic The original TaskMate look — the default, unchanged Per-card header_color / HA theme HA theme fonts
Playroom Warm, rounded, picture-book — soft cream backgrounds Purple Baloo 2 / Nunito
Console Dark, neon-accented game-HUD with glow effects Cyan Space Grotesk / Inter / JetBrains Mono
Clean Pro Minimal, flat, professional SaaS with low-contrast shadows Blue Manrope / Inter

Classic is the default and is left exactly as it was — existing dashboards look identical until you opt in to another style.

Setting a Style Per Card

Each card's visual (GUI) editor has a Card design dropdown with options:

  • Use global default
  • Classic
  • Playroom
  • Console
  • Clean Pro

Or set it in YAML with the card_design config key:

type: custom:taskmate-activity-card
entity: sensor.taskmate_overview
card_design: playroom

Accepted values: classic | playroom | console | cleanpro | global. An absent value (or global) means the card follows the global default.

Global Default

Set the default for every card from the Admin Panel → Settings → Default card design selector.

Default card design in Settings

Every card left on Use global default updates together when you change this selector. If the global default has never been set, it falls back to Classic.

Precedence: a card's own card_design (when not global) wins; otherwise the card follows the global default; if neither is set, Classic.

Scope & Safety

  • The styles apply to all 18 TaskMate cards.
  • Design tokens are scoped per card (shadow-DOM scoped), so mixing styles across a single dashboard is safe — a Console child card next to a Clean Pro rewards card both render correctly.
  • Styling never leaks into the rest of Home Assistant; only TaskMate cards are affected.
  • Each style has light and dark variants that follow your Home Assistant light/dark setting automatically.

Related

Clone this wiki locally