dapeng.uno lab
动效与设计实验库。采用 1B 实心圆角正方蒙版与纯单色极简块状规范，面向人类开发者与 AI Coding Agents。
01 标志 (Logo & Mark)
官方定版徽标 · 1B Squircle Mask
纯复合路径 · 光学质心平衡修正 · 零 Mask 依赖
横排字标组合 · dapeng.uno
1B 徽标 + 加粗现代无衬线 + 等宽 .uno 后缀
02 图标与微缩 (Icons & Scalability)
16px (Favicon)
20px (Nav)
24px (Badge)
32px
48px (Touch)
64px (Avatar)
84px (App Icon)
<!-- 任何子站直接在 <head> 引入标准化高清矢量微标 --> <link rel="icon" href="https://design.dapeng.uno/icons/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="https://design.dapeng.uno/icons/favicon.svg">
03 颜色与字体 (Color & Typography)
Ink 墨黑
#111111 · --dp-ink
Paper 纸白
#F4F4F1 · --dp-paper
Gray 中性灰
#8A8A8A · --dp-gray
Surface 暗色底盘
#171717 · --dp-surface
04 动效实验 (Motion Lab)
42 种原型试验 · 纯 CSS/SVG 驱动徽记穿梭 S01
实心正方徽记无缝旋转加载 · 指数级放大揭示
菱核聚气 S02
顶端实心菱核以心跳节律微幅脉冲，表示网关在线
母标落位 S03 (.dp-header-lockup)
开箱即用类名 · 子系统开箱直接渲染统一样式
05 常用组件 (UI Components)
● 在线 99.9%
● 维护中
● 熔断 502
v2.2.0
<!-- 统一导航栏锁合结构 (引入 tokens.css 即刻生效) --> <div class="dp-header-lockup"> <img src="https://design.dapeng.uno/icons/favicon.svg" alt="dapeng" width="20" height="20"> <span class="dp-brand">dapeng</span> <span class="dp-sep">/</span> <span class="dp-product">newapi</span> </div>
06 规范与 Agent 协议 (Usage & AI)
需要将设计系统同步给其他开发 Agent 时，直接复制下方标准化 Prompt：
你正在为 dapeng.uno 生态开发子系统（如 newapi 网关）。 请遵循以下极简单色（Monochrome Blocky）工程规范： 1. 样式规范：引入 https://design.dapeng.uno/tokens.css ； 2. 标志与 Favicon：使用 https://design.dapeng.uno/icons/favicon.svg ； 3. 导航栏必须使用包含类名 .dp-header-lockup 的标准结构； 4. 严格单色基调：主色仅使用 var(--dp-ink) 与 var(--dp-paper)，严禁使用任何彩色渐变或大范围发光； 5. 所有的指标、数值、Token、状态代号强制使用 var(--dp-font-mono) 等宽字体。