OpenDesign·你的设计资产库

网页参考

Gt Planar

一个旨在展示GT Planar字体的沉浸式复古未来主义座舱体验。

TypographyDark ModeExperimentalBold TypographyPortfolio
Gt Planar 网站截图

01

设计气质 DNA

复古未来主义太空座舱字体排印展示交互式

一个用于展示大胆字体的复古未来主义太空座舱界面。

02

色彩

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

以高对比度的单色为基础，搭配单一的活力绿色主强调色，营造出鲜明、复古的技术美学。

03

字体

geometric-sans · monospaced

  • display86px · 300
  • heading48px · 300
  • body16px · 300
  • caption11px · 300

所有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

组件

  • button 极简的、带边框的按钮，使用大写文本，常采用纯色强调背景，例如红色“EXIT”按钮。
  • card 复杂的、信息密集的UI面板，带有1px边框和技术标签。
  • chip 用于状态指示器的简单矩形容器（例如 开/关）。
  • input 标准文本输入框，在画面中未显著呈现。
  • hero 巨大的、居中的字体排印展示，由座舱UI元素环绕。

09

文案语气与禁用清单

  • 语气 技术的、沉浸式的、趣味的。
  • 标题风格 大型、粗体，常使用倾斜或可变字体。
  • 按钮文案 直接的、大写的命令（例如“SCROLL TO START YOUR JOURNEY”）。
  • 不要使用圆角——截图显示所有面板和按钮均为尖锐的、零圆角。
  • 不要使用柔和阴影——截图显示1px的实线边框作为结构元素。
  • 不要使用明亮、多彩的配色——截图显示严格的黑、白、绿配色方案，并仅搭配少量红色。
  • 不要使用混合大小写的UI标签——截图显示所有技术标签均使用大写文本。
  • 不要使用装饰性无衬线字体——截图显示标题使用高度几何化、技术化的展示字体。
  • 不要使用大padding——截图显示紧凑、密集的UI面板，内部padding极小。
  • 避免: 随意的语言
  • 避免: 圆润、友好的美学
  • 避免: 复杂的渐变

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 — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

该设计是一个高度风格化的复古未来主义太空座舱界面，旨在展示GT Planar字体。其特点是一套极简的高对比度配色方案，包括纯黑(#000000)、纯白(#ffffff)和活力的技术绿(#00ff85)，并搭配单一的红色(#ff0000)用于关键操作。字体排印完全依赖于几何无衬线字体类别，在极大的展示尺寸和小型的技术尺度上均使用GT Planar字体家族。关键禁忌包括：避免使用圆角或柔和阴影，因为界面由尖锐的1px边框定义；不要为UI元素使用混合大小写的文本，它们必须全部大写；并避免任何装饰性或友好的美学，始终保持纯粹的、机械的技术感。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。