---
version: alpha
name: Discord
description: A midnight arcade where the headline shouts and every corner melts.
colors:
  on-surface-variant: "#2E2E34"
  on-surface: "#FFFFFF"
  surface: "#000000"
  primary: "#5865F2"
  deep-indigo: "#1A2081"
  twilight-indigo: "#1F1D5D"
  lavender-wash: "#E4E6FF"
  card-slate: "#1A1A1E"
  charcoal: "#121214"
  not-quite-black: "#23272A"
  ink-slate: "#28282D"
  off-white: "#EFEFF1"
  mid-grey: "#96979E"
  online-green: "#5EB479"
  verified-green: "#23A559"
  hairline: "rgba(151, 151, 159, 0.04)"
  chip-fill: "rgba(151, 151, 159, 0.12)"
typography:
  caption:
    fontFamily: Abcgintodiscord
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  body-small:
    fontFamily: Abcgintodiscord
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0em
  body:
    fontFamily: Abcgintodiscord
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  label:
    fontFamily: Abcgintodiscord
    fontSize: 16px
    fontWeight: 400
    lineHeight: 19.2px
    letterSpacing: 0em
  body-large:
    fontFamily: Abcgintodiscord
    fontSize: 20px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: 0em
  tab:
    fontFamily: Abcgintodiscord
    fontSize: 24px
    fontWeight: 400
    lineHeight: 23.04px
    letterSpacing: -0.48px
  heading-small:
    fontFamily: Abcgintodiscord
    fontSize: 28px
    fontWeight: 400
    lineHeight: 32.2px
    letterSpacing: 0em
  heading:
    fontFamily: Abcgintodiscord
    fontSize: 48px
    fontWeight: 400
    lineHeight: 44.64px
    letterSpacing: -0.48px
  heading-large:
    fontFamily: Abcgintodiscord
    fontSize: 56px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -0.56px
  display:
    fontFamily: Abcgintodiscordnord
    fontSize: 72px
    fontWeight: 700
    lineHeight: 68.73px
    letterSpacing: 0em
  display-large:
    fontFamily: Abcgintodiscordnord
    fontSize: 96px
    fontWeight: 700
    lineHeight: 86.4px
    letterSpacing: -2.88px
  marquee:
    fontFamily: Abcgintodiscord
    fontSize: 82px
    fontWeight: 400
    lineHeight: 34px
    letterSpacing: -0.82px
rounded:
  tag-chip-game-cover-art: 4px
  arrow-control-podium-cover-image: 8px
  server-icon: 11px
  button-tab-nav-link-table: 12px
  nav-dropdown-log-in-pill-language-select: 16px
  server-card-and-its-splash-image: 48px
  pagination-button: 100px
  home-page-product-frame: 104px
  home-page-feature-block: 120px
  mobile-nav: 0rem
spacing:
  2xs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 48px
  2xl: 68px
  3xl: 80px
  section: 150px
  section-tall: 160px
---
# Discord — Style Reference

> A midnight arcade where the headline shouts and every corner melts.

**Theme:** dark

The captured pages run two systems beside each other. The marketing pages — the home page and the Family Center — sit on an indigo-into-black canvas and set their headlines in the ABC Ginto Nord display cut; the directory pages — server Discovery and Trending Games — run the product's own shell, gg sans doing all the work that is not a headline, and split their canvas again: Discovery on a pale lavender wash, Trending Games back on near-black. The split falls on the typeface — Nord means marketing, gg sans means product — with the nav bar and the giant wordmark at the foot common to both. One accent crosses the seam: blurple #5865F2, which fills the affirmative button, tints the "New" label, and on Discovery becomes the hero headline. Display is fat uppercase Nord at −2.88px tracking with a line-height below its own point size, so headlines set as slabs rather than lines. Everything else is soft — 12px on controls, 16px on nav and badges, 48px on server tiles, 104–120px on product frames — a radius vocabulary that rounds off as the object grows.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| White | `#FFFFFF` | `--color-white` | The dominant ink on every page and, rarely, a fill: the nav Log In pill, the hero `Download for Mac`. Keep the fill for the highest-contrast action on a dark band. |
| Black | `#000000` | `--color-black` | The canvas the theme is measured on, and the marketing footer's fill (`.footer_new`). Also the ink inside the white Log In pill — the fill role does not travel. |
| Blurple | `#5865F2` | `--color-blurple` | The accent, and the one saturated hue filling a button: Join, Join Server, Open Discord in your browser. It also paints Discovery's selected category row and its hero headline. Never body copy. |
| Deep Indigo | `#1A2081` | `--color-deep-indigo` | The home page body fill (`.body.is-dark-blue`) — the marketing canvas that reads blue under the star-field art, not the near-black the theme measures. |
| Twilight Indigo | `#1F1D5D` | `--color-twilight-indigo` | Gradient origin: into blurple on Discovery's belonging band, into `#0D0C26` and black on the Trending Games outro. A stop, not a flat surface. |
| Lavender Wash | `#E4E6FF` | `--color-lavender-wash` | Discovery's page canvas. Pair it with the slate inks below, never with white text. |
| Card Slate | `#1A1A1E` | `--color-card-slate` | The raised plane on Trending Games: podium cards and the rankings table. One luminance step above black is the whole elevation move. |
| Charcoal | `#121214` | `--color-charcoal` | The terminal stop of the podium's warm scrim. Depth by darkening. |
| Not-Quite-Black | `#23272A` | `--color-not-quite-black` | Ink on white surfaces — `Download for Mac`, `Get Your Community Ready` — and the directory footer's fill. |
| Ink Slate | `#28282D` | `--color-ink-slate` | Discovery's heading and server-name ink at 28px/700. The lavender canvas's black. |
| Muted Slate | `#2E2E34` | `--color-muted-slate` | Discovery's body ink: card descriptions, member counts, search-field text. The quiet second level on light. |
| Off-White | `#EFEFF1` | `--color-off-white` | Trending Games' primary UI ink — date range, Share label, category names. Dimmer than white on purpose; white is kept for headlines and buttons. |
| Mid Grey | `#96979E` | `--color-mid-grey` | Metadata ink on the dark product pages: "In pre-release", member counts, rank markers. |
| Online Green | `#5EB479` | `--color-online-green` | Delta text (`+31%`, `+2%`) and the presence dot. An editorial signal, not a button fill. |
| Verified Green | `#23A559` | `--color-verified-green` | The check inside Discovery's Verified badge. Its rarity is the signal. |
| Hairline | `rgba(151, 151, 159, 0.04)` | `--color-hairline` | `#97979F` at 4% — the structural line on Trending Games: table rows and tag-chip edges. Nearly invisible; the row reads as rhythm, not grid. |
| Chip Fill | `rgba(151, 151, 159, 0.12)` | `--color-chip-fill` | `#97979F` at 12% — the tag chip's fill and the active tab's border. A tint, never a solid grey. |

## Tokens — Typography

### Abcgintodiscordnord — the marketing display cut: uppercase, fat, tracked in hard, set on the home page and Family Center · `--font-display-marketing`
- **Substitute:** Poppins ExtraBold, Gilroy ExtraBold, Nunito Sans 800
- **Weights:** 700, 800
- **Sizes:** 96px, 82px, 62px, 56px, 48px
- **Line height:** 34px at 82px to 86.4px at 96px — tighter than the point size
- **Letter spacing:** −0.56px at 56px, −0.62px at 62px, −0.82px at 82px, −2.88px at 96px
- **Role:** Marketing headlines and the scrolling word band, caps or capitalised, at 48px and up.

### ABC Ginto Discord Nord — the same display voice inside the product shell: Discovery's section heads, Trending Games' titles · `--font-display-product`
- **Substitute:** Poppins ExtraBold, Gilroy ExtraBold, Nunito Sans 800
- **Weights:** 600, 700, 800
- **Sizes:** 80px, 72px, 56px, 50px, 28px
- **Line height:** 68.7273px at 72px, 76.8px at 80px, 48px at 50px, 32.2px at 28px
- **Letter spacing:** normal at 72px; positive (0.1px) at 80px; −0.56px at 28px; −0.01% at 50px
- **Role:** Product-page display and the podium rank numerals, set at 72px/800.

### ABC Ginto Nord — one hero, one job: Discovery's blurple headline · `--font-nord`
- **Substitute:** Poppins ExtraBold, Gilroy ExtraBold, Nunito Sans 800
- **Weights:** 700
- **Sizes:** 96px
- **Line height:** 85.44px
- **Letter spacing:** −2.88px
- **Role:** `DISCOVER YOUR NEXT FAVORITE SERVER` in `#5865F2` — the one place the accent becomes the type.

### Abcgintodiscord — the marketing text face: nav, body copy, footer, language selector · `--font-text-marketing`
- **Substitute:** Inter, Nunito Sans, ui-sans-serif
- **Weights:** 400, 500
- **Sizes:** 16px
- **Line height:** 24px at 400, 19.2px at 500, 20px for footer column heads
- **Letter spacing:** normal
- **Role:** Everything on the marketing pages that is not a headline, at one size — 16px — differentiated by weight and leading alone.

### ABC Ginto Discord — the product shell's small link face · `--font-text-product`
- **Substitute:** Inter, Nunito Sans, ui-sans-serif
- **Weights:** 400, 500
- **Sizes:** 14px
- **Line height:** 16px
- **Letter spacing:** −0.14px
- **Role:** The compact `Download` link in the directory header, dark on lavender and white on near-black.

### gg sans — the product's workhorse: cards, tables, tabs, badges, counts · `--font-ui`
- **Substitute:** Inter, Source Sans 3, ui-sans-serif
- **Weights:** 400, 500, 600, 700
- **Sizes:** 12px, 14px, 16px, 18px, 20px, 24px, 28px
- **Line height:** 16px at 12px, 18px at 14px, 20–24px at 16px, 26px at 20px, 32.2px at 28px
- **Letter spacing:** normal almost everywhere; −0.48px on the 24px tab label
- **Role:** All directory UI text — the family painting four weights, and a 700 at a non-display size (28px card titles).

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 16px | normal | `--text-xs` |
| Body Small | 14px | 18px | normal | `--text-sm` |
| Body | 16px | 24px | normal | `--text-base` |
| Label | 16px | 19.2px | normal | `--text-label` |
| Body Large | 20px | 26px | normal | `--text-lg` |
| Tab | 24px | 23.04px | −0.48px | `--text-tab` |
| Heading Small | 28px | 32.2px | normal | `--text-2xl` |
| Heading | 48px | 44.64px | −0.48px | `--text-5xl` |
| Heading Large | 56px | 48px | −0.56px | `--text-6xl` |
| Display | 72px | 68.73px | normal | `--text-7xl` |
| Display Large | 96px | 86.4px | −2.88px | `--text-8xl` |
| Marquee | 82px | 34px | −0.82px | `--text-marquee` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 4px | `--spacing-2xs` |
| xs | 8px | `--spacing-xs` |
| sm | 12px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 24px | `--spacing-lg` |
| xl | 48px | `--spacing-xl` |
| 2xl | 68px | `--spacing-2xl` |
| 3xl | 80px | `--spacing-3xl` |
| Section | 150px | `--spacing-section` |
| Section Tall | 160px | `--spacing-section-tall` |

### Border Radius
| Element | Value |
|---------|-------|
| Tag chip, game cover art | 4px |
| Arrow control, podium cover image | 8px |
| Server icon | 11px |
| Button, tab, nav link, table | 12px |
| Nav dropdown, Log In pill, language selector, badge | 16px |
| Server card and its splash image | 48px |
| Presence dot | 50% |
| Pagination button | 100px |
| Home page product frame | 104px |
| Home page feature block | 120px |
| Mobile nav | 0rem *(declared, not painted)* |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Block Glow | `rgba(69, 42, 124, 0.1) 0px 3px 68px 0px` | `--shadow-block` |

### Layout
- **Page max-width:** `not measured`
- **Section gap:** 150px on the home page's numbered sections, 128px on its hero, 141px and 250px on two more; 160px on the Trending Games outro and the Family Center's closing block; 48px between Discovery's server articles
- **Card padding:** 8px 8px on the server card, 16px 24px on the verified badge and category rows, 120px 40px on the belonging band
- **Element gap:** 4px inside controls, 8px link-to-icon, 12px in the game cell, 16px between stacked meta rows, 68px between the home page's columns

## Components

### Blurple Button
**Role:** The affirmative action — join a server, open the app.
`.button__9c3e9.overlayFocusRing__9c3e9.buttonBrand__9c3e9.buttonS` ("Join"): fill `#5865F2`, ink `#FFFFFF`, 14px/500/24px/normal, padding 0px 16px, radius 12px, no border, no shadow. The medium variant `.button__9c3e9.overlayFocusRing__9c3e9.buttonBrand__9c3e9.buttonM` measures two ways — 16px/500/20.8px on "Skip to main content", 14px/500/18.2px on "Join Server" — both with padding 0px 24px and radius 12px. Vertical padding is zero because the line-height sets the height: the button is a text box with a fill, so it never needs a shadow to sit up.

### White Pill
**Role:** The nav's sign-in and the marketing page's download call.
`.button-nav.login-button-js.new.w-button`: fill `#FFFFFF`, ink `#000000`, 16px/500/19.2px with +0.25px tracking, padding 10px 16px, radius 16px, no border, no shadow. The hero's version is a different row — `.button-ZGMevK.buttonWhite-1M-wED.buttonLarge-3z9xOS.refresh2025B`, fill `#FFFFFF`, ink `#23272A`, 20px/400, padding 15px 24px, radius 12px. The nav pill's 16px against the hero button's 12px is where the same idea wears two corners.

### Nav Bar
**Role:** A centred row of section links with the wordmark left and the sign-in right, riding over whatever the page canvas is.
Plain links use `.nav_link`: fill none, ink `#FFFFFF`, 16px/500/19.2px, padding 10px 16px, radius 12px — the radius is there for the hover state, since the resting link has no fill. Dropdown parents use `.nav_dd_trigger.w-dropdown-toggle` at the same 16px/500/19.2px, 10px 16px padding and 12px radius, with an 8px gap between label and chevron. `.nav_link.is_careers` repeats those measurements, so the last item keeps the rhythm.

### Language Selector
**Role:** The footer's locale control, and the clearest example of a ghost surface.
`.dropdown-language-btn.w-dropdown-toggle`: fill `rgba(255, 255, 255, 0.1)`, 16px/400/24px, padding 17.5px 24px, radius 16px, no border, no shadow. A 10% white wash is the entire treatment — no stroke, no elevation. On the indigo canvas it reads as a lit panel, and the same trick recurs on the Family Center's grey blocks.

### Category Tab
**Role:** The genre filter above the Trending Games board.
Resting tabs use `.tab__1e8a3.hideBelowMax__1e8a3`: fill none, ink `#FFFFFF`, 24px/500/23.04px with −0.48px tracking, padding 16px 24px, radius 12px. The selected tab is its own row, `.tab__1e8a3.tabActive__1e8a3`: fill `rgba(151, 151, 159, 0.16)`, ink `#FFFFFF`, 24px/500, padding 16px 24px, radius 12px, border 1px `rgba(151, 151, 159, 0.12)`. Selection is a 16% tint plus a 12% edge — four percentage points doing the work a colour change would do elsewhere.

### Tag Chip
**Role:** The genre and rank markers under each game in the rankings table.
`.tag__76b4d.tagLink__76b4d`: fill `rgba(151, 151, 159, 0.12)`, 12px/500/16px/normal, padding 2px 6px, radius 4px, border 1px `rgba(151, 151, 159, 0.04)`, no shadow. The tightest object here — 2px of vertical padding, the smallest radius in the vocabulary — and the deliberate opposite of the 48px server card. Small things get sharp corners; big things get round ones.

### Server Card
**Role:** One community in Discovery's grid: splash art, icon, name, description, counts.
`.searchListItem__40ff9`: fill none, padding 8px 8px, radius 48px — a frame around art, not a filled panel, so the lavender canvas shows through the 8px inset. `.listSplashImage_c9c3ef` repeats the 48px radius so image and frame share one curve; `.listIconImage_c9c3ef` drops to 11px. Titles come from `.link_ed9813.linkDefault_ed9813.listNameLink_c9c3ef` at gg sans 28px/700/32.2px in `#28282D`; descriptions run 20px/400/26px in `#2E2E34`.

### Verified Badge
**Role:** The trust marker pinned under a community's description.
`.flexRow_c9c3ef.listGuildBadgeContainer_c9c3ef`: fill `rgba(0, 0, 0, 0.6)`, padding 16px 24px, radius 16px, no border, no shadow. Its label is `.colorStandard__280dc.size16__530c5.listGuildBadgeText_c9c3ef` — gg sans 16px/500/19.2px in `#FFFFFF` — and the check inside `.flowerStarContainer_ce364f.verified__7ae01.background__7ae01` is `#23A559`. A 60% black scrim on a light page is a bold call: the badge is Discovery's darkest object, so it reads before the artwork does.

### Rankings Table Row
**Role:** Positions four and down on the Trending Games board.
`.row_d35ad5`: fill none, padding 0px, radius 0px, border 1px `rgba(151, 151, 159, 0.04)`, no shadow — the whole row is a hairline and nothing else. Cover art uses `.gameCoverImage_b7d376` at radius 4px; the rank numeral is `.rankHeading_b7d376`, gg sans 16px/500/20px in `#ABACB2`; the table carries the 12px radius. Row height follows content, and a 12px gap in `.gameCell_b7d376.columnGame__30db8` separates cover from title.

### Podium Card
**Role:** The top three games, sized by rank, above the table.
Fill is `#1A1A1E` on `.primaryCard__2c364` and `.secondaryCard__2c364`; the cover image carries the 8px radius from `.primaryCoverImage__2c364`; the card's own padding and radius are `not measured`. Legibility over artwork comes from two scrims: `.primaryOverlay__2c364` runs `rgba(0, 0, 0, 0.85)` to `rgba(0, 0, 0, 0.55)`, `.secondaryOverlay__2c364` runs `rgba(34, 25, 10, 0.6)` to `#121214` — a warm-to-cold fade, not flat black. The numeral is ABC Ginto Discord Nord 72px/800/68.7273px in `#FFFFFF` via `.display-lg_cf4812.rank__2c364`.

### Feature Block
**Role:** The home page's alternating product story — art on one side, headline and copy on the other.
`.home--block-group.is-reverse.home-new._2025` carries the capture's only measured shadow: `rgba(69, 42, 124, 0.1) 0px 3px 68px 0px`, a violet-tinted 68px blur that glows rather than drops. Block radius is 120px (`.home--block-group.block-1._2025`), the product frame inside it 104px (`.home--group-chat-img.video._2025.w-background-video`), internal gap 48px against the 68px column gap of `.home--2col_layout.is-hero.is_2025`. One block's surface is a four-stop white gradient — 20%, 12%, 4%, 8%.

### Footer
**Role:** Four link columns, a locale control, a social row, and the wordmark set as a full-bleed slab.
Two variants, one per system: `.footer_new` fills `#000000` at 20px 0px padding and radius 0px; `.footer__30a19.brand__30a19` fills `#23272A` at the same 20px 0px and 0px. Column heads differ too — `.p-footer.is_2026` sets Abcgintodiscord 16px/400/20px in `rgba(255, 255, 255, 0.7)`, `.tagline__30a19.size16__530c5` sets gg sans 16px/400/20px in `rgba(255, 255, 255, 0.5)`. Social icons sit on a 24px gap.

## Do's and Don'ts

### Do
- Set display in the Nord cut, uppercase or capitalised, at 48px and above, tracking scaled negatively to the size — −0.56px at 56px, −2.88px at 96px.
- Keep the line-height below the point size on display: 86.4px at 96px, 68.73px at 72px. Headlines are slabs.
- Hold 12px for controls and 16px for nav pills and badges, and let the radius grow with the object — 48px on server cards, 104px on product frames, 120px on feature blocks.
- Fill affirmative buttons with `#5865F2` and white ink; give secondary actions a tint instead — `rgba(255, 255, 255, 0.1)` ghost, `rgba(151, 151, 159, 0.12)` chip.
- Separate rows and chips with the 4% hairline `rgba(151, 151, 159, 0.04)` rather than a solid stroke.
- Run body copy at one size per system: 16px/24px in Abcgintodiscord on marketing, 12–20px in gg sans on product.
- Keep the greens where they are painted: `#5EB479` as delta text ("+2%") and as the fill of `.presenceCountDot__52566`, `#23A559` as the check ink in `.flowerStarContainer_ce364f`.

### Don't
- Don't add box-shadows. The capture paints exactly one, on the home page's feature blocks; every measured control, card, badge and table reports `shadow none`.
- Don't mix the two type systems on one page — Nord plus Abcgintodiscord is marketing, ABC Ginto Discord Nord plus gg sans is product.
- Don't put white body text on the lavender canvas; that ground takes `#2E2E34`, and its headings `#28282D`.
- Don't reach for the accent as paragraph ink. Where it becomes type it is a 96px hero, not a sentence.
- Don't give the tag chip more than 2px of vertical padding or more than a 4px radius — the density is the point.
- Don't soften the tracking on 96px display. −2.88px is the voice.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas (measured) | `#000000` | The ground the theme is read from; also the marketing footer's fill. |
| 0 | Canvas (home) | `#1A2081` | The home page body under its star-field art. |
| 0 | Canvas (Discovery) | `#E4E6FF` | The light directory ground. |
| 1 | Card | `#1A1A1E` | Podium cards and the rankings table, one step above black. |
| 1 | Footer (product) | `#23272A` | The directory footer, lifted just enough to end the page. |
| 2 | Ghost panel | `rgba(255, 255, 255, 0.1)` | Language selector and secondary buttons — a wash, not a box. |
| 2 | Scrim | `rgba(0, 0, 0, 0.6)` | The verified badge over Discovery's light canvas. |
| 3 | Accent surface | `#5865F2` | The selected category row and every primary button. |

## Elevation

Depth is luminance and tint, not shadow. The measured stack is `#000000` → `#1A1A1E` → `rgba(255, 255, 255, 0.1)` → `#5865F2`, with a 4% hairline separating anything that repeats. The capture's single shadow is decorative: `rgba(69, 42, 124, 0.1) 0px 3px 68px 0px` on the home page's feature blocks, a 68px violet bloom at a 3px offset — a glow, not a drop. Borders are percentages of grey or white: 1px at 4% on rows and chips, 1px at 12% on the active tab, 2px at 10% on the Family Center's FAQ dropdowns (`.ad_faq.top-none-line.w-dropdown`). Over photography, elevation becomes a scrim — `rgba(0, 0, 0, 0.85)` to `rgba(0, 0, 0, 0.55)` on the podium.

## Imagery

Three registers. First, 3D props with a soft plastic finish — hourglass, megaphone, shield, spotted egg, radish, a pair of eyeballs — floating free at the edges with no container. Second, flat vector characters with heavy outlines, posed in groups along the bottom of full-bleed sections. Third, product screenshots and game cover art, always inside a radius: 104px frames on the home page, 48px on Discovery's splashes, 8px and 4px on game covers. Photography appears as game art and streamer thumbnails inside those frames. Every dark page carries a faint star field and small cross sparkles — texture at low contrast, never competing with the type.

## Layout

Full-bleed dark bands with contained content. The nav is one centred row of text links, wordmark far left, sign-in pill far right, repeated on every captured page. The home page alternates two-column blocks at a 68px column gap, each a 120px-radius slab holding a 104px-radius product frame, spaced by 150px section padding with a 128px hero, one 141px section and one 250px section. A full-bleed marquee band interrupts the scroll: 82px/700 on a 34px line-height with −0.82px tracking, so the caps crop against the band's edges. Discovery drops the block layout for a three-up card grid on lavender, 48px between server articles and a 120px belonging band. Trending Games runs a 2:1 podium above a full-width table. Every page ends the same way — the wordmark enormous and bled off both edges, above nothing.

## Typography Voice

Two modes, cleanly divided. Display is Nord: fat, uppercase, tracked in hard, leading pulled under the point size — 96px on an 86.4px line, 72px on 68.73px, 62px on 74.4px where the headline needs two lines to breathe. That is what makes a headline read as shape before it reads as words. Text is the opposite: one size, generous leading, no tracking. Abcgintodiscord holds 16px/24px for every paragraph, nav item and footer link on the marketing pages, separating roles by weight (400 copy, 500 nav) and by opacity (`rgba(255, 255, 255, 0.7)` column heads) rather than size. gg sans carries the product's finer ladder — 12px/16px captions, 14px/18px metadata, 16px/20px labels, 28px/700 card titles — and is the family painting 600 alongside 700. The marquee is the extreme case: 82px type on a 34px line, which works only because the band clips it on purpose. The pull-quote's opening mark is Abcgintonord 800 at 80px/400 — a display face at text weight, purely as ornament.

## Agent Prompt Guide

## Quick Color Reference
- background: `#000000`
- text: `#FFFFFF`
- surface: `#1A1A1E`
- border: `rgba(151, 151, 159, 0.04)`
- accent: `#5865F2`
- primary action: `#5865F2`

## Example Component Prompts
1. **Blurple Button**: Anchor, background `#5865F2`, text `#FFFFFF`, gg sans 14px/500/24px, padding 0 16px, border-radius 12px, no border, no box-shadow, 4px icon-to-label gap.
2. **Tag Chip**: Inline anchor, background `rgba(151, 151, 159, 0.12)`, border 1px `rgba(151, 151, 159, 0.04)`, text 12px/500/16px, padding 2px 6px, border-radius 4px, no shadow.
3. **Server Card**: Frameless card on `#E4E6FF` — padding 8px, border-radius 48px, splash image 48px, icon 11px, title gg sans 28px/700/32.2px `#28282D`, description 20px/400/26px `#2E2E34`, verified badge `rgba(0, 0, 0, 0.6)` at 16px 24px padding, 16px radius, white 16px/500 label, `#23A559` check.
4. **Feature Block**: Two-column section on `#1A2081`, 68px column gap, block border-radius 120px, inner media frame 104px, box-shadow `rgba(69, 42, 124, 0.1) 0px 3px 68px 0px`, headline Abcgintodiscordnord 48px/800/44.64px/−0.48px `#FFFFFF`, body Abcgintodiscord 16px/24px, section padding 150px.
5. **Rankings Table Row**: Table row, no fill, 1px `rgba(151, 151, 159, 0.04)` border, 12px table radius, 4px cover art, 12px gap art-to-title, rank numeral gg sans 16px/500/20px `#ABACB2`, delta text `#5EB479`, trailing blurple Join at 14px/500, padding 0 16px, radius 12px.

## Similar Brands

