# GTE design — root agent file

Version: 0.3.1
Updated: 2026-10-22
Canonical: https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/design.md
Human docs (Vercel Authentication required): https://design.gte.xyz

This is the only file you need to know about. It routes you to one specialised file
and gives you the stylesheet. Read the routing block, load one file, build.

## Routing — load exactly one of these next

| You are building | Load |
|---|---|
| Product UI: trading terminal, order form, order book, positions, portfolio, onboarding, deposits, settings, modals, empty/error states, anything inside the app shell | https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/product-design.md |
| Marketing, landing pages, social/OG cards, slides, decks, docs pages, diagrams, press, any non-product surface | https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/brand.md |
| Mobile | https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/mobile-design.md (placeholder until mobile patterns are documented) |

If the `gte-web` app or the monorepo is checked out in your session, stop here: use the
`gte-design` skill and the real components in `packages/typescript/gte-design-system/src/components/*`
instead of these files. These files exist for agents working outside the codebase.

Specialised files never route back up or sideways. If two of them disagree, this file wins.

## Who GTE is

GTE is a high-performance on-chain perpetuals trading platform: perps with spot-style speed
on an on-chain order book ("Turbo"), a web trading terminal at the core, plus onboarding,
portfolio, and an inline Economic Agent for research and execution assist. The interface is
a dark, dense terminal: near-black surfaces, hairline strokes, big mono numbers, a single
orange accent that is earned, not sprinkled. Users are professionals doing a job.

## The stylesheet

```html
<link rel="stylesheet" href="https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/gte-brand.css?v=2026-10-23">
```

Load it and use the vocabulary below. You do not need to read the CSS. Fonts are self-hosted and referenced by the stylesheet
(https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/fonts/JetBrainsMono-Regular.ttf, https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/fonts/JetBrainsMono-VariableFont_wght.ttf and https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/fonts/APKProtocol-Variable.ttf); never load JetBrains
Mono from Google Fonts or a CDN (it drops the slashed-zero feature and the numbers go wrong).
Inter loads from Google Fonts via the stylesheet's `@import`.

### Vocabulary

