Mist Tone
灰纸订单簿上，一支蓝铅笔和一枚黑印章
整页以白底与淡灰雾调为主，窄窄的 792px 内容列漂浮在宽阔的空白两侧，没有边框、阴影和渐变，深度只靠一档色调差。大号半粗数字后跟 14px 灰色单位，分段式筛选胶囊、稀疏的实心蓝柱图和淡蓝提示条构成全部点缀，每个场景只留一个黑色按钮。适合批发、订单管理、库存与门店运营后台，让店主和调度员两秒内读到答案。
免费 · 更新于 · Live demo
签名细节
- 仅靠色调差表现层次，无边框无阴影
- 大号数字后接 14px 灰色单位
- 分段标签筛选胶囊，含细竖线
- 每个场景仅一个黑色主按钮
页面区块
- 公告栏
- 侧边栏
- 页头与提示条
- 摘要卡片
- 筛选工具栏
- KPI 三卡
- 营收柱状图
- 分产品卡片
色板
- 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
字体
- Inter — display / body
- JetBrains Mono — mono
提示词目录
- Design Intent
- Design Tokens
- Typography
- Color & Material
- Layout & Grid
- Page Blueprint
- Components
- Motion & Interaction
- Responsive Behavior
- Accessibility
- Do / Don't
- Output Requirements
如何使用这套风格
复制提示词全文粘贴给任意 AI；或下载 Agent 技能 / Cursor 规则 / AGENTS.md；或在接入 MCP 的工具里说：“用 ui-atlas 的 mist-tone-ledger 风格做这个页面”。
免费预览
# 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.