精選 · 開放 · 免費

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

互動元素（如 background-color 與 box-shadow）的微妙過渡效果。 · 聚焦文字元素的流暢字距動畫。

互動元素上的 background-color 與 box-shadow 微妙過渡效果。 · 按下時細微的觸感減弱或色彩轉換。

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)。字體搭配上，展示文字使用優雅的 didone-serif，內文則使用簡潔的 humanist-sans，在富有表現力的標題與易讀的細節之間形成強烈對比。版面不對稱且流動，運用大型字體區塊與寬裕的留白。關鍵禁忌：不要使用僵化的網格版面、不要過度使用明亮色彩、不要使用幾何無襯線字體作為標題、不要使用標準的扁平按鈕、不要使用實心黑色背景，也不要讓不必要的元素使介面變得雜亂。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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