v0 by Vercel 网站预览
v0 by Vercel 网站预览

v0 by Vercel

机械师的蓝图。精确性与功能性至关重要,每个元素都在简洁、技术化的表面上承担明确的功能。

设计感觉像一张在纯白绘图桌上的功能示意图。其近乎单色的配色方案 — #FFFFFF, #FAFAFA, #EAEAEA, #171717 — 创造出以实用性为先的氛围,用户输入是唯一的色彩来源。排版是主要的建筑元素;全场景使用定制无衬线字体,大字号时采用紧密的负字间距,形成密集且有力的标题。界面由简单元素构成:带有8px圆角的实心黑色调用按钮,以及带有微妙边框的白色芯片,用于区分主要操作与次要建议。

查看原始网站

使用规范

建议采用

  • 所有文本均使用GeistSans,无例外。
  • 对24px及以上字号的标题应用激进的负字间距。
  • 严格遵守无彩色调配色方案;所有色彩来自内容,而非界面元素。
  • 按钮使用8px圆角,卡片和输入框使用12px圆角。
  • 所有视觉分隔线使用1px实线 #eaeaea。
  • 通过填充和边框区分操作层级:实心为一级,带边框为二级,仅文字为三级。
  • 内容区块之间保持充足的空白(最小96px)。

建议避免

  • 不要在界面元素中引入任何饱和色。
  • 不要使用系统字体或其他品牌字体。
  • 不要在按钮或输入等交互元素上使用阴影;仅在卡片上保留。
  • 不要使用除6px、8px、12px或9999px(用于胶囊形控件)之外的圆角值。
  • 不要使用渐变或背景图片。
  • 不要使用粗体(700及以上)字重;通过600字重和字号大小来强调。
  • 不要创建密集布局;优先考虑清晰与空间感。