box00 · WebUI Specimen Library

五套界面皮相 / 挑一套定全站

每套都是完整体系:配色令牌、组件配方、立体与材质规则、布局模式、使用禁忌。
做页面前先在这里选型,选定后进对应方案页取 token 与组件,不要中途混搭。

4体系
5规格页
2明暗档
100%纯 CSS 渲染
琉璃D · Liquid Glass

Apple 液态玻璃。壁纸 + 背滤模糊 + 1px 折光边 + 顶部高光,四层叠加;控件永远半透明,内容浮在最上。

控制中心媒体播放器浮层导航产品落地页
OPEN SPECIMEN→
曜金A · Meter

近黑底 + 电光黄 + 暗色新拟态。层次不靠灰度,靠「亮边白光 + 纯黑投影」把控件从深面挤出来;颜色只给数据与状态。

控制台用量监控开发者工具数据后台
OPEN SPECIMEN→
琥珀画廊B · Gallery

四阶墨黑 + 暗琥珀 + mono 大写标签。层次靠 1px 暖白分割线而非色块,气质偏展览目录、模型库。

作品集模型/模板商店官网首页品牌展示
OPEN SPECIMEN→
纸雕 · 明面C · Paper Light

冷灰白纸底 + 双向光影浮雕 + 克制红。卡片与页面同色,层次全在阴影里;红色面积压在 5% 以内。

创作工具任务中枢日程日历个人仪表盘
OPEN SPECIMEN→
纸雕 · 暗面C2 · Paper Dark

同一套几何、光源与阴影参数表,只换表面色:深墨纸 #1E2026 + 提亮红 #F05260。夜间与低光环境用这一档。

夜间创作长时仪表盘低光面板明面同构
OPEN SPECIMEN→

共同的设计纪律

五套共用 · 换风格也不能破
01 / 光源

光源方向全站唯一,且恒在左上。出现第二个光源,立体感立刻崩。

02 / 主操作

一个屏幕一个主操作。强调色面积不超过一屏的 5%。

03 / 对比度

正文不低于 4.5:1,数据与状态不低于 7:1。

04 / 刻度

圆角、间距、字号只用令牌刻度,不目测。