OpenDesign·你的设计资产库

网页参考

Letter

一个为精密财富管理而生的精致、现代金融平台。

FintechPremiumCleanEditorial
Letter 网站截图

01

设计气质 DNA

财富管理现代深思熟虑高净值

一家如同当代艺术馆般的数字私人银行——精致、宽敞且极具奢华感。

02

色彩

#186f64Accent
#000000Ink
#191b1fInk soft
#ffffffBG
#f6f9f9BG soft
#e6ebecBG quiet
#e7e8e8Muted
rgba(0,0,0,0.1)Line

克制的、以中性色为主的配色方案,以精致的蓝绿色作为基调,传达冷静、现代的财富感。

03

字体

transitional-serif · geometric-sans

  • display46px · 500
  • h146px · 500
  • h228px · 400
  • body16px · 400

使用衬线过渡字体(transitional-serif)作为醒目的展示标题,以建立权威感 · 使用几何无衬线字体(geometric-sans)作为所有UI文本,确保清晰度与现代感 · 限制字重变化,仅使用常规、中等和半粗体,以维持平静的视觉节奏

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

采用宽松的垂直节奏与高行高(最高可达2.0),营造出通透、奢华的感觉。

05

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

sm · 2px
md · 4px
lg · 8px
pill · 999px

极少使用边框,依赖微妙的背景色差来区分界面层次。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

结构化的网格布局,从全出血、沉浸式的首屏区域过渡到用于功能卡片的多栏布局。

07

动效与交互

70msmicro
400mssmall
750msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing

用于顺序内容揭示的微妙淡入和上滑动画 · 悬停状态上流畅的颜色与透明度过渡

为文本链接和按钮提供微妙的透明度或颜色变化。 · 即时响应,并通过微妙的过渡效果确认用户输入。

08

组件

  • button 简洁的矩形按钮,采用尖角设计(2px圆角),包含高对比度(纯黑)和品牌色(蓝绿色)两种变体。
  • card 大面积的、带有色调背景色块(浅蓝、薄荷绿),用于定义不同的功能区域,无需严格的容器边框。
  • hero 一个戏剧性的全视口介绍区域,以电影感、深色的抽象背景图像和大号、优雅的排版为特色。

09

文案语气与禁用清单

  • 语气 自信、精致且表达力强。
  • 标题风格 直接、富有感染力且略带憧憬,使用简洁的短语。
  • 按钮文案 清晰、以行动为导向且低调。
  • 不要使用圆角 —— 截图显示的是2px圆角的尖角按钮
  • 不要使用明亮、霓虹色的点缀 —— 截图显示的是柔和的蓝绿色 #186f64
  • 不要使用拥挤、密集的布局 —— 截图显示了宽松的内边距和高行高
  • 不要使用俏皮或装饰性的插图 —— 截图使用的是抽象、摄影风格的图像
  • 不要对大标题使用全大写 —— 截图使用的是首字母大写或句首大写
  • 不要使用深色模式作为默认模式 —— 截图显示的是以白色和浅灰色为主的界面
  • 避免: 使用过多的感叹号
  • 避免: 采用激进或过于急切的销售语言
  • 避免: 在缺乏明确上下文的情况下使用复杂的金融术语

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

该系统代表一个面向高净值财富管理的高端现代金融科技平台。其身份标识精致而冷静,采用克制的配色:纯净的白色背景(#ffffff, #f6f9f9)搭配深沉的墨色(#000000, #191b1f)和单一的柔和蓝绿色点缀(#186f64)。排版上,展示标题采用精致的衬线过渡字体,UI元素则使用几何无衬线字体。关键约束:绝不使用浓重的阴影或明亮的霓虹色,始终维持宽松的留白和高行高(最高2.0),并严格遵守2px的按钮圆角。布局优先考虑电影感的首屏区域和宽敞通透的功能区块,打造自信奢华的数字体验。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。