精选 · 开放 · 免费
Cubitts
一个精致的英伦眼镜品牌，将镜框提升至手工艺品的地位。
EditorialProductTypographyCleanCuration
01
设计气质 DNA
匠心传承精准英伦
犹如眼镜的定制裁缝，将现代极简主义与传统工艺融为一体。
02
色彩
#0B0B0BInk
#FFFFFFBG
#F5F5F5BG soft
#7A7575Muted
rgba(11,11,11,0.15)Line
高对比度的极简主义，黑色墨色奠定空间基调，温暖的灰色提供微妙的深度。
03
字体
geometric-sans
- display
32px · 400 - body
16px · 400 - caption
12px · 400
标题使用标准句首大写，不过度调整字间距。 · 正文保持一致的 400 字重以确保可读性。 · 小号文本仅限于法律声明和实用标签。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
灵活的 4px 基线网格，根据不同布局密度适配 64px 和 12px 的间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 24px
lg · 32px
pill · 999px
使用 #0B0B0B 或 #D8D8D8 色的 1px 细实线边框来界定输入框和交互区域。
0px 0px 30px 0px rgba(0, 0, 0, 0.15)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
简洁的 12 栏网格系统，优先保障充足的留白和居中的内容块。
07
动效与交互
220msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
用于交互反馈的平滑透明度与背景色过渡。 · 基于变换的动画，用于较大规模的结构变化。
按钮上微妙的背景色变化或色彩反转。 · 通过背景变暗或结构变化提供即时的视觉反馈。
08
组件
- button 胶囊形或圆角矩形按钮，采用黑色背景和白色文字。
- card 简洁的无边框容器，通过微妙的背景色变化 (#F5F5F5) 来分组内容。
- chip 小型圆角胶囊组件，用于标签或交互切换。
- input 极简的矩形输入框，配有细边框和内边距，呈现干净外观。
- hero 大尺寸的分栏或全宽图片区域，搭配醒目的排版。
09
文案语气与禁用清单
- 语气 精致、自信且富有信息量，偶尔融入叙事性讲述。
- 标题风格 简洁直接，聚焦于工艺或特定的品牌故事。
- 按钮文案 行动导向且清晰，常使用“立即进入”或“允许全部”等标准动词。
- 不要使用过于装饰性的衬线字体——截图显示其以几何无衬线体为主。
- 不要依赖厚重的投影——截图显示仅使用非常微妙、大半径的阴影来营造深度。
- 不要使用宽广的鲜艳色彩范围——截图显示以近单色系为主，偶尔点缀源自产品的色彩。
- 不要用密集的信息块使布局杂乱——截图显示元素周围有大量留白。
- 不要在主要交互元素上使用尖锐的方形圆角——截图显示一致地使用圆形或胶囊形圆角。
- 不要在大号展示标题中使用全大写——截图显示主标题使用句首大写。
- 避免: 避免使用过于随意的俚语或激进的营销术语。
- 避免: 避免使用与工艺或光学无关的复杂技术术语。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
此设计系统代表一个精致的英伦眼镜品牌（Cubitts），将极简主义与传统传承相融合。其视觉语言以 #0B0B0B 墨色置于 #FFFFFF 背景上的高对比度单色方案为锚点，#F5F5F5 用于柔和表面，#7A7575 用于柔和的实用文本。主要字体为几何无衬线体（Fold Grotesque），用于展示和正文文本，字重为 400。布局依赖于充足的留白和 12 栏网格系统。关键的禁止事项包括：避免装饰性衬线体、避免鲜艳的多色彩色盘、以及避免在交互组件上使用尖锐的方形圆角。该系统通过克制与精准的间距强调高端、精选的质感。
en · zh-CN · zh-TW · ja · ko