01
设计气质 DNA
书签组织视觉实用
一个安静、实用的工具，用于管理数字信息
02
色彩
#e0e0e0Ink#999999Ink soft#1a1a1aBG#242424BG soft#1e1e1eBG quiet#666666Mutedrgba(255, 255, 255, 0.05)Line单色色板，近乎黑色的表面上使用高对比度文本。
03
字体
- display
40px · 500 - body
18px · 400 - caption
14px · 400
04
间距
4px8px16px24px32px48px64px96px卡片容器内使用充裕的空白，遵循 8px 网格。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
使用细微、低对比度的边框（1px）定义卡片边缘。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
顶部区域采用非对称双栏网格，主要区域使用全宽布局。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
内容加载时有细微的淡入效果
按钮在悬停时可能会改变边框和文本亮度。 · 按钮提供即时反馈。
08
组件
- button 采用描边和幽灵样式，圆角，边框和文本颜色柔和。
- card 深色、带边框的面板，内部间距宽松。
- chip 无可见元素。
- input 无可见元素，但主题切换器是一个开关控件。
- hero 标题和描述左对齐，认证控件位于右侧。
09
文案语气与禁用清单
- 语气 枯燥、直白、实用。
- 标题风格 直接、陈述性的句子。
- 按钮文案 简洁、命令式的标签。
- 不要使用明亮或多彩的强调色——截图显示为纯粹的单色调色板。
- 不要为卡片添加投影——截图仅显示扁平、带边框的表面。
- 不要对主要操作使用圆形、药丸形按钮——截图显示的是圆角矩形按钮。
- 不要将所有文本居中对齐——截图显示标题和段落均为左对齐。
- 不要在界面上堆积多个操作号召——截图只有两个主要按钮。
- 不要使用大幅、表现性的摄影图片——截图显示的是文本驱动、极简的界面。
- 避免: 俏皮的语言
- 避免: 鲜艳的颜色
- 避免: 装饰性元素
11
System Prompt
Herdi.ng 是一个极简的视觉书签工具，采用深色、实用的设计。它使用近乎黑色 (#1a1a1a) 的背景，搭配稍浅的灰色 (#242424) 卡片表面。字体结合了用于主标题的衬线体和用于正文的无衬线体，营造出干净但不冰冷的感觉。界面克制，使用低对比度边框和柔和的文本颜色 (#999999, #666666) 来建立层次。关键禁忌：避免使用任何高饱和度的强调色；设计严格单色。不要使用装饰性阴影；表面是扁平的，由细微的边框定义。避免居中文本块；保持强烈的左对齐网格。语调枯燥而直白，注重功能而非华丽。