精选 · 开放 · 免费

Valohealth

一个朴素的、高端的暗模式界面，利用巨大的排版和青色强调色来传达科学权威性和高科技创新。

01

设计气质 DNA

一家科学工程公司的数字宣言。

02

色彩

高对比度的单色暗模式，配以单一、高饱和度的青色强调色，用于关键品牌信息。

03

字体

geometric-sans · monospace

• display88px · 300
• h156px · 300
• body-lg24px · 400
• body18px · 400
• caption14px · 400
• overline12px · 600

对展示文字使用浅色（300-400）字重以保持优雅 · 对分类标签使用大写上划线和增加字间距 · 所有文本区块严格左对齐 · 在深色背景上使用大行高以提升长文可读性

04

间距

一个由大型内边距区块（例如，40.5px）和区块间充足间距驱动的、宽敞的垂直节奏，以强调内容的份量。

05

表面 (圆角 / 阴影 / 边线)

极其简约；依赖颜色对比和间距而非可见边框，除了在活动元素上使用微妙的1px下划线。

rgba(0,0,0,0.3) 0px 32px 68px 0px

06

布局

全宽的深色画布，巨大的排版区块之后是干净的2x2照片网格。

07

动效与交互

hover时平滑的颜色和不透明度过渡 · 交互元素上微妙的变换移动 · 大型内容区块的延长淡入

微妙的颜色变化或背景不透明度变化，配合快速的150毫秒过渡。 · 通过轻微的缩放或不透明度降低提供即时反馈。

08

组件

• button 主要是基于文本的链接，带有胶囊形（9999px半径）的hover状态或微妙的背景变化。
• card 干净的、无边框的照片卡片，依靠深色背景进行分隔。
• chip 很少使用；主要是基于文本的导航元素。
• input 极简的、深色主题的输入框，带有微妙的底部边框。
• hero 一个巨大的、以排版为先的首屏区域，占据整个视口高度。

09

文案语气与禁用清单

• 语气 权威、富有远见且高度专业。
• 标题风格 使用“动词 + 名词”结构的粗体陈述性语句，以传达影响力。
• 按钮文案 直接、面向行动，通常以全大写的上划线开头，例如‘APPROACH’。

• 不要使用装饰性边框或盒子阴影——截图显示的是无边框的、深色的扁平表面。
• 不要使用粗体展示字重——截图显示大型标题使用的是浅色（300-400）字重。
• 不要用多种强调色使布局杂乱——截图显示只使用了一种青色强调色（#1CB6E0）。
• 不要使用复杂的、多步骤的动画——截图显示的是快速、微妙的150毫秒微交互。
• 不要对长段落使用居中文本——截图显示的是严格左对齐的排版。
• 不要使用明亮或浅色主题——截图显示的是纯黑色（#000000）背景。
• 避免: 缺乏上下文的、术语密集的医学流行语
• 避免: 俏皮或随意的语言
• 避免: 杂乱或密集的信息布局

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko