---
title: "GT Planar design system"
variant: extended
source: https://gt-planar.com/
captured_at: 2026-10-12
theme: dark
industry: design
generator: Design DNA (https://four.wiralomi.com/style/gt-planar-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# GT Planar · Design System

> A type specimen staged as a futuristic control interface

**Theme:** dark · **Industry:** design · **Source:** https://gt-planar.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

GT Planar presents its variable typeface through a black, instrument-panel interface, with oversized white letterforms at the center. Vivid green, violet, and red controls frame the specimen and make the page feel like an interactive design instrument.

## North star

Let oversized, expressive type dominate a black canvas, and use precise HUD-like controls as its restrained frame.

## Overview

The page treats the typeface itself as the product and builds a dark, technical stage around it. Black (#000000) dominates the canvas, while white (#ffffff) letterforms carry the main visual message. The hero resembles a compact spacecraft HUD: thin gray outlines divide small instrument modules around a large central specimen, with green indicators and a sharp red exit control. Violet appears in the angle and weight controls, adding a distinct second interaction color. Typography is the primary imagery: GT Planar appears in oversized, lightweight forms, while compact uppercase labels and navigation text make the surrounding interface legible as equipment. The page is vertically paced with extensive black intervals between sparse content sections, allowing each specimen and headline to read as an exhibit. Hairline borders and rectangular panels create structure without shadows, gradients, or rounded-card styling. Treat other deep and bright palette tones as interface or specimen accents, not as broad background bands.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Console | `#000000` | `--color-deep-console` | neutral | Near-total page canvas; frames the hero and the widely spaced content sections. |
| Specimen White | `#ffffff` | `--color-specimen-white` | neutral | Primary type color for the central specimen, headings, and interface labels. |
| Electric Violet | `#6100ff` | `--color-electric-violet` | brand | Angle and weight controls, selected states, and occasional type or panel accents. |
| Laser Green | `#00ff85` | `--color-laser-green` | accent | HUD indicators, active values, compact badges, and green instrument details. |
| Violet Shadow | `#29006c` | `--color-violet-shadow` | surface | Deep violet backing or control surface behind violet interactive elements. |
| Panel Graphite | `#606060` | `--color-panel-graphite` | neutral | Thin outlines and dividers around the HUD panels and bordered interface modules. |
| Instrument Gray | `#949494` | `--color-instrument-gray` | neutral | Secondary navigation, subdued labels, and muted panel details. |
| Exit Red | `#ff003d` | `--color-exit-red` | semantic | Small, high-salience exit control; reserve for a limited interface signal. |
| Circuit Green | `#002c00` | `--color-circuit-green` | surface | Deep green tone found within interface-like card details and visual elements. |
| Dark Plum | `#1a0014` | `--color-dark-plum` | surface | Minor near-black color detected in text or interface details; not a defining page surface. |
| Soft Signal | `#90ee90` | `--color-soft-signal` | accent | Small green typography accent in the measured palette; subordinate to the brighter HUD green. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Console) · `--color-text` → `#ffffff` (Specimen White) · `--color-border` → `#606060` (Panel Graphite) · `--color-accent` → `#6100ff` (Electric Violet) · `--color-accent-2` → `#90ee90` (Soft Signal) · `--color-accent-3` → `#ff003d` (Exit Red) · `--color-on-accent` → `#000000` (Deep Console)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#6100ff` | `#000000` | 2.95:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT Planar | `--font-body` | webfont | 300, 400 | All page typography, from hero specimen and section headings to labels and controls. | Space Grotesk |

- **GT Planar:** Use a light display weight for large uppercase headings and specimen text; reserve regular weight for controls. Labels and navigation are uppercase with generous tracking.

### Type scale — Golden Ratio (ratio ≈ 1.615, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 187px | 300 | 0.9 | 0 | — | GT Planar | Oversized hero type specimen and expressive display lettering. |
| h1 | 146px | 300 | 0.9 | 0.04em | uppercase | GT Planar | Primary uppercase page or section headline. |
| h2 | 115px | 300 | 1.15 | 0 | — | GT Planar | Large secondary section headline. |
| h3 | 40px | 300 | 1 | 0.006em | uppercase | GT Planar | Compact uppercase feature or subsection heading. |
| h4 | 24px | 300 | 1.17 | 0 | — | GT Planar | Smaller supporting heading within content. |
| body | 17px | 300 | 1.24 | 0.015em | — | GT Planar | Explanatory typeface-design copy. |
| caption | 16px | 300 | 1.63 | 0.04em | uppercase | GT Planar | Uppercase metadata and compact specimen captions. |
| button | 17px | 400 | 1 | 0 | — | GT Planar | Interactive angle, weight, and control labels. |
| nav | 14px | 300 | 1.14 | 0.046em | uppercase | GT Planar | Uppercase interface navigation and HUD labels. |
| eyebrow | 16px | 300 | 1.63 | 0.04em | uppercase | GT Planar | Short uppercase labels introducing sections or controls. |

OpenType features in use: `"kern", "lnum", "tnum"`.

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 5, 8, 10, 15, 20, 25, 29, 50, 58, 100 px.
- Section rhythm 150px · element gap 58px · card padding 5px · max content width 940px.

Use a full-bleed black canvas. The opening viewport is dominated by a central display area enclosed by narrow instrument panels on both sides and compact controls along the bottom. Build those modules from straight-edged, outlined rectangles rather than rounded cards. Keep content largely single-column and left-aligned in later editorial sections, with generous vertical pauses between them. The measured content max width is 940px; the overall composition can still let the hero interface span the viewport. Density is spacious in the page rhythm, even when the hero HUD itself is information-dense.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: the black canvas provides depth through contrast, while thin gray outlines separate rectangular modules. Measured shadows and gradients are absent. Use bright color and layered panel placement, not drop shadows, rounded cards, or soft surface effects, to distinguish controls from the background.

## Imagery

The identity is led by typography and interface graphics rather than conventional photography. Treat the large GT Planar specimen as the hero image, surrounded by green gauges, readouts, and fine technical diagrams. Tiny photographic or illustrative imagery may occur inside a HUD module, but keep it subordinate and tinted or integrated like a screen element. Preserve strong contrast and the feeling of a live, instrumented display.

## Components

### HUD hero frame

Frame the central oversized type specimen with thin gray-outlined side instruments and bottom readouts on the black canvas.

### Specimen display

Use white GT Planar lettering at dramatic scale, with angle variants such as -45° and +45° as visual content.

### Angle and weight controls

Set compact rectangular controls in electric violet (#6100ff), with dark violet (#29006c) backing for selected or recessed states.

### Signal badges

Render small bright-green (#00ff85) value blocks with black text, like the measured +15° and 0005 readouts.

### Outlined information panels

Use straight-edged gray (#606060) borders, uppercase white labels, and tightly arranged interface details.

### Exit control

Keep the red (#ff003d) exit element small and isolated at the top edge of the HUD.

### Measured component styles

- **Primary button** (“0°”): background #6100ff · text #000000 · radius 0px · padding 0px · 400 17px GT Planar
- **Secondary button**: background #29006c · text #6100ff · radius 0px · padding 0px · 400 17px GT Planar
- **Card** (“FEATURES FLAT SHAPES ALTS CURVED NUMBERS”): transparent background · text #ffffff · border 2px solid #606060 · radius 0px · padding 5px · 300 17px GT Planar · uppercase
- **Badge** (“0005”): background #00ff85 · text #000000 · border 1px solid #00ff85 · radius 0px · padding 5px · 300 14px GT Planar · uppercase
- **Navigation item** (“HUD”): transparent background · text #949494 · border 2px solid #949494 · radius 0px · padding 10px · 300 14px GT Planar · uppercase

## Do

- Keep the page canvas black and the main specimen white.
- Make the typeface itself the largest visual element.
- Use thin rectangular outlines to organize HUD modules.
- Reserve violet and green for control states and instrument signals.
- Set navigation and compact labels in uppercase.
- Preserve generous black space between editorial sections.

## Don't

- Do not introduce broad pale background sections.
- Do not replace the typography with generic product photography.
- Do not use rounded-card styling or decorative shadows.
- Do not spread accent colors across large, unrelated surfaces.
- Do not make small HUD readouts compete with the hero specimen.
- Do not fill the long vertical pauses with invented content.

## Agent prompt

Build a new page using GT Planar’s futuristic type-specimen style. Start with a near-black canvas (#000000) and make the typography the main visual asset: use oversized, lightweight white lettering (#ffffff), with uppercase headings and compact, tracked interface labels. Frame the hero specimen with narrow HUD-like modules, thin graphite borders (#606060), muted gray labels (#949494), and dense technical readouts. Use Electric Violet (#6100ff) for controls and selected states, Laser Green (#00ff85) for active indicators and badges, and Exit Red (#ff003d) only as a small signal. Keep panels square-edged and flat; do not add shadows, gradients, or rounded cards. After the hero, use restrained, left-aligned editorial sections separated by broad stretches of black space. Keep decorative screen details subordinate to clear page content.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-screen black stage with a central oversized specimen, narrow side HUD panels, and bottom control readouts. | interactive type specimen, angle and weight controls, scroll prompt | outlined HUD modules, green status indicators, violet controls, red exit signal |
| 2 | other | Single-column editorial section on black, with a left-aligned heading and explanatory copy. | scroll-led storytelling | large uppercase heading, light display typography |
| 3 | other | Black single-column section with an aligned heading and a small set of SVG-based visual details. | specimen exploration, scroll-led storytelling | uppercase heading, technical diagrams, sparse content |
| 4 | other | Sparse, left-aligned editorial block on the continuing black canvas. | brand narrative | large uppercase heading, minimal section chrome |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/gt-planar-com