Basic.Space

近白色基底、胶囊形控件与紧密字距。
页面以近白色为基底,搭配近黑色文字。字体采用 FTBasicSpace。视觉特点包括胶囊形控件、紧密字距、细线分隔、网格布局。适合参考的场景:品牌电商首页、商品展示页。
查看原始网站使用规范
建议采用
- 所有交互控件,包括按钮、标签和图标容器,都采用9999px border-radius;胶囊形不可更改,直角按钮会破坏画廊策展人的语言。
- 卡片和图像的border-radius设为2px;这种接近直角的圆角像“画廊托板”,而非“应用卡片”,应像钉在墙上的印刷品。
- 分隔线和边框只使用#ebebeb;绝不要用阴影分隔元素,分隔来自1px细线边框和表面色调变化。
- 电光钴蓝#0700ff仅限于顶部公告栏;它是整个系统唯一彩色强调,稀释到按钮或链接中会毁掉打断式的力量。
- 展示字号38–40px采用-0.0220em letter-spacing,正文字号采用-0.0100em;紧密字间距让标题像经过策选,而非普通默认文字。
- 产品图像以2px圆角从边到边填满容器;绝不要将产品照片包在带内边距的容器中,也不要添加投影。
- 产品系列采用满幅横向滚动轨道;连续滚动的画廊体验,是网站走逛博物馆节奏的核心。
建议避免
- 除钴蓝公告栏外,不要在界面中引入任何彩色;绿色、暖色和粉彩都会破坏画廊白墙的纪律。
- 卡片、按钮或图像不要采用box-shadow;深度通过表面色调差异表达,如#ebebeb画布与#ffffff卡片,绝非抬升。
- 卡片或图像圆角不要超过2px;9999px胶囊按钮与2px近直角卡片的对比,是标志性几何。
- 每个视觉元素不要使用超过两种字重;层级是字重、大小写和字间距的组合,而非字重、字号、颜色加装饰。
- 除公告栏钴蓝或满幅摄影外,不要将文字置于彩色背景上;所有UI文字都位于#ebebeb、#ffffff或#f7f7f7上。
- 产品卡片容器内部不要添加内边距;卡片没有界面装饰,图像和文字仅以12px内部间隙堆叠,没有带边框的容器。
- 图标不要采用填充或多色处理;只能是#000000或#b5b5b5的单一线宽线描字形。