- **Twitch** — a gaming-native dark canvas anchored by one saturated purple reserved for the affirmative action, with low-key greys carrying the metadata.
- **Figma** — the same appetite for oversized rounded display type over a playful, character-led illustration system, and the same trust in a single brand hue.
- **Duolingo** — a heavy rounded display face at extreme scale beside soft-shaded 3D characters, warmth carried by shape rather than ornament.
- **Riot Games** — full-bleed dark sections, uppercase display headlines, product art framed in generous radii.
- **Spotify** — a near-black canvas, a single high-chroma accent, a one-step luminance card ladder, and no shadow language.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-blurple: #5865F2;
  --color-deep-indigo: #1A2081;
  --color-twilight-indigo: #1F1D5D;
  --color-indigo-deep: #0D0C26;
  --color-lavender-wash: #E4E6FF;
  --color-card-slate: #1A1A1E;
  --color-charcoal: #121214;
  --color-not-quite-black: #23272A;
  --color-ink-slate: #28282D;
  --color-muted-slate: #2E2E34;
  --color-near-black-ink: #060A0B;
  --color-off-white: #EFEFF1;
  --color-titanium-white: #FBFBFB;
  --color-mid-grey: #96979E;
  --color-pale-grey: #ABACB2;
  --color-grey: #757575;
  --color-logo-grey: #333333;
  --color-online-green: #5EB479;
  --color-verified-green: #23A559;
  --color-periwinkle: #798DF9;
  --color-amber: #EA9800;
  --color-link-blue: #4D96EE;
  --color-link-classic: #0000EE;
  --color-magenta: #FF4CD2;
  --color-plum: #381F2C;
  --color-hairline: rgba(151, 151, 159, 0.04);
  --color-chip-fill: rgba(151, 151, 159, 0.12);
  --color-chip-fill-active: rgba(151, 151, 159, 0.16);
  --color-tint-grey-08: rgba(151, 151, 159, 0.08);
  --color-tint-grey-20: rgba(151, 151, 159, 0.2);
  --color-ghost-fill: rgba(255, 255, 255, 0.1);
  --color-ink-muted: rgba(255, 255, 255, 0.5);
  --color-ink-soft: rgba(255, 255, 255, 0.7);
  --color-tint-white-20: rgba(255, 255, 255, 0.2);
  --color-tint-white-12: rgba(255, 255, 255, 0.12);
  --color-tint-white-08: rgba(255, 255, 255, 0.08);
  --color-tint-white-04: rgba(255, 255, 255, 0.04);
  --color-scrim: rgba(0, 0, 0, 0.6);
  --color-scrim-strong: rgba(0, 0, 0, 0.85);
  --color-scrim-soft: rgba(0, 0, 0, 0.55);
  --color-scrim-warm: rgba(34, 25, 10, 0.6);
  --gradient-belonging: linear-gradient(#1F1D5D, #5865F2);
  --gradient-outro: linear-gradient(#1F1D5D, #0D0C26, #000000);
  --gradient-upsell: linear-gradient(#FF4CD2, #381F2C);
  --gradient-podium-scrim: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.55));
  --gradient-podium-warm: linear-gradient(rgba(34, 25, 10, 0.6), #121214);

  /* Typography — Families */
  --font-display-marketing: 'Abcgintodiscordnord', 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-display-product: 'ABC Ginto Discord Nord', 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-nord: 'ABC Ginto Nord', 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-nord-800: 'Abcgintonord 800', 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-text-marketing: 'Abcgintodiscord', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-text-product: 'ABC Ginto Discord', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-ginto-normal: 'ABC Ginto Normal', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'gg sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Times', ui-serif, serif;

  /* Typography — Scale */
  --text-xs: 12px;   --leading-xs: 16px;
  --text-sm: 14px;   --leading-sm: 18px;
  --text-base: 16px; --leading-base: 24px;
  --text-label: 16px; --leading-label: 19.2px;
  --text-lg: 20px;   --leading-lg: 26px;
  --text-tab: 24px;  --leading-tab: 23.04px;
  --text-2xl: 28px;  --leading-2xl: 32.2px;
  --text-5xl: 48px;  --leading-5xl: 44.64px;
  --text-6xl: 56px;  --leading-6xl: 48px;
  --text-7xl: 72px;  --leading-7xl: 68.73px;
  --text-8xl: 96px;  --leading-8xl: 86.4px;
  --text-marquee: 82px; --leading-marquee: 34px;
  --tracking-tab: -0.48px;
  --tracking-6xl: -0.56px;
  --tracking-marquee: -0.82px;
  --tracking-8xl: -2.88px;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 48px;
  --spacing-2xl: 68px;
  --spacing-3xl: 80px;
  --spacing-section: 150px;
  --spacing-section-tall: 160px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-icon: 11px;
  --radius-control: 12px;
  --radius-pill: 16px;
  --radius-card: 48px;
  --radius-round: 100px;
  --radius-frame: 104px;
  --radius-block: 120px;
  --radius-dot: 50%;

  /* Shadow */
  --shadow-block: rgba(69, 42, 124, 0.1) 0px 3px 68px 0px;
}
```

### Tailwind v4
```css
@theme {
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-blurple: #5865F2;
  --color-deep-indigo: #1A2081;
  --color-twilight-indigo: #1F1D5D;
  --color-indigo-deep: #0D0C26;
  --color-lavender-wash: #E4E6FF;
  --color-card-slate: #1A1A1E;
  --color-charcoal: #121214;
  --color-not-quite-black: #23272A;
  --color-ink-slate: #28282D;
  --color-muted-slate: #2E2E34;
  --color-near-black-ink: #060A0B;
  --color-off-white: #EFEFF1;
  --color-titanium-white: #FBFBFB;
  --color-mid-grey: #96979E;
  --color-pale-grey: #ABACB2;
  --color-grey: #757575;
  --color-logo-grey: #333333;
  --color-online-green: #5EB479;
  --color-verified-green: #23A559;
  --color-periwinkle: #798DF9;
  --color-amber: #EA9800;
  --color-link-blue: #4D96EE;
  --color-link-classic: #0000EE;
  --color-magenta: #FF4CD2;
  --color-plum: #381F2C;
  --color-hairline: rgba(151, 151, 159, 0.04);
  --color-chip-fill: rgba(151, 151, 159, 0.12);
  --color-chip-fill-active: rgba(151, 151, 159, 0.16);
  --color-tint-grey-08: rgba(151, 151, 159, 0.08);
  --color-tint-grey-20: rgba(151, 151, 159, 0.2);
  --color-ghost-fill: rgba(255, 255, 255, 0.1);
  --color-ink-muted: rgba(255, 255, 255, 0.5);
  --color-ink-soft: rgba(255, 255, 255, 0.7);
  --color-tint-white-20: rgba(255, 255, 255, 0.2);
  --color-tint-white-12: rgba(255, 255, 255, 0.12);
  --color-tint-white-08: rgba(255, 255, 255, 0.08);
  --color-tint-white-04: rgba(255, 255, 255, 0.04);
  --color-scrim: rgba(0, 0, 0, 0.6);
  --color-scrim-strong: rgba(0, 0, 0, 0.85);
  --color-scrim-soft: rgba(0, 0, 0, 0.55);
  --color-scrim-warm: rgba(34, 25, 10, 0.6);

  --font-display-marketing: 'Abcgintodiscordnord', 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-display-product: 'ABC Ginto Discord Nord', 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-nord: 'ABC Ginto Nord', 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-nord-800: 'Abcgintonord 800', 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-text-marketing: 'Abcgintodiscord', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-text-product: 'ABC Ginto Discord', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-ginto-normal: 'ABC Ginto Normal', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'gg sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Times', ui-serif, serif;

  --text-xs: 12px;   --text-xs--line-height: 16px;
  --text-sm: 14px;   --text-sm--line-height: 18px;
  --text-base: 16px; --text-base--line-height: 24px;
  --text-label: 16px; --text-label--line-height: 19.2px;
  --text-lg: 20px;   --text-lg--line-height: 26px;
  --text-tab: 24px;  --text-tab--line-height: 23.04px;
  --text-2xl: 28px;  --text-2xl--line-height: 32.2px;
  --text-5xl: 48px;  --text-5xl--line-height: 44.64px;
  --text-6xl: 56px;  --text-6xl--line-height: 48px;
  --text-7xl: 72px;  --text-7xl--line-height: 68.73px;
  --text-8xl: 96px;  --text-8xl--line-height: 86.4px;
  --text-marquee: 82px; --text-marquee--line-height: 34px;
  --tracking-tab: -0.48px;
  --tracking-6xl: -0.56px;
  --tracking-marquee: -0.82px;
  --tracking-8xl: -2.88px;

  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 48px;
  --spacing-2xl: 68px;
  --spacing-3xl: 80px;
  --spacing-section: 150px;
  --spacing-section-tall: 160px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-icon: 11px;
  --radius-control: 12px;
  --radius-pill: 16px;
  --radius-card: 48px;
  --radius-round: 100px;
  --radius-frame: 104px;
  --radius-block: 120px;
  --radius-dot: 50%;

  --shadow-block: rgba(69, 42, 124, 0.1) 0px 3px 68px 0px;
}
```