精选 · 开放 · 免费

Dyotanya

一位富有共情能力的网页设计师的个人作品集，运用表现力强的衬线字体和流畅的布局来传达创造力。

PortfolioStudioRefinedTypographyWarm
Dyotanya 网站截图
↓ 下载设计系统包 (13 MB)在 OpenDesign 中打开

原站: https://dyotanya.com/en

📦 浏览包内文件 →

01

设计气质 DNA

创意共情独特个人化艺术性

一个富有表现力的创意作品集，将精炼的字体排印与艺术化的装饰元素相结合。

02

色彩

#81aed9Accent
#000000Ink
#333333Ink soft
#f5f5f3BG
#4f4f4fMuted
rgba(0, 0, 0, 0.1)Line

以灰白和黑色为主的克制色彩方案，营造出精致的画布，让蓝色点缀和富有表现力的字体排印成为焦点。

03

字体

didone-serif · humanist-sans

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

基于宽松的 4px 基础网格，提供充裕的间距，支持呼吸感强的编辑式布局。

05

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

sm · 1px
md · 20px
lg · 30px
pill · 999px

使用纤细、微妙的边框或清晰的实心盒阴影来提升按钮等元素的层次感。

5px -5px 0px 0px #333333 · 4px -4px 0px 0px #333333

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

一种不对称、自由流动的布局，使用大号字体块和不对称网格来引导视线。

07

动效与交互

100msmicro
250mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

交互元素上的微妙过渡，如背景色和盒阴影变化。 · 聚焦文本元素的平滑字间距动画。

交互元素上的微妙背景色和盒阴影过渡。 · 按下时轻微的触感减弱或色彩变化。

08

组件

09

文案语气与禁用清单

10

包内真实截图

Dyotanya — 桌面首屏（hero）
桌面首屏（hero）
Dyotanya — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dyotanya — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dyotanya — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dyotanya — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dyotanya — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dyotanya — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dyotanya — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dyotanya — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dyotanya — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dyotanya — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dyotanya — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dyotanya — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Dyotanya — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

这是一个富有共情能力的网页设计师的个人作品集，定位为艺术性、精致且温暖。关键十六进制颜色包括灰白背景（#f5f5f3）、近乎黑色的墨色（#000000，#333333）和浅蓝色点缀（#81aed9）。字体排印方面，展示文字采用优雅的衬线字体，正文使用清晰的无衬线字体，在富有表现力的标题和可读的细节之间形成强烈对比。布局不对称且流畅，运用大号字体块和充足的留白。关键禁忌：不要使用僵化的网格布局，不要过度使用亮色，不要在标题中使用几何无衬线字体，不要使用标准扁平按钮，不要使用纯黑色背景，不要用不必要的元素使界面显得杂乱。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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