Lightship

暖白色基底、圆角卡片与紧密字距。
页面以暖白色为基底,搭配近黑色文字。字体采用 F37Bolton。视觉特点包括圆角卡片、紧密字距、细线分隔、大幅图像展示。适合参考的场景:品牌电商首页、商品展示页。
查看原始网站使用规范
建议采用
- 让摄影填满视口,首屏和区块转折采用铺满画面的图片(100vw),不设圆角。
- 所有有框照片与内容卡片采用20px圆角,这是系统标志性的柔和感。
- 所有交互元素(导航链接、按钮、输入框)采用100px圆角,形成胶囊结构。
- 48px及以上文字采用-0.05em字间距,34px及以下采用-0.03em;紧字间距对编辑式气质必须遵守。
- 整个UI保持单色调,黑色文字、白色或奶油色表面、极细边框。系统唯一彩色是#fa5c40,用作表面强调条,而非按钮填充。
- 将首屏文字分置视口两侧,以左+右分屏及72–75px的展示分量,在照片上创造构图张力。
- 区块之间以留白作为主要分隔,垂直间隔100px,无需可见分隔线。
建议避免
- 不要使用填充按钮或饱和CTA背景,系统没有主要操作色;交互为无填充文字链接和胶囊导航项。
- 不要引入阴影或高度效果;设计刻意平坦,依靠圆角和留白体现深度。
- 任何地方都不要使用渐变,表面为纯色,包括奶油、白、黑或余烬橙。
- 不要使用圆润字体、装饰衬线或展示手写体,F37Bolton的几何无衬线是唯一语气。
- 内容不要放在等宽网格栏中,照片布局采用非对称、偏移的拼贴位置。
- 页面背景不要使用#ffffff,温暖奶油色#faf6ef才是画布,纯白仅用于卡片高度。
- 余烬橙#fa5c40不要用于大面积表面,它只应作为小型强调条或聚焦状态铺色出现。