一种语言,一致的体验。
将视觉决策沉淀为 tokens。
从颜色到间距,让每一次组合都有据可依。
ASAM 蓝
清晰、冷静,保留恰到好处的强调。
ASAM PRIMARY#2D6BD6
--asam-color-primary
色值来自当前 ASAM tokens。此处仅展示已实现的核心语义变量。
让信息层级一目了然
组件字体栈优先思源黑体,按系统可用字体回退。
Aa思源黑体
Source Han Sans CN
Source Han Sans CN
清晰的界面,从易读的文字开始。
清晰构建,从容组合。
标题
20px强调信息16px正文14px辅助说明12px
组件包不附带字体文件;官网的大标题为本次网页设计提案,不改动组件字号。
有秩序的细节
圆角
4控件6操作8弹层10卡片
基础间距
48101620
单位 px;展示按比例放大。
把主题带入项目
使用公共主题 API 覆盖语义变量,其余配置沿用默认值。
theme.ts
import { applyAsamTheme, createAsamTheme }
from '@asam-ui/ui/tokens';
applyAsamTheme(
createAsamTheme({ color: { primary: '#2D6BD6' } })
);
通过目标元素可将主题限定在局部容器。挂到
body 的弹出层仍继承全局变量。
完整主题说明
当前色板与语义变量以包源码为准;覆盖方式、作用域和设计边界见主题指南。