精选 · 开放 · 免费
June
以温暖创始人视角呈现的编辑页面，通过手写般的个人化触感宣布公司收购。
analyticssaas
01
设计气质 DNA
温暖亲切透明数据分析初创企业
高级信纸上的一封手写信
02
色彩
#6366F1Accent
#151531Ink
#2A2A63Ink soft
#FAFAFABG
#F0F0FEBG soft
#343A40Muted
rgba(233, 236, 239, 1)Line
柔和米白背景上的高对比度深海军蓝文字，搭配单一亮色靛蓝点缀。
03
字体
geometric-sans · humanist-sans
- display
56px · 900 - heading
40px · 700 - subheading
18px · 400 - caption
12px · 700
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
段落与章节间采用宽松的垂直间距，保持布局整洁通透。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 20px
pill · 9999px
使用浅灰色（#E9ECEF）的1像素细边框定义轮廓，避免增加视觉重量。
0px 1px 3px 0px rgba(0, 0, 0, 0.1) · 0px 2px 10px 0px rgba(13, 19, 27, 0.1) · 0px 0px 2px 0px rgba(13, 19, 27, 0.2)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
主要内容采用单栏编辑式布局，下方接续全宽推广横幅区域。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素上平滑的背景色过渡效果。
链接与交互元素上细微的背景色变化或透明度调整。 · 所有可点击元素采用标准指针光标。
08
组件
- button 极简的文本导航链接，无可见边框或背景。
- card 柔和靛蓝色调（#F0F0FE）卡片，采用20像素大圆角呈现主文章内容。
- chip 作为视觉隐喻的趣味装饰性机票图形。
- hero 深海军蓝超大居中标题，下方衔接浅色调大内容卡片。
09
文案语气与禁用清单
- 语气 透明、真诚、创始人主导。
- 标题风格 大号加粗且富有情感共鸣，聚焦商业事件背后的人文故事。
- 按钮文案 含蓄且信息明确，避免激进营销语言。
- 勿使用纯白（#FFFFFF）背景——截图显示为略微偏暖的米白色（#FAFAFA）。
- 勿使用锐利方形边角——截图中主卡片采用20像素大圆角。
- 勿使用冰冷刻板的美学风格——截图显示内容区域采用温暖亲切的色调（#F0F0FE）。
- 勿使用装饰性高对比度色彩点缀——截图将点缀色限定为单一柔和靛蓝色（#6366F1）。
- 勿使用细小拥挤的字体排版——截图采用大号通透的18像素正文字体。
- 勿使用复杂多栏网格——截图保持简洁单栏编辑式流线布局。
- 避免: 激进的销售语言
- 避免: 过度企业化的术语
- 避免: 杂乱无章的布局
- 避免: 冰冷非人格化的设计
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
June.so是一款SaaS产品分析工具，此页面是宣布其收购的透明创始人主导编辑页面。设计基因由温暖、亲切、高可读性的编辑美学定义。关键十六进制颜色包括墨色深海军蓝（#151531）、背景柔和米白色（#FAFAFA）及内容卡片浅靛蓝色（#F0F0FE），搭配单一亮色点缀（#6366F1）。字体采用几何无衬线展示字体与人文无衬线正文字体。关键禁忌：永远不使用纯白背景，永远不使用尖锐边角，永远不用激进销售语言或复杂网格破坏布局整洁度。
en · zh-CN · zh-TW · ja · ko