精选 · 开放 · 免费
Dropmark
为创意团队打造的简洁、友好的视觉化组织工具。
SaaSProductivityCollaborationCleanCalm
01
设计气质 DNA
组织管理团队协作网络剪藏团队协作
团队工作流的数字化图钉板
02
色彩
#00AFFAAccent
#404040Ink
#7F7F7FInk soft
#FFFFFFBG
#F7F7F1BG soft
#333333Muted
rgba(17,17,17,0.1)Line
以明亮白色画布为基底，搭配柔和的暖灰色调与充满活力的青色点缀。
03
字体
humanist-sans
主字体采用定制的人文主义无衬线体（DropmarkRealHead/Text） · 标题使用半粗体（600）以确保平易近人的视觉突出性 · 正文采用标准可读性权重（400）
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
充足的垂直间距营造出通透、开阔的布局节奏。
05
表面 (圆角 / 阴影 / 边线)
sm · 3px
md · 5px
lg · 8px
pill · 60px
1px solid rgba(17,17,17,0.1)
0px 4px 7px 0px rgba(0,0,0,0.1) · inset 0px 0px 0px 2px rgb(220,220,210)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
内容居中，采用清晰的单栏主视觉流布局。
07
动效与交互
100msmicro
225mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
交互元素采用标准透明度与滤镜过渡 · 悬停状态采用平滑的背景色过渡
按钮及交互元素采用细微的颜色变化。 · 标准指针交互，配合最小化的按压反馈。
08
组件
- button 主按钮采用亮青色填充配白色文字；次级按钮采用透明样式搭配浅灰色边框。
- card 简洁的白色容器，阴影最小化，采用圆角设计。
- chip 在提供的截图中未显著呈现。
- input 简洁的文字输入框，采用标准内边距。
- hero 居中、开阔的标题区域，搭配色彩鲜艳的抽象插图。
09
文案语气与禁用清单
- 语气 友好、专业且富有亲和力。
- 标题风格 直接、以效益为导向的陈述，聚焦于组织管理与工作流程。
- 按钮文案 以行动为导向且具有鼓励性（例如：免费注册、向我展示如何操作）。
- 避免使用深色背景——截图显示主画布为明亮白色（#FFFFFF）。
- 避免使用高对比度的红绿色作为强调色——截图显示亮青色（#00AFFA）为主要操作色彩。
- 避免在主按钮上使用尖锐的直角——截图显示圆角设计（半径3-5px）。
- 避免使用厚重、几何化的无衬线字体——截图显示更柔和的人文主义无衬线风格。
- 避免元素排列过密——截图显示充足的留白与清晰的垂直节奏。
- 避免使用纯黑色文本——截图显示主文本采用柔和的深灰色（#404040）。
- 避免: 过度技术化术语
- 避免: 激进的营销语言
- 避免: 复杂或令人望而生畏的说明
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Dropmark是一款友好、平易近人的SaaS视觉化组织与团队协作工具。采用明亮白色（#FFFFFF）背景，搭配柔和的暖米色（#F7F7F1）用于细微的区域分隔。主文本为柔和的深灰色（#404040），关键强调色为充满活力的青色（#00AFFA）。字体采用人文主义无衬线类别，标题与正文均保持半粗体展示文本与常规可读性文本。关键限制：避免深色模式或高对比度深色背景，避免按钮使用尖锐的直角，避免使用厚重、激进的字体。布局居中、开阔，利用充足留白保持界面冷静且聚焦。
en · zh-CN · zh-TW · ja · ko