# GTE product design — web

Version: 0.2.1
Updated: 2026-10-24
Parent: https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/design.md (read it first; its hard rules bind here)
Preview sources: https://design.gte.xyz/components (Vercel Authentication required).
All preview and UI kit links below require Vercel Authentication.

Escape hatch: if `gte-web` or the monorepo is checked out, stop reading this and use the
`gte-design` skill plus the real components in `packages/typescript/gte-design-system/src/components/*`
and `apps/typescript/gte-web/src/features/trading/*`. This file is for building a GTE product
surface without the repo.

## Theme and surfaces

Product is dark. There is no toggle and no system preference.

| Layer | Token | Value |
|---|---|---|
| Canvas (body, app shell, panels' floor) | `--surface-elevated-1` | #101213 |
| Card / panel / order form | `--surface-elevated-2` | #181A1B |
| Popover, dropdown, tooltip | `--surface-overlay` | #181A1B |
| Input field | `--surface-input` | white at 6% |
| Separators, scrims only | `--surface-default` | #010304 (never as canvas) |

Cards step up from the canvas and are borderless with a subtle shadow. A surface nested inside a
card steps up again or is separated by a 1px `--stroke-default` hairline. Nothing steps down.

## Density and type

Body is `.p3` (11px baseline, 12px at 1512px and wider). Numbers are `.mono-3` (11 / 12px).
Every `.h*`, `.p*`, `.mono-*`, `.btn-*` class consumes the density variables, so a surface
responds to the tier automatically. Design at the baseline tier; most screens render it.

| Class | Baseline | 1512px+ | Use |
|---|---|---|---|
| `.p3` / `.mono-3` | 11px | 12px | Body, table cells, labels, numbers |
| `.p2` / `.mono-2` | 13 / 14px | 14 / 15px | Inputs (Inter), emphasised values |
| `.mono-1` | 18px | 20px | One-line big-number readouts (mark price, PnL). Never wrapping text. |
| `.mono-4` | 10px | 11px | Secondary numeric meta |
| `.btn-1` | 12px | 13px | Button labels, card headers |
| `.h6` … `.h3` | 16–25px | 18–28px | Section headings, modal titles |
| `.h2` / `.h1` | 32 / 42px | 36 / 48px | Hero and empty-state moments only |

All mono sizes share one 16px line-height. Inter for everything non-numeric: headings 700,
body 400, emphasis 600, buttons 500. Never all caps. Inputs stay Inter while typing.

## Layout

Viewport-locked: no page scroll on the trading screen; panels scroll internally. Header 48px,
sidebar 80px, footer 56px, banner 28px when present. Gutters between panels 4px, outer padding
4px. Spacing scale 4 / 8 / 12 / 16 / 24 / 32 / 48. Breakpoints 480 / 768 / 1024 / 1280 / 1512;
the terminal stacks below 768px.

## Component vocabulary

Classes come from the public stylesheet at https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/gte-brand.css. The linked preview source files require Vercel Authentication.

| Atom | Classes | Locked rules | Reference |
|---|---|---|---|
| Button | `.btn` + `primary` `secondary` `tertiary` `ghost` `positive` `negative`; `.sm` 28 · default 32 · (`.lg` 40 is marketing-only); `.iconly` | Primary/positive/negative: 65° gradient fill, text-high, glow. Ghost hover is text-only. Focus 1px ring offset 2px. Submit is a full-width medium primary. No icon on a primary. | https://design.gte.xyz/skill/preview/buttons.html |
| Input | `.inp` around `<input>`; `.err` | h32, radius 8, Inter. Border transparent → hover subtle → focus strong → error negative-muted. | https://design.gte.xyz/skill/preview/inputs.html |
| Segmented | (compose from `.btn tertiary` looks) | Filter data or switch modes only. Active neutral = tertiary look, text-high, no orange. Active long/short = tinted positive/negative. Selected item never changes on hover. | https://design.gte.xyz/skill/preview/segmented-buttons.html |
| Badge | `.badge` + `primary` `secondary` `positive` `negative`; `.sm` default; `.count` | Border-only. Sentence case. Inline only. Long = positive, Short = negative. Count is square 20×20 mono. | https://design.gte.xyz/skill/preview/badges.html |
| Tabs | `.tabbar` > `.htab[.active]`, then `.tabblock` | One tab type, slanted 23.43°. Heads a large panel; glued to its top; only the active tab is filled. | https://design.gte.xyz/skill/preview/tabs.html |
| Table | (see reference; header `--surface-elevated-2` h32, rows ~38px) | `th` p3 text-low, normal weight, left. Rows border-b stroke-default, hover action-tertiary. Numbers mono tabular slashed-zero. Row buttons tertiary. | https://design.gte.xyz/skill/preview/table.html |
| Card | `.card` (+ `.bordered`), `.hd` `.ct` `.ft` | elevated-2, radius 8, p16, borderless default. | https://design.gte.xyz/skill/preview/cards.html |
| Dropdown | trigger = input states; panel `--surface-overlay`, 6px radius, overlay shadow | Rows px-3 py-1; selected text-high + accent check. | https://design.gte.xyz/skill/preview/dropdown.html |
| Tooltip | bubble `--surface-overlay`, p3, 6px radius, max 270px | Trigger is a dotted underline on the term. | https://design.gte.xyz/skill/preview/tooltip.html |
| Slider | 4px `--surface-input` track; grey→white range (soft grey→black in light); 12px white thumb | Ring only on hover/focus; marks evenly spaced. Not orange. | https://design.gte.xyz/skill/preview/slider.html |
| Order book row | price mono coloured by side; size/total text-high | Depth bars left-aligned, never carry text. Bid green, ask red. | https://design.gte.xyz/skill/preview/orderbook.html |
| Toast | elevated-2 + shadow, 320px min, p3 | loading (no auto-dismiss) → success 5s / error 10s. Copy per voice rules. | https://design.gte.xyz/skill/preview/toasts.html |
| Price change | mono, triangle icon rotated for down | Sign decides colour; percentage suffix `%`. | https://design.gte.xyz/skill/preview/price-change.html |

## Composite skeletons

Copy the trade panel whole from https://design.gte.xyz/skill/preview/order-form.html. For the rest,
reproduce the structure, reusing the atoms above:

- Order form: Card → header = slanted order-type tabs (Market / Limit / TWAP) → side toggle (Long positive / Short negative, each flex-1 h32) → size field with leverage slider and Inter input → conditional limit price + time-in-force, TWAP duration → hairline → reduce-only → overview → full-width primary submit.
- Positions table: columns Asset · Size · Position value · Entry · Unrealized PnL · Liq. price · Margin · TP/SL · Close. Asset cell has a 2px side-coloured left edge with a tint fade, avatar 16px, mono symbol, leverage in side colour. PnL coloured by sign. Close = secondary button.
- Market ticker: tertiary small button for market identity (avatar + button-1 ticker) · mark price mono-1 text-high with flash on change · 24h change coloured with triangle · info items grid (label p3 text-low over mono-4 value) for index, volume, OI, funding + countdown.
- Header: 48px, wordmark ~56×20 left, primary nav Inter 500, search, agent button, wallet at right.
- Markets sidebar: 80px collapsed; search, filter tabs, rows with 24h change coloured.
- Input card, a question an assistant asks and the reader answers in place: `--surface-overlay` card, p16, 12px rhythm → the question as the header (no eyebrow above it), with a pager (ghost chevrons around a mono-4 text-mid `2 of 3`) for a batch → answer rows edge to edge, divided by `--stroke-default`, with rules above and below; rows have no surface at rest, hover and selected share `--surface-action-tertiary`, never the accent; min 44px, 36px from 1024px → footer: Skip (tertiary small) beside the primary (primary small), right-aligned; a question's own action or a submission error opposite them. Row kinds: a choice (radio or checkbox, the label in medium weight, its description after an em dash at the same size), a write-in field or amount (`0.00 SOL` until typed; the control stays on the first line while the error opens beneath), and compact cells side by side. A long list scrolls between the fixed question and actions, fading at an edge only while more rows lie beyond it.

Full terminal reference: https://design.gte.xyz/skill/ui_kits/web/index.html

## Motion

200ms ease-out everywhere. Numeric fields flash on change (`.alpha-highlight`: elevated-2 → transparent over 1.5s). Hover on filled buttons: brightness 120%. Press: no scale. Collapsibles 300ms. Nothing bounces.

## Surface rules

Each entry grows only from a real correction.

- Onboarding: second person allowed ("You"). One primary per step. Progress in mono. Empty states use `.h2` at most.
- Deposits: amounts mono with token suffix in text-low; chain and token icons 16px from `/assets/*`; the network fee is a number, never "small fee".
- Portfolio: PnL coloured by sign, never by position side; totals mono-1 single line.
- Settings: forms use `.inp` and toggles; no cards inside cards more than one level deep.

## Anti-patterns, product-specific

SaaS dashboard default · 15px body · rainbow badges · light theme inside the app shell · skewed
table · filled badges · orange dividers · two primaries on one surface · 2px or dashed borders ·
pill-shaped buttons · icons on the primary CTA · emoji or glyph icons.