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

# GTE — Waitlist · Design System

> A luminous exchange emerging from the dark.

**Theme:** dark · **Industry:** crypto · **Source:** https://waitlist.gte.xyz/ · **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._

GTE pairs a near-black canvas with a glowing, particle-built globe to frame a compact waitlist form. Restrained white typography and vivid orange actions keep the sign-up flow clear against the dramatic backdrop.

## North star

Let one immersive, warm-glowing visual command the dark canvas while keeping the central sign-up action unmistakably simple.

## Overview

The visual strategy is built around contrast: a near-black #010304 canvas gives the glowing particle globe room to dominate, while a centered, dark #0e1011 card holds the actual task. White headings establish hierarchy; muted gray copy stays legible without competing with the artwork. Inter is used throughout, with compact bold headings and small, restrained form text. A single-column composition keeps attention on the waitlist rather than introducing secondary content or navigation. The orange gradient from #eb6200 to #ff7817 is reserved for the primary action, creating a bright focal point and warm echo of the globe. Inputs use a subtly lighter dark surface, while fine borders and soft shadows separate the form from the background without making it feel like a bright panel. Generous space around the centered content lets the large atmospheric image feel immersive.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Abyss Black | `#010304` | `--color-abyss-black` | brand | Full-page canvas behind the globe and centered waitlist form. |
| Soft Alloy | `#a6a7a8` | `--color-soft-alloy` | neutral | Primary muted text for supporting copy and form guidance. |
| Shadow Panel | `#0e1011` | `--color-shadow-panel` | surface | Waitlist card surface, visually lifted from the canvas. |
| Graphite Line | `#4e4f50` | `--color-graphite-line` | semantic | Subtle borders and separators against dark surfaces. |
| Ember Orange | `#eb6200` | `--color-ember-orange` | accent | Warm start of the primary button gradient; echoes the globe glow. |
| Signal Flame | `#ff7817` | `--color-signal-flame` | accent | Bright gradient end and hover accent for the primary action. |
| Pure Light | `#ffffff` | `--color-pure-light` | neutral | Waitlist heading, key text, and button label. |
| Dusk Gray | `#6a6e71` | `--color-dusk-gray` | neutral | Low-emphasis footer text and secondary details. |
| Input Slate | `#1c1e1f` | `--color-input-slate` | surface | Email input background, slightly brighter than the card. |

### Semantic aliases

`--color-canvas` → `#010304` (Abyss Black) · `--color-surface` → `#0e1011` (Shadow Panel) · `--color-surface-2` → `#1c1e1f` (Input Slate) · `--color-text` → `#ffffff` (Pure Light) · `--color-text-muted` → `#a6a7a8` (Soft Alloy) · `--color-text-subtle` → `#6a6e71` (Dusk Gray) · `--color-border` → `#4e4f50` (Graphite Line) · `--color-accent` → `#eb6200` (Ember Orange) · `--color-accent-2` → `#ff7817` (Signal Flame)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#010304` | 20.67:1 | AAA |
| `#ffffff` | `#0e1011` | 19.08:1 | AAA |
| `#ffffff` | `#1c1e1f` | 16.73:1 | AAA |
| `#a6a7a8` | `#010304` | 8.58:1 | AAA |
| `#a6a7a8` | `#0e1011` | 7.92:1 | AAA |
| `#a6a7a8` | `#1c1e1f` | 6.94:1 | AA |
| `#6a6e71` | `#010304` | 4.02:1 | AA-large |
| `#6a6e71` | `#0e1011` | 3.71:1 | AA-large |
| `#6a6e71` | `#1c1e1f` | 3.25:1 | AA-large |
| `#eb6200` | `#010304` | 6.18:1 | AA |

### Gradients

