用途:这是一套 Cloudflare 产品界面设计规范,适用于设计、实现或审查 Cloudflare 仪表盘界面、Kumo UI、响应式样式与对话框等场景。使用时遵循推荐示例,避免被标记为反例的写法。
主要能力(规则要点):
- 内容文字统一使用 14px,16px 及以上仅限标题与副标题。
- 标题使用句子式大小写,产品名用标题式大小写。
- 不修改字体字距,不使用 tracking-* 类。
- 不使用 font-bold,标题用 font-semibold,行内加粗用 font-medium。
- 相关文字间距应小于其所属内容的间距。
- 文字周围间距按行高做视觉对齐,通常垂直间距略小于水平间距。
- 悬停状态的颜色变化必须即时,不做颜色过渡。
- 不使用边框加投影,改用 ring ring-kumo-line 形成透明边框。
- 边框或环间距在 8px 以内时,圆角需同心:外半径 = 内半径 + 内边距。
- 行内图标与文字首行对齐,多行时用 h-lh flex items-center。
- 行内等宽文字字号略小(约 0.9em)。
- 粘性元素用边框与内容分隔。
- 折叠动画期间保持内容尺寸,避免内容位移。
- 不叠加 LayerCard。
- 对话框不做条件渲染,用 open 属性控制显隐以保留动画。
使用方式:在编写或评审界面代码时对照上述规则,采用资料中的推荐写法,替换反例写法。
适用场景:Cloudflare 仪表盘及 Kumo UI 相关的前端界面开发与设计审查。
限制:资料仅给出设计规则与代码示例,未提供安装命令、收费、价格或平台支持等信息,这些内容暂未提供。