精选 · 开放 · 免费
Squadeasy
一个温暖、充满活力的员工参与平台,利用动态摄影和大胆排版来促进连接。
ConsumerFriendlyMobile UIApp UIWarm
01
设计气质 DNA
员工参与平易近人动态连接温暖
一个友好的社区公告板,上面有鲜艳、重叠的照片和大胆、鼓舞人心的信息。
02
色彩
#FF5A8FAccent
#000000Ink
#666666Ink soft
#E1C19EBG
rgba(0,0,0,0.12)Line
温暖而充满活力的调色板,强调人际连接和亲和力。
03
字体
grotesque-sans · humanist-sans
- display
80px · 900 - heading
56px · 700 - body
16px · 400
所有主要标题均使用大写字母 · 主要展示文本使用极高字重 (900) · 大标题使用紧凑的字间距 (-2px)
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
宽裕的内边距 (40px 24px 140px 24px) 为大块内容区域创造呼吸空间。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 14px
lg · 100px
pill · 100px
活动元素上的 1px 实线黑色边框
rgba(0, 0, 0, 0.12) 0px 1.52px 8px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽主区域,包含重叠、旋转的图片和居中的文本
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
图片旋转的 transform 动画 (0.2s) · 区域显示的透明度淡入淡出 (0.4s - 0.8s)
交互元素的缩放 transform · 即时视觉反馈
08
组件
- button 胶囊形按钮,采用高对比度配色(黑色背景/白色文字或霓虹黄背景/黑色文字)
- card 重叠、旋转的图片卡片,带有柔和阴影和有机形状
- chip 无
- input 无
- hero 全宽区域,包含动态、重叠的图片和居中的粗体排版
09
文案语气与禁用清单
- 语气 热情、鼓舞人心且以人为本
- 标题风格 大胆、大写的声明式标题,营造紧迫感和兴奋感
- 按钮文案 清晰、面向行动(如 DEMANDER UNE DÉMO)并带有方向性箭头
- 不要使用冰冷、企业化的配色 —— 截图显示的是温暖、以人为本的色彩
- 不要使用纤细、轻量的字体 —— 截图显示的是超粗体、高冲击力的字体
- 不要创建僵化、网格锁定的布局 —— 截图显示的是有机、重叠、旋转的图片
- 不要使用狭小、局促的间距 —— 截图显示的是宽裕的内边距和呼吸空间
- 不要使用微妙、柔和的按钮 —— 截图显示的是高对比度、胶囊形的 CTA,并带有霓虹黄点缀
- 不要避免使用摄影 —— 截图在整个页面中使用了多张动态、聚焦于人的照片
- 避免: 企业行话
- 避免: 被动语态
- 避免: 小而怯懦的排版
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一个温暖、充满活力的员工参与平台,利用动态摄影和大胆排版来促进连接。关键色彩包括温暖的米色 (#E1C19E) 背景、黑色 (#000000) 排版、充满活力的粉色 (#FF5A8F) 点缀和霓虹黄 (#E4FF60) 高光。排版方面,展示文本使用超粗体 grotesque-sans,字间距紧凑;正文内容使用简洁的 humanist-sans。关键设计规则:拥抱重叠、旋转的图片以营造有机感;使用极高字重以获得最大冲击力;保持宽裕的间距和呼吸空间;避免冰冷的企业美学、纤细字体、僵化网格布局、狭小局促的间距、微妙按钮,并避免使用人物摄影。系统强调热情、鼓舞人心的沟通方式,以及面向行动的 CTA。
en · zh-CN · zh-TW · ja · ko