# Gt Planar · Design system migration spec

> Source: https://gt-planar.com  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in thematic UI design, transforming a standard type specimen into a deeply immersive, highly interactive experience.

## 1. Identity DNA

The GT Planar site is built as a retro-futuristic space cockpit interface, a functional control panel where the primary instrument is the typeface itself. Its design treats typography not as content, but as the central, interactive readout of a speculative machine.

**One-liner:** An immersive, retro-futuristic cockpit experience designed to showcase the GT Planar typeface.
**Keywords:** retro-futuristic · space cockpit · typography showcase · interactive
**Analogy:** A retro-futuristic space cockpit interface used to showcase a bold typeface.

## 2. Color

The color system is a high-contrast monochromatic base, where pure black and white form the structural void and highlights. A single dominant vibrant green acts as the primary data accent, with red reserved only for critical system alerts.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#ffffff` | body text |
| `--muted` | `#949494` | placeholder |
| `--muted-soft` | `#606060` | weak hint |
| `--accent` | `#00ff85` | single accent |
| `--line` | `rgba(255, 255, 255, 1.0)` | divider |

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

The principle is one of stark technical clarity, where color functions as a precise indicator within a severe, controlled environment.

## 3. Typography

Typography is the system's core voice, delivered through the geometric sans-serif GT Planar family. Its rules enforce a technical tone via all-caps UI labels, a tight 1.0 line height for display type, and a base weight of 300 for a refined, instrumental feel.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 86px | 1.0 | 300 | -14px | Main title 'GT PLANAR' |
| heading | 48px | 1.0 | 300 | 0px | Secondary display text |
| body | 16px | 1.5 | 300 | 0.64px | Default text and UI labels |
| caption | 11px | 1.0 | 300 | 0px | Small technical labels and stats |

**Type rules:**
- 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.

## 4. Spacing

Spacing follows a strict 4px rhythm, creating a dense, compact cadence appropriate for data-dense instrumentation panels.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Based on a 4px grid, using specific padding like 5px and 10px for UI panels.

## 5. Surfaces

Surface definition is achieved through sharp 1px borders and inset shadows, creating depth via precise structural outlines rather than soft diffusion. This approach renders every UI element as a discrete, machined component.

- **Radius:** sm 0px · md 0px · lg 0px · pill 9999px
- **Shadows:**
  - 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
- **Borders:** 1px solid #ffffff

## 6. Layout

The layout is a fixed, full-viewport frame, with persistent UI panels anchored in the corners to create a cockpit surround. This skeleton directs all focus to the central area, which serves as the primary typographic display and interaction zone.

- **Container max:** 1280px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion serves the immersive metaphor, with continuous scrolling banners acting as live data feeds and font variation animations highlighting the typeface's technical capabilities. All transitions are brisk, standard cubic-bezier movements that feel mechanical rather than decorative.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Continuous scrolling text in the top banner.
  - Subtle transformations on hover.
  - Font variation settings animation for the main display type.

- **Hover:** Subtle transform shifts and color transitions on interactive elements.
- **Click:** Implied by pointer cursors on panels and text.
- **Transition:** Standard 0.15s cubic-bezier transitions for color, transform, and opacity.
- **Keyboard:** Standard focus outlines not visible in the screenshot.

## 8. Voice & Don'ts

The editorial voice is technical, immersive, and playful, communicating through direct, uppercase commands and a tone that mirrors a machine's readout. This voice is consistent with the system's deliberate avoidance of casual language and friendly aesthetics.

- **Tone:** Technical, immersive, and playful.
- **Headline style:** Large, bold, often skewed or variable typeface usage.
- **CTA style:** Direct, uppercase commands (e.g., 'SCROLL TO START YOUR JOURNEY').
- **Avoid:** Casual language / Rounded, friendly aesthetics / Complex gradients

### Don'ts
- ❌ Don't use rounded corners — the screenshot shows sharp, zero-radius corners on all panels and buttons.
- ❌ Don't use soft shadows — the screenshot shows sharp, 1px solid borders acting as structural elements.
- ❌ Don't use a bright, multi-color palette — the screenshot shows a strict black, white, and green scheme with minimal red.
- ❌ Don't use mixed-case UI labels — the screenshot shows consistent use of uppercase text for all technical labels.
- ❌ Don't use decorative sans-serifs — the screenshot shows a highly geometric, technical display font for headings.
- ❌ Don't use large padding — the screenshot shows dense, compact UI panels with minimal internal padding.

The system deliberately rejects soft, decorative, or informal elements to maintain its strict, mechanical persona.

## System Prompt (paste into AI tool)

```
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.
```