| Need | Use |
|---|---|
| Canvas | Product: `--surface-elevated-1` (#101213). Marketing: `--page` (rgb(11,13,14)). Never `--surface-default` (#010304, reserved for separators and scrims). |
| Card / panel | `--surface-elevated-2` (#181A1B), `--radius-regular` (8px), borderless. `.card` class. |
| Popover / dropdown | `--surface-overlay` |
| Input surface | `--surface-input` (white at 6%) |
| Text | `--text-high` / `--text-mid` / `--text-low`. Nothing else for body text. |
| Orange as text (links, accent numerals) | `--text-accent` (adapts on light). Orange fills: `--surface-action-primary`. |
| Long / bid / up | `--positive` (solid), `--positive-muted` (tint) |
| Short / ask / down | `--negative` (solid), `--negative-muted` (tint) |
| Strokes | `--stroke-default` (1px, white 6%), `--stroke-subtle` (15%), `--stroke-strong` (50%) |
| Spacing | `--space-xs` 4 · `--space-sm` 8 · `--space-md` 12 · `--space-lg` 16 · `--space-xl` 24 · `--space-xxl` 32 · `--space-huge` 48 |
| Radii | `--radius-small` 4 · `--radius-regular` 8 · `--radius-complementary` 12 · `--radius-large` 16 |
| Headings (product) | `.h1` … `.h6` — Inter 700. `.h1`/`.h2` only for hero and empty-state moments. |
| Body | `.p1` 14px · `.p2` 13px · `.p3` 11px (the product default) · `-bold` variants |
| Numbers | `.mono-1` 18px · `.mono-2` 14px · `.mono-3` 11px (default) · `.mono-4` 10px. Tabular + slashed zero built in. |
| Button label | `.btn-1` (Inter 500). Buttons: `.btn primary|secondary|tertiary|ghost|positive|negative`, `.sm` 28 / default 32 / `.lg` 40 |
| Badge | `.badge primary|secondary|positive|negative`, `.sm` default, `.count` for square counts |
| Input | `.inp` wrapper around an `<input>`; `.err` for error state |
| Tabs | `.tabbar` + `.htab.active` above a `.tabblock` |
| Brand headline (non-product only) | `.brand-h0` 140 · `.brand-h1` 88 · `.brand-h2` 76 · `.brand-h3` 64 · `.brand-h4` 52 · `.brand-h5` 40 · `.brand-h6` 32 · `.brand-h7` 24 · `.brand-h8` 20 — APK Protocol SemiBold (`--font-display`), 90% leading to H5, 105–110% below. |
| Brand body / label (non-product only) | `.brand-b1` 20 · `.brand-b2` 18 · `.brand-b3` 16 · `.brand-b4` 14 (Inter 400, 140%). `.brand-m1` 14 · `.brand-m2` 12 · `.brand-m3` 10 (JetBrains Mono 500, caps, tracked). |
| Brand two-tone and lede (non-product only) | `.brand-dim` on line two of a two-line headline (text-mid). `.brand-lede` under a heading: APK Protocol 400, 18px, +0.04em, key phrases in `<strong>`. |
| Brand palette (non-product only) | `--brand-ignition-1…4` oranges · `--brand-carbon-1…3` darks · `--brand-paper-1…3` warm lights · `--brand-alloy-1…2` · `--brand-concrete-1…2` greys · `--brand-gulf-1…5` blues · `--brand-signal-1…3` yellow/limes. Named: `--brand-orange`, `--brand-marketing-orange`, `--brand-dark-bg`, `--brand-dark-text`, `--brand-light-bg`, `--brand-light-text`. No red, no mint: trading semantics stay `--positive` / `--negative`. |
| Marketing canvas and art (non-product only) | `--page` rgb(11,13,14), `.brand-page` on the body. Accent (`--accent`) is action; Ember (`--brand-ember`, `--brand-ember-deep`, `--brand-ember-shadow`) is art only. ASCII: `--ascii-dot`, `--ascii-off`, `--ascii-dark` → `--ascii-hot`. Measure: `--frame` 1520px, `--gutter`, `--inset`. |
| Light band (marketing) | `.band-light` on the section: `--band-light` #e2e3e1, never white. Product tiles inside: `.dark-scope` + `--shadow-pane`. |
| Light theme (infographics, data viz) | `data-theme="light"` on the section (the product's #f0f0f0 ramp). `.dark-scope` re-asserts dark tokens for a product mockup inside it. |
| Motion | `--dur-press` 120 · `--dur-fast` 200 · `--dur-base` 280 · `--dur-slow` 440 · `--dur-story` 900 (marketing). `--ease-out` entering, `--ease-in-out` moving, `--stagger` 60ms. Transform and opacity only. |

The type scale is density-tiered: baseline sizes below 1512px, one step up at 1512px and
wider. The classes handle it. If you find yourself typing `15px` for body copy you are off-system.

## Hard rules — apply everywhere

<!-- hard-rules:start (generated from the gte-design skill SKILL.md — edit there) -->

- **The product is dark-surface only.** Trading terminal, portfolio, onboarding, settings, modals — all dark, no toggle. Light-mode tokens exist (opt-in via `data-theme="light"`) and are reserved for **non-product work only**: infographics, data viz, slides, decks, press kits. Marketing pages are dark on the page colour (`--page`), with at most one light band (`.band-light`, `#e2e3e1`, never white). If the surface lives inside the app shell, it stays dark. When in doubt: dark.
- Numbers are **always** JetBrains Mono with tabular-nums **and slashed zeros**. **Self-host the font from `fonts/`** (the `@font-face` in `colors_and_type.css`) — never load JetBrains Mono from Google Fonts/CDN, which strips the `zero` feature so slashed zeros silently fail. For a standalone mock, embed the bundled TTF as a base64 data-URI so the file stays self-contained *and* keeps slashed zeros. The one exception to "numbers are mono": **input fields stay Inter** while typing (mono resumes once the value is displayed).
- Green = long / bid / up, red = short / ask / down. Never swap these.
- No emoji, no unicode-as-icon, no gradient decoration on surfaces.
- Orange (`--accent`) is reserved for primary CTA, focus, brand moments — not decoration. The marketing art's orange is Ember (`--brand-ember`), never on UI. The primary's label is white on every theme.
- Text is one of three greys: `--text-high`, `--text-mid`, `--text-low`. No colored body text.
- Borders are 1 px, `rgba(255,255,255,0.06)`. Never 2 px, never dashed.
- **The product canvas is `--surface-elevated-1` (`#101213`)**, not `--surface-default` (`#010304`, reserved); marketing pages sit on the page colour `--page` (`rgb(11,13,14)`). Cards step **up** to `--surface-elevated-2` to stand out (borderless + subtle shadow; border opt-in); surfaces nested inside a card step further again.
- **Design dense.** Default body is `.p3` / `.mono-3` = **11 px** (baseline tier). The 12 px / 20 px sizes are the 1512 px+ tier. Reaching for 15 px body is off-system.
- **The only non-orthogonal line is the 23.43° slant**, and only where allowed (the active-tab/sidebar indicator in product, and the wordmark; marketing no longer slants anything — the frosted slab, slanted cards and slanted grid are retired). Never skew text, numbers, charts, tables, or product cards.

<!-- hard-rules:end -->

## Named anti-patterns

Recognise these and stop. Each one has been corrected in real work at least once.

| Name | What it looks like | Fix |
|---|---|---|
| SaaS dashboard default | White or light-grey cards with drop shadows, 16px body, rounded pills, a purple gradient somewhere | Dark canvas, elevated-2 cards, `.p3` body, 8px radii, no gradient |
| 15px body | Product copy set at 14–16px because it "reads better" | `.p3` / `.mono-3` (11px baseline). Density is the design. |
| Rainbow badges | Filled badges in five colours to mean five states | Border-only badges; direction is the only semantic colour (green long, red short) |
| Gradient hero | A gradient wash, photo or globe behind marketing copy, or a gradient on a card | The hero is generated ASCII art on its dot grid over the page colour. The only glows are the FAQ and closing ones, behind scan lines. |
| Skewed table | The 23.43° slant applied to data, cards, numbers or text | The slant lives on the active-tab indicator and in the wordmark. Never on data, and no longer in marketing. |
| CDN mono | JetBrains Mono from Google Fonts, plain zeros | Use the stylesheet; the fonts are self-hosted with `zero` on |
| Light theme inside the app shell | A light trade panel, settings page or modal | Product is dark. Light exists only for non-product surfaces. |
| Orange decoration | Orange dividers, icons, eyebrows, an orange headline word, Ember on a button | Accent is the primary CTA and focus, one per surface. Ember is art only. A two-line headline's second line is text-mid. |
| Emoji or glyph icons | Stars, plus signs, arrows, ticks or boxes typed as characters and used as icons or status | Stroke SVG icons (Lucide-aligned) or a word badge |
| Tinted body text | Grey-blue or coloured paragraph text | Text is one of the three greys |

## Logo and asset rules

- Wordmark: `/assets/logos/gte-logo-white.png` on dark, `gte-logo-black.png` on light. Default to the PNG; the SVG renders inconsistently in some hosts.
- Turbo mark: `/assets/logos/turbo-logo-white.svg` / `turbo-logo-black.svg`.
- Minimum wordmark height 16px; header use is about 56 × 20px. Clear space equal to the wordmark height on all sides.
- Never recolor, outline, rotate or add effects to a logo. The wordmark already carries the 23.43° tilt.
- Token icons: `/assets/tokens/{eth,usdc,usdt,placeholder}.svg`. Chain icons: `/assets/chains/{ethereum,base,arbitrum,optimism,polygon,hyperliquid}.svg`.

## Voice

Terse, operator-grade, quant-adjacent. Sentence case everywhere, including buttons and
badges; all-caps only for real acronyms (GTC, IOC, PnL, OI). No emoji. Numbers do the
talking: "Filled at $43,218.50" beats "Your order filled successfully." Active, present tense:
"Placing order" → "Order placed" → "Order failed — insufficient margin". Errors are specific:
"Insufficient USDC for margin (need 24.50, have 12.30)", never "Something went wrong."
No hedge words: commit to a number or show a `~`.

## Maintenance

Every rule here cites a correction that earned it; the citations live in the hub's CHANGELOG,
not in this file. A rule must be checkable by looking at the output. Version and Updated are
bumped on every change. Reviewed monthly: product-only rules get demoted to
product-design.md, global rules from the specialised files get promoted here.