CURATED · OPEN · FREE

Gt Planar

An immersive, retro-futuristic cockpit experience designed to showcase the GT Planar typeface.

TypographyDark ModeExperimentalBold TypographyPortfolio
Gt Planar screenshot
↓ Download design system (7 MB)Open in OpenDesign

Visit: https://gt-planar.com

📦 Browse pack contents →

01

Identity DNA

retro-futuristicspace cockpittypography showcaseinteractive

A retro-futuristic space cockpit interface used to showcase a bold typeface.

02

Color

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

High-contrast monochromatic base with a single dominant vibrant green accent, creating a stark, retro-technical aesthetic.

03

Typography

geometric-sans · monospaced

Use uppercase text for all UI labels and navigation elements. · Maintain a tight line height of 1.0 for all large display type. · Utilize the Tabular variant of the font for any numerical data displays. · Set base font weight to 300 for a refined, technical feel.

04

Spacing

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

Based on a 4px grid, using specific padding like 5px and 10px for UI panels.

05

Surfaces

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

Layout

1280container
24pxgutter
768 / 1024breakpoints

A full-viewport cockpit frame with fixed corner panels and a central focus area.

07

Motion & Interaction

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

Continuous scrolling text in the top banner. · Subtle transformations on hover. · Font variation settings animation for the main display type.

Subtle transform shifts and color transitions on interactive elements. · Implied by pointer cursors on panels and text.

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

11

System prompt

This design is a highly stylized, retro-futuristic space cockpit interface created to showcase the GT Planar typeface. It features a stark, high-contrast palette of pure black (#000000), white (#ffffff), and a vibrant technical green (#00ff85), with a single red (#ff0000) accent for critical actions. The typography relies exclusively on geometric sans-serif categories, utilizing the GT Planar font family at both extreme display sizes and small technical scales. Critical donts include: avoid using rounded corners or soft shadows, as the interface is defined by sharp 1px borders; do not use mixed-case text for UI elements, which are strictly uppercase; and avoid any decorative or friendly aesthetic, maintaining a purely technical, mechanical feel throughout.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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