01
设计气质 DNA
透明度公民数据财务监督公共记录
为公民监督重新设计的干净、高密度金融数据终端
02
色彩
#0f7b3fAccent#23252aInk#5d5d5fInk soft#f4f5f8BG#ffffffBG soft#f2f2f2BG quiet#abababMutedrgba(229, 231, 235, 1)Line中性画布搭配用于财务绩效指标的语义绿/红信号色
03
字体
- display
48px · 600 - heading
24px · 600 - body
16px · 450 - caption
13px · 450
04
间距
4px8px12px16px24px32px48px64px标准4px基础网格，通过一致的行高倍数维持垂直节奏
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
卡片与表格行采用1px实线#e5e7eb边框，提供轻量容器感而不依赖厚重阴影
卡片无可见阴影，依赖边框进行区隔
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
单列数据驱动布局，顶部导航栏，包含密集表格数据的堆叠内容区块
07
动效与交互
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
所有交互状态（颜色、背景、边框）均采用统一150毫秒过渡
表格行、按钮等交互元素采用微妙的背景色过渡 · 状态变化时提供即时视觉反馈，默认光标为指针
08
组件
- button 胶囊形，9999px圆角，极简边框，语义化背景色
- card 白色背景，1px边框与4px圆角，用于展示关键绩效指标
- chip 彩色背景（绿/红/橙），用于股票代码与状态指示器
- input 顶部导航栏的圆角搜索框，配有键盘快捷键提示
- hero 大型左对齐标题，附辅助副标题，下方为指标卡片网格
09
文案语气与禁用清单
- 语气 客观、分析性且严肃，专注于原始数据呈现，无编辑倾向
- 标题风格 关于数据覆盖范围与具体指标的直接陈述性标题
- 按钮文案 功能性导航链接，如'查看全部 →'和'GitHub加星'
- 避免使用厚重投影——截图显示白色卡片仅通过1px边框定义
- 避免使用居中标题——截图显示全文严格左对齐的文本层级
- 避免使用大圆角卡片——截图显示数据容器为尖锐的4px圆角
- 避免使用衬线字体——截图显示所有文本采用干净的无衬线字体
- 避免使用彩色渐变——截图显示扁平中性背景搭配语义色彩块
- 避免使用复杂多栏布局——截图显示线性单列数据流
- 避免: 营销术语
- 避免: 情感化语言
- 避免: 夸大宣传
- 避免: 模糊描述
11
System Prompt
这是一个数据密集型的开源公民透明度仪表板，追踪国会与行政部门的股票交易。采用中性米白色背景（#f4f5f8）搭配纯白界面与深炭文本（#23252a）。字体为干净的无衬线体（Inter），数据部分使用等宽字体。强调色严格语义化：绿色（#0f7b3f）表示盈利，红色（#be2929）表示亏损，橙色用于警告。关键约束：永远不居中文字，永远不使用装饰性阴影，始终将数据可读性置于视觉华丽之上，交互保持克制并采用150毫秒过渡。