基础变量层
覆盖按钮、表单、导航、数据、反馈、布局与展示等常见 Web 应用场景。
01 — 概述
设计规范
颜色、字体、间距、圆角等设计变量贯穿所有组件，确保统一与灵活兼得。
层级规范
文字与背景以五级灰度分层，替代纯黑纯灰，使界面层次丰富而不生硬。
强调色规范
统一的强调色仅用于主操作、激活态、关键标识，使界面重点突出。
快速安装
npm点击复制安装命令，再引入样式与脚本即可使用。
npm i @bloret-crew/blora-design
核心设计原则
Principles间距一致。 组件统一使用 4px 基础间距，按内容密度选择语义层级。
功能用色。 主色仅表示关键交互，成功、警告、危险和信息使用独立语义色。
圆角递进。 圆角从 6px 到 36px，表单控件统一使用 full radius。
动效简短。 缓动以
cubic-bezier(.25,.8,.25,1) 为主，时长 160–420ms。字体统一。 标题与正文共享现代无衬线字体，代码使用独立等宽字体。
无障碍优先。 交互元素 ≥ 40×40，对比度满足 WCAG AA，并支持键盘和 reduced-motion。
02 — 色彩
色彩系统
色板分三层：底色（背景）、文本色（内容）、强调色（交互与状态）。
Surfaces 表面层级
background 页面背景
--blora-background
surface-1 基础表面
--blora-surface-1
surface-2 次级表面
--blora-surface-2
surface-3 强调表面
--blora-surface-3
Text Colors 文本层级
text-strong 强标题
--blora-text-strong
foreground 默认前景
--blora-foreground
text-emphasis 强调文本
--blora-text-emphasis
text-muted 次要文本
--blora-text-muted
text-subtle 辅助文本
--blora-text-subtle
text-disabled 禁用文本
--blora-text-disabled
border-subtle 低对比边框
--blora-border-subtle
background 对比背景
--blora-background
Functional Colors 功能色
primary 主色
--blora-primary
danger 危险
--blora-danger
neutral 中性强调
--blora-accent-neutral
info 信息
--blora-info
success 成功
--blora-success
support 辅助
--blora-support
warning 警告
--blora-warning
secondary 次强调
--blora-accent-secondary
03 — 字体
字体
两套字族：标题与正文使用现代无衬线字体，代码使用等宽字体。字阶以 1.25 倍率递进。
| Blora Design | Avenir / Segoe UI · 48 / 600 | .blora-h1 |
| Blora Design | Avenir / Segoe UI · 36 / 600 | .blora-h2 |
| Blora Design | Avenir / Segoe UI · 28 / 600 | .blora-h3 |
| Blora Design | Avenir / Segoe UI · 22 / 600 | .blora-h4 |
| Blora Design 组件库示例文本。 | Noto Sans SC · 18 / 400 — lead | .blora-text-lead |
| Blora Design 组件库示例文本。 | Noto Sans SC · 16 / 400 — base | body |
| Blora Design 组件库示例文本。 | Noto Sans SC · 14 / 400 — sm | .blora-text-sm |
| Blora Design 组件库示例文本。 | Noto Sans SC · 12 / 400 — xs | .blora-text-xs |
| UPPERCASE LETTERS | Sans · 12 / 600 / +0.18em — caps | .blora-text-caps |
const blora = "v1.0"; | JetBrains Mono · inline code | .blora-code |
文字轮播 · Text Rotate
构建 清晰的产品界面 一致的交互体验 可复用的设计系统
一键复制 · Copy
npm i @bloret-crew/blora-design
https://blora.design
Design is not just what it looks like and feels like. Design is how it works.
—— Steve Jobs
04 — 间距
间距
12 级间距，4px 起步，按 1.5 倍率递进。所有组件间距均取自此令牌。
4
1
1
8
2
2
12
3
3
16
4
4
24
5
5
32
6
6
48
8
8
64
9
9
96
11
11
128
12
12
圆角 · xs 2 · sm 4 · md 8 · lg 12 · xl 20 · 2xl 32 · full
--blora-radius-*
05 — 阴影
阴影与纹理
四级阴影皆低不透明度，呈"微浮起"效果而非"高空悬停"，另有内凹与主色光晕两种特殊阴影。
shadow-1
1px 浮起
1px 浮起
shadow-2
2px 卡面
2px 卡面
shadow-3
6px 浮层
6px 浮层
shadow-4
12px 模态
12px 模态
shadow-primary
主色光晕
主色光晕
inset
内凹
内凹
底层纹理由 --blora-background-texture 径向渐变叠加于 body，肉眼几乎不可见，仅作微妙的质感铺垫。
06 — 图标
图标
线性风格、2px 描边、圆端圆角。建议以 SVG 内联或图标字体引入。
08 — 表单
表单输入
文本、多行、选择、勾选、开关、滑块、评分、标签、数字、验证码、颜色、上传、树选、自动完成与提及。
最长 20 个字符，超出后仅标注，不会截断输入。
最长 12 个字符，超限时以圆点标注超出部分。
此处输入无效，请重新填写。
¥
.00
表单校验 · Form validate
表单分组 · Fieldset
请选择状态
选择团队
大型菜单 · Megamenu
复选 · Checkbox
单选 · Radio
开关 · Switch
滑块 · Slider
20 – 75
范围滑块 · Range Slider（双滑块）
评分 · Rate
★★★★★
★★★★★
只读
分段控件 · Segmented
日
周
月
年
筛选器 · Filter
标签输入 · Tags Input
验证码 · OTP（自动跳框 · 可调长度 · 限制字符）
位数
字符
数字
数字+字母
任意
颜色选择 · Color Picker（全色域 + 手动 Hex）
文件上传 · Upload & Dropzone
支持 SVG / PNG / JPG · 单文件 ≤ 8MB
点击选择或拖拽文件至此
树选 / 自动完成 / 提及
09 — 选择
选择器与穿梭
日期与时间选择、级联选择与穿梭框。
已选：技术部 / 前端组 / 张三
候选 · 5
已选 · 1
11 — 头像
头像
圆形为默认，方形为辅助。无图时以单字占位。
尺寸
A
A
A
A
A
配色 · 无图
A
B
C
D
E
F
图片头像 · 组
头像组用于成员叠加展示，超出可显示总数。
12 — 进度
进度与加载
线形、环形、条纹、旋转加载与骨架屏。
线形进度 · Linear
上传中62%
数据处理40%
渲染完成85%
环形进度 · Circular
70%
40%
加载器 · Spinners
骨架屏 · Skeleton
14 — 数据
数据展示
表格、列表、折叠、时间轴、树、统计、描述、轮播、图片、聊天、倒计时、空态、结果、日历。
表格 · Table（排序 + 分页）
| 成员 | 部门 | 事项 | 状态 | 评分 |
|---|---|---|---|---|
| 张三 | 技术部 | 前端框架搭建 | 已完成 | 5 |
| 李四 | 技术部 | 接口文档撰写 | 审核中 | 5 |
| 王五 | 技术部 | 数据库迁移 | 待办 | 4 |
| 赵六 | 设计组 | 官网改版 | 已完成 | 5 |
| 孙八 | 设计组 | Logo 设计 | 进行中 | 4 |
| 周九 | 产品部 | 需求梳理 | 进行中 | 3 |
| 吴十 | 产品部 | 竞品分析 | 已完成 | 4 |
列表 · List
张高优先
李中优先
赵高优先
折叠面板 · Collapse / Accordion
什么是响应式布局？
响应式布局是指页面能根据设备屏幕尺寸自动调整布局。通过 CSS Flexbox 和 Grid 实现适配。
什么是 Flexbox？
Flexbox 是一维布局模型，适用于行或列方向的排列。通过 display:flex 启用，提供对齐与分布能力。
什么是 Grid 布局？
Grid 是二维布局模型，同时控制行和列。适用于复杂页面分区和仪表盘等场景。
时间轴 · Timeline
10:24
项目启动
需求评审完成，确认开发计划。
11:08
开发准备
技术方案已确定，仓库初始化完成。
14:30
开发进行中
核心功能已完成，正在联调测试。
待定
上线
树形控件 · Tree
技术部
前端组
张三
李四
王五
设计组
赵六
孙八
统计 · Statistic
项目总数
1,248
↑ 12.4% 本月
访问人次
38.2万
↑ 5.1%
收藏数
9,672
↓ 2.3%
平均评分
4.7/5
描述列表 · Descriptions
| 名称 | 项目 A | 分区 | 前端组 |
|---|---|---|---|
| 负责人 | 张三 | 类型 | 内部项目 |
| 尺寸 | 12 个任务 | 状态 | 进行中 |
轮播 · Carousel
图片 · Image（带说明与边框）
点击可预览：data-blora-preview + 可选 data-blora-preview-group 组图灯箱。
图片对比与切换 · Diff & Gallery
空状态 · Empty
暂无数据
列表为空，可创建一个新项开始。
结果 · Result
操作成功
数据已保存
注意
存在待处理项
加载失败
请稍后重试
提示
保存中…
日历 · Calendar（标题可点击切换视图）
图表占位 · Chart Container
Blora Design 不绑定图表库；可使用 primary、info、success、warning 与 secondary 功能色构建数据系列。
聊天 · Chat
A
设计稿已经同步，可以开始组件联调。
B
收到，先处理表单和导航。
倒计时 · Countdown
1天
02时
03分
04秒
15 — 反馈
反馈与提示
警告、横幅、消息、通知、提示、气泡、确认气泡。
警告条 · Alert
提示
密码需至少 8 位，含字母和数字。
成功
文件上传完成。
注意
磁盘空间不足，请及时清理。
警告
操作不可撤销，请谨慎执行。
横幅 · Banner
消息条 · Message
通知 · Notification
保存成功
文档已保存至云端。
删除失败
该项目存在关联数据，不可删除。
提示文字 · Tooltip
点击后将打开详情
重要
该字段为必填项
气泡卡片 · Popover
用户详情
张三，技术部前端组工程师，入职 2022 年，负责前端框架搭建与维护。
确认气泡 · Popconfirm
确定要删除该项目吗？此操作不可撤销。
16 — 浮层
模态与抽屉
模态用于焦点对话，抽屉用于辅助面板；均为浮层叠加、背景虚化呈现。
模态框 · Modal
抽屉 · Drawer
17 — 命令
命令面板
按 Ctrl + K 唤起，键盘优先的快捷操作。亦为 Blora Design 推荐的全局搜索范式。
试试现在就按下 Ctrl + K。
18 — 布局
布局
栅格、卡面、面板、分隔、堆叠、行与卡片叠层，构成页面布局的基础构件。
栅格 · Grid
1 / 4
1 / 4
1 / 4
1 / 4
卡面 · Card 变体
默认卡面
悬停时浮起 2px，阴影转深。
内凹卡面
用于次级内容或嵌套分组。
扁平卡面
无阴影，仅留边框，最为安静。
分隔 · Divider
章节分隔
堆叠与行 · Stack & Row
第一行
第二行
第三行
卡片叠层 · Deck
像隐形滚轮一样跟手滚动，松手吸附；也可用鼠标滚轮或方向键。
队列预览 · 第 1 张
待办卡片 · 第 2 张
相册 / 队列预览 · 第 3 张
发布清单 · 第 4 张
19 — 进阶组件
导航 · 布局增强
灯箱预览、固钉、漫游、水印、分栏、排版、二维码、骨架、评论与论坛跟帖等增强能力。
固钉 · Affix
Affix 固钉
滚动后吸顶（offset 88）
向下滚动可观察吸顶。回到顶部使用右下角全局 FAB。
引导 · Tour
步骤 A
步骤 C 文案
布局 · Watermark / Splitter / Masonry
水印铺在内容之上（pointer-events: none）。
左栏 · 拖拽中间条
右栏 · 自适应
瀑布流 A
瀑布流 B · 更高
瀑布流 C
瀑布流 D
排版 · Typography / QRCode / Skeleton / Stat
这是一段会被单行省略的长文本示例，超出宽度显示省略号。
多行截断：这是第二段较长的说明文字，用于演示两行后出现省略号。后面的内容应该被裁切掉以便观察 clamp 效果是否正常工作。
本月访问
0
社交 · Comment
张
张三2 小时前
进阶组件补齐后，文档站演示会完整很多。
李
李四1 小时前
同意，灯箱和 Tour 很实用。
论坛跟帖 · Thread
D
评论于 · 江苏
## 妈妈
De
评论于 · 浙江
回复 @diddy123
## 妈妈
De
评论于 · 浙江
容器 · Media / Chart
Chart 容器约定
业务挂载 ECharts / Chart.js 等
业务挂载 ECharts / Chart.js 等
20 — Mockup
设备与环境外壳
Browser · Code · Window · Phone 四类预览外壳，用于产品截图、文档与营销页中的真实内容承载。
Browser
浏览器外壳：交通灯 + 地址栏（含搜索图标）。
Blora Design
令牌驱动的 Web UI 框架
Docs
组件速查
Button主 / 次 / 描边
Speed Dial垂直 · 花瓣
MockupBrowser · Phone
Code
终端 / 代码块：行前缀 data-prefix，语义色与高亮行。
npm install @bloret-crew/blora-designinstalling packages…added 12 packages in 1.2snpx blora initproject readyimport { init } from "@bloret-crew/blora-design";init(document.body, { theme: "coral", colorMode: "system",});// highlight the active optionWindow
桌面窗口外壳：紧凑工具栏 + 交通灯 + 可选标题。
.blora-btn--primary
主按钮
padding · radius · shadow 均来自设计令牌
Phone
手机外壳对齐 daisyUI 比例（462∶978、5px 边框、6px 内边、灵动岛 28%×3.7%）。右侧示例使用 --phone-accent 边框色。
Good morning
Blora
今日任务
3 项待处理
组件库
Mockup 已就绪
It's Blora time.