Dashboard

Mist Tone

A pale-grey order book: one blue pencil, one black stamp.

A white page with faint grey tonal steps and a narrow 792px column floating in wide empty gutters. No borders, shadows or gradients; depth comes from one tonal step. Big semibold figures trail muted 14px units, split-label filter pills, sparse solid-blue bars and a pale-blue notice strip carry the accents, with exactly one black action per context. Ideal for wholesale, order management, inventory and shop-ops dashboards that must answer in two seconds.

Free · Updated · Live demo

Signature details

  • Depth by tone only, no borders or shadows
  • Big figure with muted 14px unit
  • Split-label filter pills with hairline
  • One black action per context

Page sections

  1. Announcement bar
  2. Sidebar
  3. Header and notice
  4. Summary cards
  5. Filter toolbar
  6. KPI trio
  7. Revenue bar chart
  8. Per-product cards

Palette

  • Page White #FFFFFF — background
  • Mist Sidebar #F7F8FA — sidebar background
  • Fog Card #F5F6F8 — surface
  • Slate Track #EBEDF1 — surface-2 / selected
  • Gridline Grey #DDE1E6 — border
  • Ink #1B1D21 — text
  • Pencil Grey #646A75 — text-muted
  • Blue Pencil #3B7BF4 — accent
  • Stamp Black #17181A — accent

Typefaces

  • Inter — display / body
  • JetBrains Mono — mono

Prompt outline

  1. Design Intent
  2. Design Tokens
  3. Typography
  4. Color & Material
  5. Layout & Grid
  6. Page Blueprint
  7. Components
  8. Motion & Interaction
  9. Responsive Behavior
  10. Accessibility
  11. Do / Don't
  12. Output Requirements

How to use this style

Copy the full prompt into any AI; or download it as an agent skill / Cursor rule / AGENTS.md; or, in any MCP-connected tool, say: “Build this page in the mist-tone-ledger style from ui-atlas”.

Free preview

# Mist Tone — Wholesale Operations Dashboard

You are a senior product designer and front-end engineer with an obsessive eye for typography, spacing and restraint. Build an authenticated operations dashboard for a fictional wholesale bakery platform called "Larkrise Bakehouse" in the **Mist Tone** style described below. Treat every value in this brief as a spec, not a suggestion.

## 1. Design Intent

Calm, utilitarian, quietly friendly. Picture a well-kept order book printed on pale grey paper, with one blue pencil for the data and one black stamp for the single action that matters. It is for shop owners and dispatchers who open it daily and want answers in two seconds. The first viewport must feel spacious, soft and trustworthy: a narrow centred column floating in wide empty gutters, with no decoration at all.