厳選・オープン・無料

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の遷移。 · press時に微細なタクタイルな縮小またはカラーシフト。

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

これは共感的なウェブデザイナーのためのパーソナルポートフォリオで、アーティスティック、洗練、温かみを定位としています。主要な16進数カラーには、オフホワイト背景（#f5f5f3）、ほぼ黒のインク（#000000、#333333）、ライトブルーアクセント（#81aed9）が含まれます。タイポグラフィは、ディスプレイテキストにエレガントなディドンセリフを、本文コピーにクリーンなヒューマニストサンセリフを組み合わせ、表現力豊かな見出しと可読性の高い詳細の間に強いコントラストを生み出しています。レイアウトは非対称で流動的で、大きなタイポグラフィブロックと豊かな余白を用いています。重要な禁止事項： rigid grid layout を使用せず、明るい色を過剰に使用せず、見出しに幾何学的サンセリフを使用せず、標準的なフラットボタンを使用せず、ソリッドブラック背景を使用せず、不要な要素でインターフェースを雑然とさせないこと。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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