返回全部设计模板
Refined 设计模板生成的网站首屏截图
01 / 03

Refined

适合珠宝、精品酒店和高端编辑内容,优雅衬线配成熟低饱和色板、细密间距与克制装饰,安静考究。

通用设计 奢华质感

设计语言样张

设计语言预览

Identity & Action

Primary

#3B82F6

品牌识别、选中状态、主要数据序列与信息强调。

Secondary

#111827

对照序列、次级强调与辅助状态。

Action

#3B82F6

主操作、完成信号与正向反馈。

Canvas & Surface

Canvas

#FFFFFF

明亮主画布,决定页面整体对比模式。

Surface

#FFFFFF

卡片、面板、图表槽和内嵌内容区域。

Hairline

#e6e6e6

分隔线、输入边界、图表网格与结构描边。

Text

Ink

#111827

标题、核心指标和高强调信息。

Body

#111827

正文、说明、导航与常规界面文字。

Muted

#71717a

元信息、图注、时间戳与低强调标签。

字体层级

display-xl

system-ui · 60 / 700 / 1.1

Refined

display-lg

system-ui · 48 / 700 / 1.15

清晰表达核心价值

display-md

system-ui · 36 / 600 / 1.2

Refined 设计语言

title-md

system-ui · 20 / 600 / 1.4

组件与内容标题

body-lg

system-ui · 20 / 400 / 1.55

辅助说明连接用户目标、界面操作与可量化结果。

body-md

system-ui · 16 / 400 / 1.6

正文适合功能说明、表单帮助、状态解释和较长内容。

metric

system-ui · 30 / 700 / 1.1

98.6%

label

system-ui · 14 / 600 / 1.4

开始使用 · 查看详情 · 当前状态

间距、层级与形状

xxs 4px
xs 8px
sm 12px
md 16px
lg 24px
xl 32px
2xl 48px
section 80px

形状

full

标准按钮约 8px 圆角,内容卡约 8px;pill 只用于状态、筛选和紧凑标签。

层级

Level 0 · #FFFFFF 主画布Level 1 · #FFFFFF 内嵌表面Level 2 · 1px #e6e6e6 结构边框Level 3 · 克制的重点卡片或反相表面

组件样张

button-primary

#3B82F6 填充按钮承担主行动,文字保持可读对比。

button-secondary

#3B82F6 描边或低透明填充用于次级操作,不与主行动竞争。

button-icon

圆形图标按钮只用于紧凑工具,关键操作仍应保留明确文字标签。

content-row

一行核心内容保持清晰标题。

元信息 · 状态 · 更新时间

布局与响应式

通用界面 场景中的内容层级与产品证据。

使用约 1200–1280px 容器组织 Refined 设计语言 页面。首屏展示价值和真实产品片段,后续以功能、内容、状态及转化模块形成清晰节奏。

断点 宽度 关键变化
移动端 < 640 px 首屏与内容模块单列,主操作全宽,浮动元素回到文档流。
平板 640 - 1023 px 功能和数据模块使用 2 列,导航折叠,复杂面板上下堆叠。
桌面端 >= 1024 px 启用完整分栏、3–4 列内容网格和产品界面主视觉。

使用边界

应该

  • 保持 Refined 设计语言 的核心关系,不把界面退化为通用卡片库。
  • 主色 #3B82F6 负责信息与选中,辅助色 #111827 负责对照和有限强调。
  • 行动色 #3B82F6 只用于主要操作、完成状态和明确的前进信号。
  • 在 明亮 画布上保持可测试的文字、边框和交互对比度。
  • 图表和状态同时使用标签、线型、标记或图标,不只依赖颜色。

不要

  • 不要让 #3B82F6、#111827 和 #3B82F6 同时竞争主行动。
  • 不要把所有卡片、按钮和输入框统一成同一种无差别形状。
  • 不要保留越界浮层、不可见焦点或小于 44px 的关键触控目标。
  • 不要用装饰效果替代必要的边框与层级。
  • 不要使用虚构指标、无意义徽章或装饰性数据填满页面。