精选 · 开放 · 免费
Getuntil
一款趣味十足的倒计时应用,帮助你追踪生活中有意义的事件。
GradientConsumerProductPlayfulFriendly
01
设计气质 DNA
倒计时期待重要事件个人追踪器
一个温暖、充满活力的个人日历,用于记录生活亮点
02
色彩
#FF3B30Accent
#000000Ink
#000000A6Ink soft
#FFFFFFBG
#F2F2F2BG quiet
#00000066Muted
rgba(0, 0, 0, 0.1)Line
充满活力的多彩渐变与干净、明亮的背景形成对比。
03
字体
humanist-sans
- display
40px · 700 - headline
30px · 700 - body
16px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
80px
96px
慷慨的垂直节奏,主区域间距为80px
05
表面 (圆角 / 阴影 / 边线)
sm · 8px
md · 16px
lg · 32px
pill · 999px
none
06
布局
1200container
12columns
24pxgutter
768breakpoints
带有充裕内边距的居中单栏布局
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
平滑过渡
在交互元素上显示指针光标 · 标准的点击行为
08
组件
- button 带白色文字的圆角黑色胶囊按钮
- card 大尺寸渐变圆角矩形
- input 带有微妙背景的标准文本输入框
- hero 应用图标、主标题、副标题以及悬浮在渐变背景上的UI卡片
09
文案语气与禁用清单
- 语气 友好、积极、个人化
- 标题风格 直接且以行动为导向
- 按钮文案 清晰且具有鼓励性
- 不要使用尖锐的角——截图显示的是柔和、大尺寸的圆角矩形
- 不要使用深色背景——截图显示的是白色/浅色背景
- 不要使用柔和、低饱和度的颜色——截图显示的是充满活力的高饱和度渐变
- 不要使用衬线字体——截图显示的是无衬线字体
- 不要使用复杂的布局——截图显示的是干净、居中的单栏布局
- 不要使用厚重的投影——截图显示的是扁平或柔和抬升的表面
- 避免: 正式语言
- 避免: 技术术语
- 避免: 阴暗、沉闷的色调
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
该系统是一个友好、趣味十足的倒计时应用落地页。它将自己定位为追踪生活中有意义事件的一种方式。关键十六进制颜色包括白色背景(#FFFFFF)、黑色文字(#000000)以及充满活力的渐变色,如红色(#FF3B30)、绿色(#34C759)、蓝色(#007AFF)和橙色。字体采用简洁的人文主义无衬线体。关键禁忌:不要使用深色模式或深色背景。不要在卡片或按钮上使用尖锐的角。不要使用柔和或低饱和度的颜色;拥抱高饱和度渐变。不要使用衬线字体。不要创建杂乱的布局;保持其宽敞和居中。不要使用厚重的投影。
en · zh-CN · zh-TW · ja · ko