精选 · 开放 · 免费
Dialitdown Co Nz
一个以角色驱动的趣味性编辑网站，通过俏皮的插图与暖色调来倡导积极的在线行为。
PlayfulEditorialConsumerWarmCuration
01
设计气质 DNA
友好插图化编辑风格网络礼仪趣味性
一本关于数字礼仪的友好插图指南，带有独特的复古趣味性。
02
色彩
#222222Ink
#A3F7F7BG
#F6F4EABG soft
rgba(34,34,34,1.0)Line
温暖、友好、插图化，避免使用刺眼的对比或激进的霓虹色调。
03
字体
transitional-serif · humanist-sans
- display
68px · 400 - body
16px · 400
展示文字使用高对比度的过渡型衬线字体。 · 正文使用简洁的 system-ui 或人文主义无衬线字体。 · 保持排版简洁易读，采用充裕的行高。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
在各区块之间及内容块内部采用充裕的垂直间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
采用主色墨色的细实线边框。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的单栏内容布局，在展示媒体或海报时可过渡至网格。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing
滚动时淡入 · 悬停状态过渡 · 简单的角色动画
按钮和交互元素上的颜色反转或细微缩放变化。 · 激活状态下产生轻微的向下移动或颜色偏移。
08
组件
- button 高对比度文字的胶囊形按钮。
- card 海报式卡片，采用纯色背景、加粗字体和中心插图。
- chip 用于标签或关键词的椭圆形标签。
- input 底部带细边框的简约文本输入框。
- hero 大型居中标题，上方或下方配有醒目的角色插图。
09
文案语气与禁用清单
- 语气 友好、温暖、鼓舞人心。
- 标题风格 结合文字与趣味视觉的大胆、插图式陈述。
- 按钮文案 直接且富有邀请感，常使用标签或短语。
- 不要使用深色模式——网站依赖明亮、多彩的背景。
- 不要使用刺眼的霓虹色——调色板是柔和、温暖且友好的。
- 不要为标题使用粗重的无衬线字体——展示文字应为过渡型衬线字体。
- 不要使用复杂的多栏网格——布局应主要为居中单栏。
- 不要使用写实摄影——网站使用定制的角色插图。
- 不要使用紧凑的行距——充裕的留白和行高是关键。
- 避免: 激进的语言
- 避免: 复杂的行话
- 避免: 密集的文本块
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（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
设计一个推广积极数字行为的、友好且充满趣味性的编辑网站。使用明亮柔和的背景色，如 #A3F7F7 和 #F6F4EA，搭配深墨色（#222222）。主要展示字体应为过渡型衬线字体，而正文使用简洁的人文主义无衬线字体。将定制的、充满趣味性的角色插图作为核心视觉元素。避免使用深色模式、刺眼的霓虹色或过于复杂的网格；应专注于充裕的留白和居中的单栏布局，以突出趣味性的排版与插图。语调应温暖且鼓舞人心，避免使用激进的语言或密集的文本块。确保所有交互元素都具备平滑的过渡效果和清晰的悬停状态。
en · zh-CN · zh-TW · ja · ko