厳選・オープン・無料

ABC Dinamo

大胆なタイポグラフィ、エディトリアルな画像、ミニマルなホワイトスペース重視のレイアウトを強調した、モダンで洗練された書体_foundryウェブサイト。

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

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

📦 パックの中身を見る →

01

デザイン DNA

タイポグラフィ_foundry書体デザインカスタム

デジタル書体を扱う、ハイエンドのコレクタブルなツールとして.fontを大切にする、プレミアムブティックのような存在。

02

カラー

#FEE905Accent
#000000Ink
#FFFFFFBG
#F0F4F6BG quiet
#EBEBEBMuted
rgba(0,0,0,0.1)Line

starkな白のキャンバス、黒のタイポグラフィ、そして鮮やかな黄のアクセントを用いた、ミニマルなハイコントラストパレット。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

全テキストはウェイト400を使用。 · 大きな見出しには Tight な文字間隔を設定。 · ラベルには控えめにテキストを大文字に変換。

04

余白

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

セクション間には広めのホワイトスペースを設け、ナビゲーションおよびUIコンポーネント内部には Tight で構造化されたスペーシングを採用。

05

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

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

境界線は最小限にし、UIの区切りとして1pxの実線の黒を時折使用。

rgb(255, 249, 0) 0px 0px 0px 1px

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

左揃いの常設ナビゲーションサイドバーと、ヒーロー画像やコンテンツを表示する中央/右コンテンツエリアを持つ、非対称分割レイアウト。

07

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

250msmicro
400mssmall
800msmedium
cubic-bezier(0.1, 0.6, 0.4, 1)easing

ページトランジションのための、滑らかな不透明度と背景のフェード。 · マイクロインタラクションのためのcubic-bezier変換。 · 要素の順次読み込みのための、リニアなディレイ。

ナビゲーションやUI要素の微かな色調や背景の変化。 · アクティブステートによる即時フィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

これは、大胆なタイポグラフィ、エディトリアルな画像、ミニマルなホワイトスペース重視のレイアウトを強調した、モダンで洗練された書体_foundryウェブサイトです。デザインでは最大のコントラストを得るために、 starkな白背景に実体のある黒テキストを採用し、時折鮮やかな黄がアクセントとして加わる。タイポグラフィは主にクリーンなジオメトリックおよびヒューマニストsans-serifカテゴリで構成され、見出しには Tight な文字間隔で large スケールで提示される。左揃いの常設ナビゲーションサイドバーがインターフェースのアンカーとなる。主要なHEXカラーは #FFFFFF、#000000、#FEE905。重要な禁止事項: 決して太字のフォントウェイトを使わず、ダークモードは完全に避け、複雑なグラデーションを導入せず、sans-serifカテゴリに固執し、カラーレッジの使用は厳密に最小限に抑え、カードやチップには常に大きく丸みのあるコーナーを使用すること。

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

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

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

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