01
设计气质 DNA
趣味亲切信任创新清晰
一位友善的伙伴，引领用户驾驭复杂的加密货币领域
02
色彩
#0080e8Accent#474645Ink#7a7876Ink soft#ffffffBG#f2f0ecBG soft#a0a0a0Mutedrgba(71, 70, 69, 0.2)Line纯净留白，以充满活力且个性鲜明的点缀色作为点睛
03
字体
- display
64px · 500 - heading-2
44px · 500 - body
16px · 400 - caption
14px · 400
标题文字使用紧凑行高 (1.05) 和负字间距 (-1.5px) · 正文维持舒适的 1.6 行高以保证可读性 · 所有文字使用 400-500 字重范围，不使用粗体 · 所有尺寸的字间距均略微收紧，以保持视觉统一
04
间距
4px8px12px16px24px32px48px64px96px基于一致的 8px 网格，章节之间留有充足的留白
05
表面 (圆角 / 阴影 / 边线)
sm · 6px
md · 10px
lg · 16px
pill · 40px
使用内嵌阴影实现微妙的 1px 边框，以增强层次感
0px 0px 0px 1px inset rgba(242, 240, 236, 1) · 0px 3px 16px rgba(0, 0, 0, 0.1) · 0px 0px 24px rgba(0, 0, 0, 0.15)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
居中的单栏布局，带有充裕的内边距
07
动效与交互
220msmicro
400mssmall
1000msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
悬停状态下的变换与透明度过渡 · 页面切换使用流畅的 cubic-bezier 缓动 · 微交互持续时间为 0.2s
交互元素在悬停时发生细微的颜色变化和轻微变换 · 通过变换缩放提供即时视觉反馈
08
组件
- button 胶囊形按钮，具有高对比度；主按钮为黑底白字，次要按钮为带边框的幽灵样式
- card 柔和的圆角 (10px)，在浅色背景上带有微妙的内嵌边框阴影
- chip 小型胶囊形标签，带有图标前缀和柔和的文字颜色
- input 极简设计，带有微妙的背景，默认无可见边框
- hero 居中的标题，周围环绕着趣味浮动插画
09
文案语气与禁用清单
- 语气 友好、亲切、令人安心
- 标题风格 简短、自信的陈述，并带有一丝趣味
- 按钮文案 直接且以行动为导向（如“开始使用”、“观看视频”）
- 不要使用深色背景——截图显示主要为白色 (#ffffff) 和浅暖色 (#f2f0ec) 表面
- 不要使用尖锐的角——截图显示圆角按钮 (40px 胶囊半径) 和卡片 (10px 半径)
- 不要使用粗体字——截图仅显示 400-500 字重，无 700 及以上
- 不要使用密集的布局——截图显示主要章节之间有充足的留白 (64-96px)
- 不要使用强烈的阴影——截图仅显示微妙的内嵌边框和柔和的投影
- 不要同时使用多种强调色——截图以黑色作为主操作色，彩色插画作为次要装饰
- 避免: 技术术语
- 避免: 正式的企业语言
- 避免: 感叹号
10
包内真实截图
11
System Prompt
为 Family（一款亲切的以太坊加密货币钱包）设计的设计系统。采用纯净白色 (#ffffff) 基底，卡片和表面使用暖米色 (#f2f0ec)。主文本为暖灰色 (#474645)，关键强调色使用蓝色 (#0080e8)。字体方面，标题使用几何无衬线字体（紧凑字间距，500 字重），正文使用人文主义无衬线字体（400 字重）。按钮为胶囊形，圆角半径 40px。关键禁忌：切勿使用深色背景（网站为浅色主题）、避免尖锐的角（所有元素使用 10-40px 半径）、避免粗体字（最大 500 字重）、保持充足留白（64-96px 间距）、仅使用柔和的阴影（无硬投影）。设计强调趣味插画和角色，让加密货币显得友好易懂，而非令人生畏。