精选 · 开放 · 免费

Dogstudio

Dogstudio 是一家位于艺术、设计与科技交汇处的跨学科创意工作室。

01

设计气质 DNA

一个数字艺术画廊与高端设计工作室的结合。

02

色彩

高对比度深色画布，带有深蓝色底调，辅以一个鲜明、单一的红色点缀以营造动态能量。

03

字体

didone-serif · humanist-sans · monospace

• display120px · 500
• heading50px · 500
• body14px · 400
• small11px · 400

为标题使用高对比度的迪多内衬线字体以达到最大视觉冲击力。 · 为正文和界面元素搭配简洁、几何感的人文主义无衬线字体。 · 为大写元数据使用宽字距以营造高级感。 · 将衬线字体的使用限制在主要的展示时刻以维持视觉层级。

04

间距

开阔、通透的间距，让大型字体和3D视觉内容主导视口。

05

表面 (圆角 / 阴影 / 边线)

极简的1像素细边框，谨慎使用以实现微妙的区域分隔。

0px 1px 1px 0px rgba(0,0,0,0.15) · 0px 1px 2px 0px rgba(0,0,0,0.15) · 0px 0px 2px 0px rgba(0,0,0,0.4) · 0px 0px 5px 0px rgba(0,0,0,0.2)

06

布局

不对称的、具有编辑感的布局，采用全出血的主视觉区域和浮动的3D元素。

07

动效与交互

针对颜色和变换属性的流畅、平滑过渡。 · 用于内容揭示的、错落的淡入和向上滑动动画。 · 对光标移动有微妙响应的交互式3D模型。

微妙的颜色过渡和缩放变换，通常伴随着一个红色强调元素的出现。 · 通过平滑的变换过渡提供即时的、可触摸的反馈。

08

组件

• button 胶囊形状的容器，采用透明背景、白色文字，并在交互状态时带有一个小的红色强调指示符。
• card 极简主义，通常为透明，让3D模型或大型字体成为主要的视觉元素。
• chip 小型、胶囊形状的标签，使用大写文字和宽字距。
• input 低调、干净的文本输入框，带有最少的装饰元素。
• hero 沉浸式的全视口区域，包含大型3D模型和大胆的、居中或不对称的字体排版。

09

文案语气与禁用清单

• 语气 大胆、坦率、富有创意，并带有一丝智识上的精致感。
• 标题风格 具有宣言性和冲击力，通常使用一个大型的迪多内衬线字体单词或短语。
• 按钮文案 直接且自信，通常伴随一个小型的、彩色的箭头或指示符。

• 不要使用杂乱的布局——截图展示了一个干净的编辑式网格，为大型元素留出了呼吸空间。
• 不要使用大范围的亮色——截图展示了一个以深色为主导的调色板，仅有一个鲜明的红色作为点缀。
• 不要为标题全部使用无衬线字体——截图展示了一个高对比度的迪多内衬线字体以实现最大的展示冲击力。
• 不要为元数据使用紧凑的字距——截图展示了日期和标签使用了宽大的、大写的文本。
• 不要为所有区域使用厚重、实色的背景——截图展示了深邃、黑暗、富有氛围感的背景，带有微妙的渐变。
• 不要使用小而拥挤的界面元素——截图展示了大型、宽裕的点击目标和清晰的交互区域。
• 避免: 企业术语
• 避免: 被动语态
• 避免: 杂乱的界面

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko