# GTE brand — marketing, growth, diagrams Version: 0.3.0 Updated: 2026-10-16 Parent: https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/design.md (read it first; its hard rules bind here) Owners: Arnie (brand owner and approver) with Luc (GTM). Preview sources and photography linked below require Vercel Authentication. This file covers every non-product surface: landing pages and sections, social and OG cards, newsletters, slides and decks, press kits, posters, docs pages, technical diagrams. The 2026 landing (gte.xyz) is the reference: where an older rule disagreed with it, the landing won. The surfaces keep the whole product grammar otherwise. ## Format coverage Build on a vetted template when one exists. When it does not, build to the rules here, label the output a draft, and flag the format-specific choices for review. Never present an unvetted template as canonical. | Format | Status | Where | |---|---|---| | Landing page or section | Built | [landing-2026-hero](https://design.gte.xyz/skill/preview/landing-2026-hero.html) · [landing-2026-sections](https://design.gte.xyz/skill/preview/landing-2026-sections.html) · [landing-2026-closing](https://design.gte.xyz/skill/preview/landing-2026-closing.html) · the patterns on one sheet: [landing-2026-system](https://design.gte.xyz/skill/preview/landing-2026-system.html) | | Social post / OG card | Built (OG) | [social-og-2026](https://design.gte.xyz/skill/preview/social-og-2026.html), 1200×630. Other sizes: build to these rules at the platform's size and label the output a draft. | | Newsletter / email | Draft | [email-2026](https://design.gte.xyz/skill/preview/email-2026.html) and the Email section below. Label output a draft until Arnie locks it. | | Press kit / poster | Rules only | Type-led: APK Protocol at the top of the scale, the landing's ASCII art, mono captions. No fixed template. | | Slide / deck | Reserved | No template yet. 16:9 canvas; heading, colour and button rules apply. Label as draft. | The 2025 photo-led templates (landing-hero, landing-hero-light, landing-feature, landing-full) are superseded: lifestyle hero, frosted slab, slanted cards and "Launch app". Do not copy them. ## Theme: dark, with one light band - The canvas is the page colour, `--page` (`rgb(11,13,14)`, gte-web's trade page base). Never `--surface-default` and never pure black. Panels sit on `--surface-elevated-1` / `-2`, separated by tone and 1px hairlines. Use `.brand-page` on the body. - The page is dark end to end, which suits Edge, agentic and data messaging, except one light band for the softer trading message ("One account for every market"). Put `.band-light` on that section: the page tokens flipped onto `--band-light` (`#e2e3e1`), never white or paper; text `#0b0d0e` / `#5d6164` / `#8c9093`, hairlines at 10%, panels stepping darker. Cut it hard against the dark sections on either side. - Product stays dark on the band: wrap each tile in `.dark-scope`, 16px corners, `box-shadow: var(--shadow-pane)` (a black ring and three soft drops). - `data-theme="light"` is the product's opt-in light mode (`#f0f0f0`) for infographics and data viz. It is not the band. ## Layout One measure for the whole page: `--frame` 1520px, `--gutter` `clamp(20px, 4vw, 56px)`, a 64px nav. Full-bleed panels inset their content back onto the measure with `padding-inline: var(--inset)`. Content-led pages (market pages, docs) use a 1200px measure of raised panels 16px apart. One container per surface: rows split by hairlines, never boxed; no cards inside cards, no coloured left-edge bars. A wrap inside a flex parent needs `width: 100%`. ## The type system Headlines are APK Protocol SemiBold (`--font-display`, weight 600), sentence case, on the brand scale. The art is the hero, so the headline captions it rather than shouting: | Class | Size | Use on the landing | |---|---|---| | `.brand-h0` | 140 | Poster, single word | | `.brand-h1` / `.brand-h2` | 88 / 76 | The closing line at most | | `.brand-h3` | 64 | The hero headline | | `.brand-h4` | 52 | Section openers | | `.brand-h5` / `.brand-h6` | 40 / 32 | Sub-section and list headings | | `.brand-h7` / `.brand-h8` | 24 / 20 | Card and tile names | On landing work set display headlines at leading 1.0 (1.1 at H7), tracked `-0.035em` at H3 and above and `-0.03em` below; the classes' own 90% / `-0.02em` are the type board's. A two-line heading is two-tone: line one text-high, line two text-mid with `.brand-dim`. Never text-low, never orange, never a second face. A one-line heading is one colour. The lede under a heading is `.brand-lede`: APK Protocol 400, 18px / 1.5, tracked `+0.04em`, text-mid, about 25em wide. Wrap the phrases that carry it in `` (text-high). Body copy is Inter Regular on the brand body scale (`.brand-b1` 20 to `.brand-b4` 14) or 15px / 1.5 text-mid in cards. Every number is JetBrains Mono with tabular figures and a slashed zero. No eyebrows: no caps label over a heading and no pill over a block. The caps mono steps (`.brand-m1` 14, `.brand-m2` 12, `.brand-m3` 10) are for captions in posters and decks where a label earns its place, never product chrome. Nav and footer links are Inter, never mono caps. ```html

Map the market
directly to your position.

One account for stocks, crypto and commodities.

``` ## Colour: Accent for action, Ember for art - Accent, `--accent` / `--brand-ignition-1` (`rgb(255,120,23)`), is the only action colour: the primary button, focus, one highlight per surface. - Ember, `--brand-ember` (`#ff5e11`, `--brand-ignition-2`), with `--brand-ember-deep` and `--brand-ember-shadow`, is the art's orange: the ASCII film and fields, illustration, the Edge E mark, the active number in a numbered list. Never a button, link, focus ring or highlight, and never on the same element as Accent. - Text is the three greys. Direction is `--positive` / `--negative` with a sign or triangle; a move is never orange. In a graphic, orange marks GTE itself, not a price. The rest of the Brand 2026 palette is layered beside the product tokens for illustration and callouts: Carbon (`--brand-carbon-1…3`) and Paper (`--brand-paper-1…3`) grounds, Alloy and Concrete greys, Gulf (`--brand-gulf-1…5`) blues, Signal (`--brand-signal-1…3`) yellow and limes. It has no red and no mint on purpose: Signal never means "up". Paper is not a page ground on the landing; the light band is `--band-light`. ## Art: ASCII, not photography - The hero is an ASCII film: footage rendered through the ramp `" .:-~+ox*%#@"` on an 8px cell, rows 1.3 cells tall, JetBrains Mono. A full stop in `--ascii-dot` fills every blank cell, and `GTE` and `EDGE` run through the field. - Colour comes from luminance, `--ascii-dark` to `--ascii-hot`, with Ember blended in up to 80% at the mid-tones; darks and white-hot cores stay neutral. The art thins away from its subject on an ellipse so copy never sits on busy glyphs. - Behind feature cards the field is switched off to `--ascii-off`, and each card's object lights up in greys. - Generate it from a film, a render or a shape function; never type it by hand. Ship a still for no-JS and reduced motion. - Below the hero, prove the product with real gte-web renders, one device per viewport. The photo library is not part of the 2026 landing; ask Arnie before using it anywhere. - A company or asset named in copy carries its official logo, never redrawn. ## Buttons and links There is one primary label, "Open GTE ↗", in the nav, the hero and the close; the arrow is part of the label and there is no other icon on a primary. The label is white on every ground, including the light band. The hero bar pairs a tertiary "Explore EDGE", led by the Edge E mark on a page-colour backing, with the primary: both `.btn.lg` 40px, 12px apart. The close is the heading over a primary lg. The nav button is 32px: tertiary while the hero is on screen, primary after. Large (40px) exists only in the hero and the close. Sections and tiles have no buttons; footer links are Inter 16px text-mid with an arrow, text-high on hover. ## Glows and the 23.43° slant There are two glows and no others: the FAQ opens on orange running through Ember to the page, and the close rises on Accent silk with Ember folds. Both sit behind scan lines, 3px of page colour every 6px at 85%. Nothing else gets a glow, gradient wash or glass. The landing uses no slant. The frosted slab, slanted feature cards and slanted stat dividers retire with the 2025 templates, as did the slanted grid background. The slant stays in the wordmark and the product's active tab. ## Bands and footer The ticker closes the page between hairlines, just above the footer: multi-asset, mono 14px, green and red moves with a filled triangle, a 64-second linear marquee that pauses on hover, live prices only. The 2026 landing has no stats band; if one returns it never touches the ticker. The footer is two panels: the ASCII portrait with the motto "Trade fast / Win faster" on the page colour, and the links, the wordmark and "© 2026 Liquid Labs Global Inc." on `--surface-elevated-1`. ## Motion Durations `--dur-press` 120ms, `--dur-fast` 200ms, `--dur-base` 280ms, `--dur-slow` 440ms, `--dur-story` 900ms (scroll reveals, marketing only). `--ease-out` for anything entering or leaving, `--ease-in-out` for anything moving on screen, `--ease-linear` for ambient loops, `--stagger` 60ms between siblings. Only transform and opacity animate; colour may transition at `--dur-fast`. Headings write in word by word, each word fading in over 220ms, 45ms after the one before. Every loop pauses off-screen; reduced motion gets stills and final frames. ## Email Email is not a web page: tables, inline styles, one 600px column, solid hex colours (`#0b0d0e` page, `#101213` raised, `#1a1c1d` hairlines, text `#ffffff` / `#a6a7a8` / `#6a6e71`) and `color-scheme: dark`. Headlines Inter 600 with system fallbacks, two-tone like the landing; APK Protocol and Ember live only inside images. One "Open GTE ↗" button, Accent fill, white 15px / 500 label, 44px, with a VML fallback. Never a typed price or headline that reads as live. ## Logo Default to the PNG: `/assets/logos/gte-logo-white.png` on dark, `gte-logo-black.png` on the light band. 24px tall in the nav, 32px in the footer. The Edge E mark belongs to Edge (its messages, the Explore EDGE button) and is never GTE's logo. Turbo mark: `/assets/logos/turbo-logo-{white,black}.svg`. Never recolour, outline or rotate. ## Copy Sentence case everywhere; caps only for acronyms. "Edge" in running copy, "EDGE" only in "Explore EDGE" and the section label. The landing's lines: "What's your edge?" (hero), "Find your edge" (close), "Trade fast / Win faster" (motto). Edge "acts only within the limits you set". No labels that restate the obvious. Never present GTE as an order-book venue. ## Asset index Logos, token icons and chain icons below are public. Photography is available through the authenticated hub. | Asset | URL | Use | |---|---|---| | Wordmark white PNG | https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/assets/logos/gte-logo-white.png | Dark surfaces (default) | | Wordmark black PNG | https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/assets/logos/gte-logo-black.png | The light band | | Wordmark SVG | https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/assets/logos/gte-logo-white.svg, https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/assets/logos/gte-logo-black.svg | Only where PNG cannot be used | | Turbo mark | https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/assets/logos/turbo-logo-white.svg, https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/assets/logos/turbo-logo-black.svg | Chain mark | | Token icons | https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/assets/tokens/eth.svg, https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/assets/tokens/usdc.svg, https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/assets/tokens/usdt.svg, https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/assets/tokens/placeholder.svg | 16px in UI | | Chain icons | https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/assets/chains/ethereum.svg, https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/assets/chains/base.svg, https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/assets/chains/arbitrum.svg, https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/assets/chains/optimism.svg, https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/assets/chains/polygon.svg, https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/assets/chains/hyperliquid.svg | 16px in UI | | Brand photography | https://design.gte.xyz/brand/assets#photography (Vercel Authentication required) | Not on the landing; ask Arnie first | ## Diagrams Technical diagrams (architecture, perps flow) are single SVG figures in a bounded canvas, one idea, read left to right or top to bottom. Flat fills only: nodes on `--surface-elevated-2`, no borders, no gradients, no shadows, 8px radius, 22px horizontal and 24px vertical padding, height derived from content, min width 200px. Title Inter 600 15px text-high; subtitle Inter 400 12px text-mid. One special entry node may be tinted `rgba(255,120,23,0.08)` with orange text. Edges are orthogonal only, 1.25px `--white-15`, rounded 10px corners, 7×7 filled arrowheads, a 22px stub before the first bend, one one-line label per edge on a background-coloured pill. Optional `01`..`0N` numbering in mono 11px orange. Declare nodes and edges; let a layout pass compute every coordinate. Fewer than three nodes: write a sentence instead. Full grammar: https://design.gte.xyz/skill/references/diagrams.md (Vercel Authentication required) ## Anti-patterns, brand-specific Photo-, globe- or gradient-led hero · white or paper light band · `--surface-default` or pure black canvas · orange word in a headline · second line in text-low · eyebrow or pill over a heading · Ember on a button, link or focus ring · hand-typed ASCII, or ASCII with no dot grid · a third glow, a wash or glass · any 23.43° slab, slanted card or slanted divider · a primary label other than "Open GTE ↗" · a dark label on the primary · button in a section or tile · mono caps in nav or footer links · Signal lime used to mean "up" · stats band touching the ticker · SVG logo where PNG was expected · social/slide/newsletter output presented as canonical.