精選 · 開放 · 免費

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。 · 任何數值資料顯示均使用字型的 Tabular 變體。 · 基礎字重設為 300，以營造精緻、技術感。

04

間距

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

基於 4px 格線，UI 面板使用特定的 padding，如 5px 和 10px。

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 元素，它們嚴格使用大寫；並避免任何裝飾性或友善的美學，全程保持純粹的技術性、機械感。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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