厳選・オープン・無料

Displaay

遊び心とアートディレクションに満ちたビジュアルで、ユニークな販売用およびカスタム書体を提示する、インディペンデント・タイポグラフィ・ファウンドリー。

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

オリジナル: https://displaay.net

📦 パックの中身を見る →

01

デザイン DNA

タイポグラフィ・ファウンドリー販売用フォントカスタムタイポインディペンデント

表現豊かなレイアウトを通じて、タイポグラフィアートを紹介するクリエイティブスタジオ。

02

カラー

#020202Ink
#76756FInk soft
#FFFFFFBG
#C9C9C8BG soft
rgba(0,0,0,1.0)Line

モノクローム基盤に、大胆でハイコントラストな写真やイラストがカラーストーリーを定義。

03

タイポグラフィ

humanist-sans

見出しには、タイトなトレッキングを持つクリーンなヒューマニスト・サンセリフを使用。 · 本文は、可読性のために十分なline-heightを維持。 · フォントウェイトは主にレギュラー（400）とし、洗練されたエディトリアルな印象を実現。

04

余白

4px
8px
15px
20px
25px
32px
48px
96px

セクション間には十分な余白を設け、UI要素内部はタイトなpaddingを採用。

05

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

sm · 8px
md · 10px
lg · 20px
pill · 999px

ボタンやチップには1px solid blackを使用し、鋭くグラフィックなアウトラインスタイルを実現。

なし

06

レイアウト

1400container
12columns
24pxgutter
768 / 1024breakpoints

ヒーローセクションでは左揃えのタイポグラフィと右揃えのアクションボタンを配置。その下にはグリッドベースのフィーチャーカードを配置。

07

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

150msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

インタラクティブ要素における、背景や色の滑らかなトランジション。

微細な背景色やボーダーカラーの変化を、滑らかなトランジションで実現。 · 即座に状態が変化し、ページやセクションのナビゲーションをトリガーすることが多い。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

これは、モノクロームパレット（#FFFFFF、#C9C9C8、#020202、#76756F）に根ざした、クリーンでエディトリアルな美学を持つインディペンデント・タイポグラフィ・ファウンドリーのサイト（Displaay）です。タイポグラフィは、大きなディスプレイスケールとレギュラーウェイトを持つカスタムのヒューマニスト・サンセリフに依存しています。レイアウトはゆったりとして左揃えで、ボタンやチップなどのUIコンポーネントには1pxの鋭い黒いボーダーが使用されています。重要な禁止事項：ソフトなシャドウやボーダーのない角丸長方形を避けること、すべてのテキストを中央揃えにしないこと、見出しに汎用的なサンセリフフォントを決して使用しないこと。デザインは洗練され、遊び心があり、ギャラリーのようであり、書体のサンプルと写真の視覚的インパクトに焦点を当てています。

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

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

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

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