Clipdrop

近白色基底、衬线字形与胶囊形控件。
页面以近白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 Primary、SecondaryFont。视觉特点包括衬线字形、胶囊形控件、大字排版、宽松留白。适合参考的场景:AI 服务首页、产品演示介绍页。
查看原始网站使用规范
建议采用
- 所有区块和页面标题都使用 60-96px 的编辑式衬线字体,绝不能在这些场景中以无衬线字体替代。
- 页面中仅使用钴信号色 (#1c60f6) 作为填充按钮背景——每个区块最多一个 CTA
- 所有卡片、图片和媒体容器均应用 16px 边距圆角
- 所有按钮、标签和胶囊控件均使用胶囊形 (9999px) 圆角
- 保持页面以骨白画布 (#ededed) 作为主背景——仅在需要突出时才引入白色卡片
- Ember Vermillion(#fa4028)必须与 Jasper 品牌标识或单点品牌元素搭配使用
- 使用 1px #ededed 细线边框作为区块分隔线,切勿依赖阴影来分隔区域
建议避免
- 编辑式衬线字体不要用于正文、UI 标签或按钮文字;它仅供标题使用。
- 切勿引入绿色/红色语义色用于成功/错误状态——应延续中性与钴蓝调色板
- 切勿为卡片、按钮或导航添加阴影——系统刻意保持扁平化
- 切勿在卡片或图片上使用 9999px 圆角——胶囊圆角仅用于按钮和标签
- 切勿用 Periwinkle Mist (#c9d7f5) 填充大面积表面——该色仅用于按钮表面,而非区块背景
- 切勿使用纯黑色 (#000000) 作为正文——正文应使用 Graphite (#404040) 或 Charcoal (#2d2d2d)
- 切勿在同一视口内堆叠超过一个钴色主按钮——系统要求操作层级清晰