厳選・オープン・無料

The FWA

キュレーションされたデジタル卓越性のための、クリーンでコンテンツファーストの展示空間。

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

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

📦 パックの中身を見る →

01

デザイン DNA

キュレーションデジタルアワードポートフォリオギャラリーデザインショーケース

受賞Webデザインのための洗練されたデジタル博物館、またはキュレーションされたギャラリー。

02

カラー

#FFCC00Accent
#404040Ink
#9A9A9AInk soft
#FFFFFFBG
#ECECECBG soft
#8E8E8EMuted
rgba(236, 236, 236, 1.0)Line

繊細なテクスチャと単一の鮮やかなイエローアクセントを用いてキュレーションされたコンテンツを枠組みする、モノクロームのキャンバス。

03

タイポグラフィ

grotesque-sans · humanist-sans · monospace

カテゴリラベルと日付には大文字テキストトランスフォーム · 補足情報にはライトウェイト（300） · 全コンテンツブロックに厳格な左揃え

04

余白

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px

内部パディングとマージンには一貫した4pxグリッドを使用。

05

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

sm · 2px
md · 4px
lg · 5px
pill · 999px

コンテンツブロックを分割し、グリッド構造を定義するために、細い1pxボーダーを使用。

0 1px 3px rgba(0,0,0,0.1)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

大きなメディアブロックと狭いメタデータカラムを組み合わせた構造化された非対称グリッド。

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing

インタラクティブな状態変化のための透明度フェード · コンテンツ表示のためのスライドインアニメーション

カーソルがポインタに変わり、透明度や色に微細な変化。 · 直接ナビゲーション、またはメディア再生トリガー。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

FWAはキュレーションされたデジタルアワードギャラリーおよびポートフォリオショーケースです。デザインDNAは、白（#FFFFFF）とチャコール（#404040）を用いたミニマルなモノクロームパレットに、鮮やかなイエロー（#FFCC00）のみをアクセントとする構造に基づいています。タイポグラフィは、本文にhumanist-sans、ディスプレイ要素にコンデンス grotesque-sansを使用し、色ではなくウェイトとサイズによる可読性と階層を優先します。レイアウトは、サーフェスを定義するために細い線と繊細なピクセルテクスチャを使用した構造化グリッドです。重要な禁止事項：複数のアクセント色は決して使用せず、大きなテキストブロックを中央揃えにせず、標準UI要素に重いフォントウェイトは使用しないこと。全体的な印象は落ち着き、洗練され、コンテンツファーストであり、特集プロジェクトが抑制されたギャラリーのような環境の中に際立つことを可能にします。

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

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

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

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