Idle Finance
深蓝色基底、胶囊形控件与渐变展示。
Uniswap
白色基底、紧密字距与细线分隔。
页面以白色为基底。局部操作控件以粉色强调。字体采用 Basel。视觉特点包括紧密字距、细线分隔、宽松留白、扁平表面。适合参考的场景：技术项目官网、区块链产品介绍页。
查看原始网站使用规范
建议采用
- #ff37c7是唯一的彩色UI颜色，也是按钮、激活状态和品牌标志上唯一允许的粉色；其他所有鲜亮色相都只留给代币或资产识别及装饰。
- 所有Basel文字，无论字号大小，都使用-0.02em letter-spacing；这不是仅用于展示的处理，而是该字体在系统中的基础状态。
- 卡片、按钮、输入框和小标签的默认border-radius为20px；9999px留给真正的胶囊形，如搜索栏和无填充导航按钮。
- 表面通过#f2f2f2或#222222的1px边框分隔，而非阴影；系统只有一个阴影值，即几乎不可见的10%黑色0px 0px 10px模糊，只在抬升的悬浮元素上使用。
- 首屏和分区背景中放置装饰彩球，即#ff4d00、#2abdff、#00c3a0、#8251fb、#f50db4和#e01a2b的模糊圆形，并使用强CSS blur，营造系统标志性的活泼氛围。
- 展示标题设为52-64px，行高0.75-0.96；大字号中的紧密行高赋予Basel冷静的金融权威感。
- 兑换卡片限定为白色画布上的白色卡片，并采用细线边框；绝不要为首屏产品组件添加投影或彩色背景，它必须是缤纷首屏中平静的中心。
建议避免
- 不要将#ff37c7、#ff4d00、#2abdff、#00c3a0、#8251fb、#f50db4或#e01a2b作为非资产UI的通用强调色；这些色相是分类体系，而非调色板。
- 不要通过投影添加抬升；系统理念是平面，应以边框而非阴影分隔，如果必须使用阴影，只使用10%黑色的0px 0px 10px数值。
- 不要将#fef4ff（Blush Mist）作为页面背景；它只用于禁用或次级表面，页面画布必须是#ffffff。
- 同一屏幕中不要配对两个视觉分量相同的填充按钮；使用一个粉色填充CTA和一个无填充或胶囊按钮，其余所有操作均为文字链接或小标签。
- 任何地方都不要使用宽于-0.02em的letter-spacing；系统从不放松字间距，即使小型大写或标签也一样，紧缩感就是个性。
- Basel不要使用400、500、600、700等标准字重阶梯；标志性特征是中间的485和535字重，使文字既不显得是“常规体”，也不显得是“粗体”，而是形成连续的字重梯度。
- 不要引入渐变、深色模式分区或玻璃拟态；系统强烈采用浅色模式和平面设计，任何新分区都必须为白色或#fef4ff。
