Dialitdown Co Nz

一本关于数字礼仪的友好插图指南，带有独特的复古趣味性。

温暖、友好、插图化，避免使用刺眼的对比或激进的霓虹色调。

transitional-serif · humanist-sans

• display68px · 400
• body16px · 400

展示文字使用高对比度的过渡型衬线字体。 · 正文使用简洁的 system-ui 或人文主义无衬线字体。 · 保持排版简洁易读，采用充裕的行高。

在各区块之间及内容块内部采用充裕的垂直间距。

采用主色墨色的细实线边框。

居中的单栏内容布局，在展示媒体或海报时可过渡至网格。

滚动时淡入 · 悬停状态过渡 · 简单的角色动画

按钮和交互元素上的颜色反转或细微缩放变化。 · 激活状态下产生轻微的向下移动或颜色偏移。

• button 高对比度文字的胶囊形按钮。
• card 海报式卡片，采用纯色背景、加粗字体和中心插图。
• chip 用于标签或关键词的椭圆形标签。
• input 底部带细边框的简约文本输入框。
• hero 大型居中标题，上方或下方配有醒目的角色插图。

• 语气 友好、温暖、鼓舞人心。
• 标题风格 结合文字与趣味视觉的大胆、插图式陈述。
• 按钮文案 直接且富有邀请感，常使用标签或短语。

• 不要使用深色模式——网站依赖明亮、多彩的背景。
• 不要使用刺眼的霓虹色——调色板是柔和、温暖且友好的。
• 不要为标题使用粗重的无衬线字体——展示文字应为过渡型衬线字体。
• 不要使用复杂的多栏网格——布局应主要为居中单栏。
• 不要使用写实摄影——网站使用定制的角色插图。
• 不要使用紧凑的行距——充裕的留白和行高是关键。
• 避免: 激进的语言
• 避免: 复杂的行话
• 避免: 密集的文本块

历史提取与模型分析 · 尚未逐项校验