厳選・オープン・無料

Ayakaito

リッチなフォトスタティルを通じて、ハイエンドのブランディングとタイポグラフィを紹介する、洗練されたエディトリアルポートフォリオ。

EditorialPortfolioTypographyPhotographicCuration
Ayakaito のスクリーンショット
↓ デザインシステムをダウンロード (39 MB)OpenDesign で開く

オリジナル: https://ayakaito.com

📦 パックの中身を見る →

01

デザイン DNA

editorial洗練された厳選されたJapanesetypography

写真、印刷物、タイポグラフィの洗練されたミックスを展示する、ハイエンドデザインスタジオのギャラリー。

02

カラー

#35472CInk
#FEFDF8BG
#35477CMuted
rgba(53, 71, 44, 1)Line

深みのあるオリーブグリーンと温みのあるニュートラル色を主とする、アーストーンのオーガニックパレット。

03

タイポグラフィ

transitional-serif · humanist-sans · monospaced

ナビゲーションリンクは、18pxのヒューマンリスト Sans を使用します。 · プロジェクトの説明文には、洗練されたトランジショナル Serif を使用します。 · キャプションやメタデータには、大文字の Sans をよく使用します。

04

余白

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

豊かで、大判のタイポグラフィスケールと意図的な Negative Space を確保しています。

05

サーフェス (角丸 / 影 / 罫線)

sm · 4px
md · 8px
lg · 12px
pill · 999px

インタラクティブ要素用に、細い1px solid dark olive（#35472C）のボーダー。

06

レイアウト

1440container
12columns
24pxgutter
768 / 1024breakpoints

没入型のフルブリード写真と、スクリーン分割されたエディトリアルレイアウト。

07

モーションとインタラクション

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

すべてのインタラクティブ要素にスムーズなトランジション（すべて0.3s）。 · hover 状態での微妙な不透明度フェード。

ナビゲーションリンクとボタンの、微妙な色の変化と不透明度トランジション。 · リンクとプロジェクトの標準的なポインタインタラクション。

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

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

実ページから取得 · 実 computed styles

11

System Prompt

これは、ハイエンドデザインスタジオの洗練されたエディトリアルポートフォリオで、ブランディング、タイポグラフィ、イラストレーションに焦点を当てています。コアパレットは、深みのあるオリーブグリーン（#35472C）と温みのあるオフホワイト（#FEFDF8）に大きく依存し、時折セクション背景として柔らかなピンクを使用します。タイポグラフィは、大見出し用のエレガントなトランジショナル Serif と、ナビゲーションおよびメタデータ用のヒューマンリスト Sans を組み合わせています。密集した UI よりも、没入型のフルブリード写真と豊かな Negative Space を重視します。重要な禁止事項：明るいネオンアクセントカラー、重いドロップシャドウ、硬いカードベースのレイアウトは避けてください。システムは、洗練され、静謐で、ギャラリーのような視覚的階層を維持する必要があります。

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

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

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

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