- `linear-gradient(65deg, rgb(235, 98, 0) 0%, rgb(255, 120, 23) 100%)`
- `linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 700, 500 | All page text, including heading, helper copy, input, and button. | Inter |

- **Inter:** Use measured 400, 500, and 700 weights; headings are compact and bold, with subtly tight tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.429, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 20px | 700 | 1.15 | -0.02em | — | Inter | Waitlist card heading, bold and compact. |
| body | 14px | 400 | 1.6 | 0.01em | — | Inter | Form instructions and consent copy. |
| caption | 12px | 400 | 1.5 | 0.01em | — | Inter | Small supporting and footer text. |
| button | 13px | 500 | 1 | 0.02em | — | Inter | Primary submit label, medium weight. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 6, 8, 12, 14, 16, 22, 24, 26 px.
- Section rhythm — · element gap 8px · card padding 24px · max content width 760px.

Use a single, centered composition with the waitlist card as the only functional focal point. Keep the content column restrained, guided by the measured 760px page maximum, while the globe artwork can occupy a broad area behind it. Align the logo, form, and card to the same center axis. The page is visually sparse rather than section-heavy: preserve ample dark negative space around the form, with compact internal form spacing and no competing content bands.

## Shape & elevation

- Radius: button `8px` · input `8px` · card `16px` · xs `4px` · sm `8px`
- Shadow `inset` (other): `rgba(255, 255, 255, 0.16) 0px 0px 24px 0px, rgba(255, 147, 69, 0.12) 0px 0px 24px 0px inset`
- Shadow `xl` (card): `rgba(1, 3, 4, 0.6) 0px 24px 70px 0px`
- Shadow `md` (button): `rgba(255, 120, 23, 0.4) 0px 2px 12px 0px`
- Motion: standard transition `0.2s ease-out` on interactive elements.

The waitlist card is separated from the background with a restrained dark shadow and subtle border, not a bright outline. The input sits on a slightly lighter surface within the card. The orange button receives the clearest elevation through its glow; keep other elements comparatively flat so the globe remains the dominant atmospheric layer.

## Imagery

A large, atmospheric globe formed from golden-orange particles fills the background behind the centered content. It reads as luminous 3D or motion artwork rather than a flat illustration; preserve its dark surroundings, bright scattered points, and warm bloom. Keep the GTE mark and form visibly layered in front, and avoid adding unrelated photography or decorative illustrations.

## Components

### Centered waitlist card

Dark #0e1011 panel with a fine border, 16px radius, measured 24px padding, and deep soft shadow.

### Email input

Single email field on #1c1e1f with white text, muted placeholder, and rounded 8px corners.

### Primary submit button

Full-width orange gradient from #eb6200 to #ff7817, white medium-weight label, rounded 8px corners, and orange glow.

### Consent checkbox

Small checkbox aligned beside muted, compact consent copy below the email field.

### Brand mark

White GTE logo centered above the card, visually distinct from the warm particle globe.

### Particle globe backdrop

Large dark 3D globe of glowing orange-gold particles, framed as atmospheric background rather than a content panel.

### Measured component styles

- **Primary button** (“Send code”): transparent background · text #ffffff · radius 8px · padding 0px 16px · 500 13px Inter · shadow rgba(255, 120, 23, 0.4) 0px 2px 12px 0px
- **Input**: background #1c1e1f · text #ffffff · border 1px solid · radius 8px · padding 0px 12px · 400 14px Inter
- **Card** (“Join the GTE Waitlist Enter your email t”): background #0e1011 · text #ffffff · border 1px solid #101213 · radius 16px · padding 25.6px 24px 24px 24px · 400 16px Inter · shadow rgba(1, 3, 4, 0.6) 0px 24px 70px 0px

## Do

- Keep the canvas near-black and visually uninterrupted.
- Center the logo and waitlist card over the globe.
- Reserve orange gradient for the primary action.
- Use white for key labels and muted gray for supporting copy.
- Maintain clear contrast between card, input, and canvas.
- Let the particle globe remain the main atmospheric image.

## Don't

- Do not add bright section bands or a light page background.
- Do not let supporting text compete with the heading or CTA.
- Do not introduce extra accent colors beyond the measured palette.
- Do not flatten the globe into a generic static icon.
- Do not add dense navigation or unrelated content blocks.
- Do not use heavy borders around every form element.

## Agent prompt

Build a new page in the GTE visual style using an Abyss Black canvas (#010304) and a large, atmospheric particle-globe image behind the main content. Center the logo and a compact Shadow Panel card (#0e1011) on one vertical axis, with generous negative space around them. Use Inter throughout: bold white headings, muted gray supporting text, and restrained small form labels. Give inputs the Input Slate surface (#1c1e1f), rounded corners, and clear placeholder contrast. Make the primary action a warm gradient from Ember Orange (#eb6200) to Signal Flame (#ff7817), with a soft glow. Use fine borders and deep, subtle shadows only to separate layers. Keep the page sparse, focused, and cinematic; avoid extra navigation, competing accents, or bright content bands.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered logo and compact sign-up card layered over a full-screen particle globe. | Email capture, Consent checkbox, Single primary action | Dark centered card, Glowing orange CTA, Particle globe backdrop |

## Source CSS custom properties (selected)

```css
--surface-default: rgb(1, 3, 4);
--surface-elevated-1: rgb(16, 18, 19);
--surface-elevated-2: rgb(24, 26, 27);
--surface-overlay: rgb(24, 26, 27);
--surface-input: rgba(255, 255, 255, .06);
--surface-action-primary: rgb(235, 98, 0);
--surface-action-primary-hover: rgb(255, 120, 23);
--surface-action-tertiary: rgba(255, 255, 255, .06);
--surface-action-tertiary-hover: rgba(255, 255, 255, .15);
--surface-selected: rgba(255, 120, 23, .08);
--text-high: rgb(255, 255, 255);
--text-mid: rgb(166, 167, 168);
--text-low: rgb(106, 110, 113);
--text-accent: rgb(255, 147, 69);
--text-action-primary: rgb(1, 3, 4);
--text-action-tertiary: rgb(166, 167, 168);
--text-action-tertiary-hover: rgb(211, 212, 212);
--accent: rgb(255, 120, 23);
--accent-light: rgb(255, 147, 69);
--accent-muted: rgba(255, 120, 23, .15);
--radius-small: 4px;
--radius-button: 8px;
--radius-regular: 8px;
--radius-complementary: 12px;
--radius-large: 16px;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 24px;
--space-xxl: 32px;
--space-huge: 48px;
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--font-display: "Ogg", Georgia, "Times New Roman", serif;
```

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