厳選・オープン・無料

Garden Eight

表現力豊かなタイポグラフィと広大な余白で定義される、東京を拠点とするデジタルデザインスタジオのポートフォリオ。

01

デザイン DNA

タイポグラフィが主な展示物となるミニマルなギャラリー。

02

カラー

極度の抑制により、モノクロムのパレットを使用し、表現力豊かなタイポグラフィと 3D イメージがすべての注目を集めます。

03

タイポグラフィ

didone-serif · humanist-sans

• display215px · 400
• body15px · 400

ナビゲーションリンクには、大文字の tracking を使用します。 · ディスプレイウェイトと本文ウェイトの間に高いコントラストを適用します。 · 見出しと本文テキストの間に巨大なスケール変動を許可します。

04

余白

コンテンツブロックをフレームする、豊かな padding と広大な余白。

05

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

1px solid rgb(30, 31, 31)

rgb(30, 31, 31) 0px 2px 2px 0px inset · rgb(219, 214, 208) 0px 3px 2px 0px inset

06

レイアウト

コンテンツを絶対的な端に押し込む、ミニマルなグリッド。

07

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

画像の表示に向けた、遅く滑らかな opacity トランジション。 · 3D 背景要素のための、easing を施した transform ムーブメント。

テキストリンク上の微細なカーソル変更や opacity 変化。 · 最小限の即座の視覚的フィードバックを持つ、標準的なポインターステート。

08

コンポーネント

• button 大文字スタイルで、背景の塗りつぶしなしの、ミニマルなテキストベースリンク。
• card ボーダー半径やドロップシャドウのない、クリーンなエッジ。
• chip 存在する場合、おそらくテキストのみのミニマルなタグ。
• input 存在する場合、おそらく薄い下線付きのミニマルな入力フィールド。
• hero ビューポートの全高を占める巨大なタイポグラフィ。

09

文体と禁止事項

• トーン 自信に満ち、洗練され、静謐です。
• 見出し 表現力豊かで、巨大で、哲学的（例：'WHAT CAN WE MAKE NEXT'）。
• CTA ボタンではなくコンテキストに依存する、ミニマルな大文字テキストリンク。

• 明るいカラーを使用しない — スクリーンショットは厳密にニュートラルなベージュとブラックのパレットを示しています。
• 強く丸みを帯びたコーナーを使用しない — スクリーンショットは鋭く四角いエッジを示しています。
• 小さなヘッドラインタイポグラフィを使用しない — スクリーンショットはビューポート全体を占めるディスプレイタイプを示しています。
• 雑然とした背景を使用しない — スクリーンショットはクリーンで広大なベージュの表面を示しています。
• bold なボタンスタイルを使用しない — シンプルな大文字テキストリンクを示しています。
• ダークテーマを使用しない — スクリーンショットは主に明るく暖色のインターフェースを示しています。
• 避ける: 雑然としたレイアウト
• 避ける: 明るく、彩度の高いカラー
• 避ける: 装飾的な UI 要素
• 避ける: 小さく、窮屈なタイポグラフィ

10

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

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

11

System Prompt

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