厳選・オープン・無料

Gt Planar

GT Planarタイポファミリーを展示するために設計された、没入感のあるレトロフューチャリストなコックピット体験。

TypographyDark ModeExperimentalBold TypographyPortfolio
Gt Planar のスクリーンショット
↓ デザインシステムをダウンロード (7 MB)OpenDesign で開く

オリジナル: https://gt-planar.com

📦 パックの中身を見る →

01

デザイン DNA

レトロフューチャリスト宇宙コックピットタイポグラフィショーケースインタラクティブ

大胆なタイポファミリーを展示するために使用される、レトロフューチャリストな宇宙コックピットインターフェース。

02

カラー

#00ff85Accent
#ffffffInk
#000000BG
#949494Muted
rgba(255, 255, 255, 1.0)Line

単一の主要な鮮やかなグリーンアクセントを持つ、高コントラストのモノクロームベース。強烈でレトロな技術的美学を生み出します。

03

タイポグラフィ

geometric-sans · monospaced

すべてのUIラベルおよびナビゲーション要素に大文字テキストを使用します。 · すべての大きな表示タイプに対して、1.0の tight なラインハイトを維持します。 · 数値データの表示には、フォントのTabularバリアントを活用します。 · 洗練された技術的感覚を出すため、基本フォントウェイトを300に設定します。

04

余白

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

4pxグリッドに基づき、UIパネルには5pxや10pxなど特定のpaddingを使用します。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 9999px

1px solid #ffffff

1px 0px 0px 0px #ffffff · 0px 1px 0px 0px #ffffff · 1px 1px 0px 0px #ffffff · 1px 0px 0px 0px inset #ffffff · 0px 1px 0px 0px inset #ffffff

06

レイアウト

1280container
24pxgutter
768 / 1024breakpoints

固定されたコーナーパネルと中央の焦点エリアを持つ、ビューポート全体のコックピットフレーム。

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

トップバナー内の連続スクロールテキスト。 · hover時の微細な変換。 · メイン表示タイプのフォントバリエーション設定アニメーション。

インタラクティブ要素に対する、微細な変換シフトと色の遷移。 · パネルおよびテキスト上のポインタカーソルで暗示。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

このデザインは、GT Planarタイポファミリーを展示するために作られた、高度にスタイリッシュなレトロフューチャリストな宇宙コックピットインターフェースです。純粋な黒（#000000）、白（#ffffff）、そして技術的な鮮やかなグリーン（#00ff85）の、強烈でコントラストの高いパレットを特徴とし、重要なアクションには単一の赤（#ff0000）アクセントが配置されています。タイポグラフィは幾何学サンセリフカテゴリに完全に依存し、GT Planarフォントファミリーを、極端な表示サイズから小さな技術スケールまで使用しています。重要な禁止事項には、角丸やソフトシャドウの使用を避けること（インターフェースは鋭い1pxのボーダーで定義されるため）、UI要素に混合ケーステキストを使用しないこと（厳密に大文字であるため）、そして装飾的または親しみやすい美学を避け、全体を通して純粋に技術的で機械的な感覚を維持することが含まれます。

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

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

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

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