---
version: alpha
name: Structure
description: Chromatic glass prisms throwing violet-to-ice light across a near-black ledger.
colors:
  on-surface-variant: "rgba(255, 255, 255, 0.3)"
  surface: "#101010"
  on-surface: "#FFFFFF"
  primary: "#AA6EE5"
  card-plum-black: "#19181F"
  tile-plum: "#1B1A21"
  band-charcoal: "#171717"
  mist-ink: "#DFE4E8"
  lavender: "#DCBFF9"
  ice: "#CAFFFF"
  cream: "#FFFAC9"
  peach: "#FFD3C1"
  cold-gradient: "#620001"
  aurora-hairline: "#AA6EE5"
  warm-hairline: "#FFFAC9"
  title-gradient: "#CAFFFF"
typography:
  display:
    fontFamily: Lexend
    fontSize: 96px
    fontWeight: 400
    lineHeight: 118.08px
    letterSpacing: -1.92px
  product-name:
    fontFamily: Lexend
    fontSize: 48px
    fontWeight: 400
    lineHeight: 69.312px
    letterSpacing: 0em
  section-title:
    fontFamily: Lexend
    fontSize: 40px
    fontWeight: 400
    lineHeight: 43px
    letterSpacing: 0em
  tag:
    fontFamily: Lexend
    fontSize: 26px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: 0em
  heading-statement:
    fontFamily: Lexend
    fontSize: 24px
    fontWeight: 400
    lineHeight: 34.656px
    letterSpacing: 0em
  node-title:
    fontFamily: Lexend
    fontSize: 22px
    fontWeight: 400
    lineHeight: 31.152px
    letterSpacing: 0em
  subheading:
    fontFamily: Lexend
    fontSize: 20px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: 0em
  body-label:
    fontFamily: Lexend
    fontSize: 18px
    fontWeight: 400
    lineHeight: 25.992px
    letterSpacing: 0em
  small-body:
    fontFamily: Lexend
    fontSize: 16px
    fontWeight: 400
    lineHeight: 23px
    letterSpacing: 0em
rounded:
  button: 8px
  exchange-tile: 20px
  cards-and-shells: 24px
  chart-frame: 30px
  statement-panel-community-buttons: 42px
  community-band: 0px
spacing:
  shell-inset: 1px
  pill-button-y: 15px
  node-inset-x-grid-gap: 32px
  product-card-x: 40px
  statement-panel-y: 50px
  info-block-y: 65px
  statement-panel-x: 70px
  section-y: 80px
  product-card-y: 100px
  section-y-large: 120px
  hero-y: 125px
  render-clearance-x: 165px
---
# Structure — Style Reference
> Chromatic glass prisms throwing violet-to-ice light across a near-black ledger.

**Theme:** dark

Structure is a near-black page lit by its own imagery: chromatic glass prisms, cylinders and gems hang between sections, and the violet-to-ice spectrum they throw comes back as gradient type and as hairline outlines around the dark cards. The signature move is the noise-box, a plum-black panel inset a single pixel inside a gradient-filled shell, so a card is edged by a thread of light instead of a stroke. Lexend sets the type, from a bold, slightly tightened display title down to reading copy set loose and airy in a cool mist-white. Colour rarely fills a surface; solids are kept for inks and a short ladder of dark card fills, while the chroma lives in gradients. The page is one contained column that breathes in long, even section bands, and it varies the beat with zig-zag feature rows, bracket-linked node diagrams and cards that step left and right.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas Black | `#101010` | `--color-canvas` | The page ground and the inner fill of the icon rings, `.stf-token__chart-div__inner` and `.stf-token__info__inner`; it also inks the "Go to app" label on `.button-base.cold-gradient`. |
| Card Plum-Black | `#19181F` | `--color-card` | The `.noise-box__inner` fill of the node, product and token-economics cards: a single step off the canvas with a violet cast, so cards read as tinted glass rather than grey slabs. |
| Tile Plum | `#1B1A21` | `--color-tile` | `.stf-token__dex-image__inner`, the exchange logo tiles; a hair lighter than the card fill. |
| Band Charcoal | `#171717` | `--color-band` | `.join-community__inner` band and the "join our Telegram" button inner; measured, but neither renders in the tiles. |
| Mist Ink | `#DFE4E8` | `--color-ink` | Default text: body, nav links, stat lines and the display title's fallback ink. Cool off-white that keeps long paragraphs from glaring on `#101010`. |
| White | `#FFFFFF` | `--color-ink-bright` | Card-level titles such as "Unique Payoffs" `.h3` and "Basic Financial Instrument" `.understanding-box__title`; brighter than body so small bold heads lift. |
| Ghost White | `rgba(255, 255, 255, 0.3)` | `--color-ink-ghost` | Inactive roadmap slides on `.roadmap-box`; the dimming is opacity on white, not a solid grey. |
| Lavender | `#DCBFF9` | `--color-lavender` | Section titles on `.no-touch__title.h2` ("WHY Structure Finance"); the inventory's only chromatic text ink, so it marks chapters and nothing smaller. |
| Violet | `#AA6EE5` | `--color-violet` | A gradient stop, never a fill: the inventory counts it as gradient-stop only, on "STRUCTURE" `.hero__title` and the `.noise-box` shells. |
| Ice | `#CAFFFF` | `--color-ice` | Violet's partner at the cool end of the same gradients, with the same gradient-stop-only record on `.hero__title` and the `.noise-box` shells. |
| Cream | `#FFFAC9` | `--color-cream` | Warm gradient start on `.no-touch__img-border`, `.stf-token__chart-div` and `.stf-token__info`; the warm frame family for rings and data. |
| Peach | `#FFD3C1` | `--color-peach` | Warm gradient end on the same carriers. |
| Cold Gradient | `#620001 → #AA6EE5 → #B0DCFF → #CAFFFF` | `--gradient-cold` | "STRUCTURE" `.hero__title` and "Go to app" `.button-base.cold-gradient`. In the tiles both read violet to ice; the oxblood first stop does not show, so it is not a brand red. |
| Aurora Hairline | `#AA6EE5 → #CAFFFF` | `--gradient-aurora` | The background of the 1px `.noise-box` shells (node, product, token-economics cards): the outline colour of the system. |
| Warm Hairline | `#FFFAC9 → #FFD3C1` | `--gradient-warm` | The 1px shell of icon rings, the chart frame and the statement panel. |
| Title Gradient | `#CAFFFF → #AA6EE5` | `--gradient-title` | Product names on "DNT" `.product-box__title2`; ice back to violet, the cold gradient reversed. |

## Tokens — Typography

### Lexend — the page's measured family for titles, labels and paragraphs: 700 for headings, 400 for reading, 500 and 600 for links, buttons and product names, 300 for figures; tracking tightens on "STRUCTURE" `.hero__title` and on no other census row · `--font-lexend`
- **Substitute:** Outfit, Plus Jakarta Sans, system-ui
- **Weights:** 300, 400, 500, 600, 700
- **Sizes:** 16px, 18px, 20px, 22px, 24px, 26px, 40px, 48px, 96px
- **Line height:** 1.0 (26px tag) to 1.444 (body); 1.23 display; 1.075 section title
- **Letter spacing:** -1.92px (−0.02em) on `.hero__title`; normal on every other census row
- **Role:** the page's measured family for titles, labels and paragraphs: 700 for headings, 400 for reading, 500 and 600 for links, buttons and product names, 300 for figures; tracking tightens on "STRUCTURE" `.hero__title` and on no other census row.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display ("STRUCTURE", 700) | 96px | 118.08px (1.23) | -1.92px | `--text-display` |
| Product name ("DNT", 600) | 48px | 69.312px (1.444) | normal | `--text-product` |
| Section title ("WHY Structure Finance", 700) | 40px | 43px (1.075) | normal | `--text-section` |
| Tag ("COMING SOON", 600) | 26px | 26px (1.0) | normal | `--text-tag` |
| Heading / statement ("Q4 2021", 700) | 24px | 34.656px (1.444) | normal | `--text-heading` |
| Node title ("Basic Financial Instrument", 500) | 22px | 31.152px (1.416) | normal | `--text-node` |
| Subheading ("User Incentives", 700) | 20px | 26px (1.3) | normal | `--text-subheading` |
| Body / label (400; 500 nav; 600 button) | 18px | 25.992px (1.444) | normal | `--text-body` |
| Small body ("Earn 2X during periods…", 400) | 16px | 23px (1.4375) | normal | `--text-small` |

## Tokens — Spacing & Shapes

**Base unit:** 5px (most measured paddings are multiples of 5; the 32px node inset and the 1px shell sit off it)   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| Shell inset (`.noise-box`, `.no-touch__img-border`) | 1px | `--spacing-hairline` |
| Pill button y ("join our Telegram") | 15px | `--spacing-15` |
| Node inset x, grid gap (`.understanding-box__inner`, `.partners__brands`) | 32px | `--spacing-32` |
| Product card x | 40px | `--spacing-40` |
| Statement panel y | 50px | `--spacing-50` |
| Info block y (`.accessing__info`) | 65px | `--spacing-65` |
| Statement panel x | 70px | `--spacing-70` |
| Section y (`.no-touch`, `.understanding`, `.accessing`) | 80px | `--spacing-80` |
| Product card y | 100px | `--spacing-100` |
| Section y, large (`.sbs-token`) | 120px | `--spacing-120` |
| Hero y (`.hero__content`) | 125px | `--spacing-125` |
| Render clearance x (`.sbs-token-box__inner`) | 165px | `--spacing-165` |

### Border Radius

| Element | Value |
|---------|-------|
| Button ("Go to app" `.button-base.cold-gradient`) | 8px |
| Exchange tile (`.stf-token__dex-image`) | 20px |
| Cards and shells (`.noise-box`, `.noise-box__inner`, partner logos) | 24px |
| Chart frame (`.stf-token__chart-div`) | 30px |
| Statement panel, community buttons (`.stf-token__info`, `.join-community__inner__buttons__button`) | 42px |
| Icon ring (`.no-touch__img-border`) | 50% |
| Community band (`.join-community__inner`) | 0px |

### Layout
- **Page max-width:** 1160px (the `.stf-token__info` box, which spans the content column the tiles show)
- **Section gap:** 80px vertical padding on `.no-touch`, `.understanding`, `.accessing`; 120px on `.sbs-token`; 125px on `.hero__content`
- **Card padding:** 100px 40px product card; 0 32px node card; 0 165px token-economics card; 50px 70px statement panel
- **Element gap:** 32px on `.partners__brands`, the census's only measured flex gap; that grid does not render in the tiles

## Components

### Header Nav
**Role:** Brand mark on the left, "DNT" and "Whitepaper" links on the right, floating over the hero.
The links are `.header__login` ("DNT"): Lexend 18px/500, line-height 25.992px, `#DFE4E8`, no fill, no underline. The tile shows no header CTA and no bar fill; header padding is not measured. The mark is a small violet cube glyph beside a lowercase "structure" wordmark drawn as an image, so its face is not measured. The nav stays quiet on purpose: the hero title and the glass render are the first read, and 500 weight puts the links a notch above body without competing.

### Hero Block
**Role:** The opening statement: brand name, two promise bullets, partner logos.
"STRUCTURE" `.hero__title` is Lexend 96px/700, line-height 118.08px, tracking -1.92px, painted with the cold gradient `#620001 → #AA6EE5 → #B0DCFF → #CAFFFF` clipped to the glyphs (census ink `#DFE4E8` is the fallback); in the tile it runs violet to ice, left to right. Bullets are `.hero__li`, 18px/400/25.992px `#DFE4E8`, with small violet markers (not measured). `.hero__content` carries 125px vertical padding. The left half reads as a frosted pane: the glass gem behind it blurs as it crosses the edge. That pane's fill is not measured.

### Section Title
**Role:** Chapter heads: "WHY Structure Finance", "About Structure Finance", "Our Products".
`.no-touch__title.h2` sets Lexend 40px/700 at a tight 43px line-height in lavender `#DCBFF9`, left-aligned to the content column with no eyebrow, rule or number. The census exception is "STF Token Economics" `.sbs-token__title.h2`: same 40px/700 but line-height 49.2px and ink `#FFFFFF`. Everywhere else lavender is the chapter signal, the page's single chromatic text ink, and it works because body copy stays neutral.

### Noise-Box Shell
**Role:** The outline primitive that wraps every noise-box card.
`.understanding-box.understanding-box--1.noise-box` is a div with fill none, padding 1px 1px, radius 24px, border none, shadow none, box 247×128px; its background is the aurora gradient `#AA6EE5 → #CAFFFF`. The inner `.noise-box__inner` sits inside at the same 24px radius, so exactly one pixel of gradient shows as the border. `.sbs-token-box.noise-box` (772×246px) and `.products__box.product-box--1.noise-box` (348×361px) repeat the recipe at larger sizes. The class name points to a grain texture on the inner panel, which the tiles show as a faint noise; its opacity is not measured.

### Icon Ring Feature Row
**Role:** "WHY Structure Finance" benefits: an icon in a ring, a bold title, a paragraph.
The ring is `.no-touch__img-border`: 142×142px, padding 1px, radius 50%, background the warm gradient `#FFFAC9 → #FFD3C1`; the inner `.no-touch__img-border__inner` is `#101010`, 140×140px, radius 50%. Icons are peach line drawings (image, colour not measured). Title "Unique Payoffs" `.h3`: 18px/700, line-height 26px, `#FFFFFF`. Descriptions fall in the 18px/400/25.992px `#DFE4E8` body row ("Structure Finance offers innovative financial pr"). Rows alternate their indent, which gives the list a zig-zag; the offset is not measured.

### Concept Node Card
**Role:** "About Structure Finance" diagram nodes: "Basic Financial Instrument", "Derivatives", "Structured Product".
`.understanding-box__inner.noise-box__inner`: fill `#19181F`, padding 0px 32px, radius 24px, border none, shadow none, box 245×126px, inside its 1px aurora shell. Title `.understanding-box__title` is Lexend 22px/500, line-height 31.152px, `#FFFFFF`, centred. Two nodes sit above and one below, joined by thin gradient bracket lines (not measured); a glass ring clips the top-right node. The 500 weight is deliberate: these are labels in a diagram, not headings.

### Product Card
**Role:** "Our Products": DNT, LST and PDM, each with a pitch and a "Go to app" action.
`.product-box__inner.noise-box__inner`: fill `#19181F`, padding 100px 40px, radius 24px, shadow none, box 346×359px, in the 1px shell `.products__box.product-box--1.noise-box` (348×361px). Name "DNT" `.product-box__title2`: 48px/600, line-height 69.312px, filled with the title gradient `#CAFFFF → #AA6EE5`. Description `.product-box__description`: 16px/400/23px `#DFE4E8`, centred. A glass render sits over the top edge, and a soft halo glows behind it; the halo is part of the render or background, not a box-shadow.

### Cold-Gradient Button
**Role:** "Go to app", the page's measured action.
`.button-base.cold-gradient` is an anchor with fill none (the gradient is its background image: `#620001 → #AA6EE5 → #B0DCFF → #CAFFFF`), ink `#101010`, Lexend 18px/600, line-height 25.992px, padding 0px 0px, radius 8px, border none, shadow none, box 266×50px. Dark text on a light gradient inverts the page's ink logic, which is what makes it read as the action. The 8px radius is the tightest corner the census measures on a component, so the button looks crisper than the cards around it. Hover is not measured.

### Chart Frame
**Role:** "Introducing Our STF Token": the live price chart.
`.stf-token__chart-div`: padding 1px, radius 30px, box 800×462px, warm gradient `#FFFAC9 → #FFD3C1` as the hairline. Inner `.stf-token__chart-div__inner`: fill `#101010`, radius 30px, 798×460px. It hosts an embedded third-party chart whose green line and grid belong to the widget, not the inventory. A dark glass dodecahedron overlaps the frame's left edge. Below it, "STF Max Supply: 100,000,000" pairs a 24px/700 label with the figure in 24px/300 `.stf-token__subtitle__number`, and "Coinmarketcap.com" `.stf-token__subtitle__link` runs 20px/300 underlined.

### Statement Panel
**Role:** "STF is Structure Finance's official token…", a single pull statement.
`.stf-token__info__inner`: fill `#101010`, ink `#DFE4E8`, Lexend 24px/700, line-height 34.656px, padding 50px 70px, radius 42px, shadow none, box 1158×169px. The shell `.stf-token__info` is 1160×171px, padding 1px, radius 42px, with the warm gradient `#FFFAC9 → #FFD3C1`. The inner fill matches the canvas, so the panel is drawn by its hairline alone. Its 42px radius, shared with `.join-community__inner__buttons__button`, is the largest pixel radius in the census, and it spans the full content width.

### Token Economics Card
**Role:** "STF Token Economics": User Incentives, Platform Currency, Governance.
`.sbs-token-box__inner.noise-box__inner`: fill `#19181F`, padding 0px 165px, radius 24px, shadow none, box 770×244px, inside the 1px `.sbs-token-box.noise-box` shell (772×246px). Title "User Incentives" `.sbs-token-box__title`: 20px/700, line-height 26px, `#FFFFFF`. "COMING SOON" `.product-box__coming-soon`: 26px/600/26px, census ink `#DFE4E8`, right-aligned; in the tile it reads dimmer than that ink. The 165px side padding is room for a glass render that overlaps the card's left edge. Cards alternate left and right down the column.

### Roadmap Timeline
**Role:** "Structure Finance Roadmap": quarters as slides along a spectral line.
Future slides are `.roadmap-box` at `rgba(255, 255, 255, 0.3)`: title "Q4 2021" `.roadmap-box__title` 24px/700, line-height 34.656px; items "Testing and launch of early version of Double No" `.roadmap-box__descr` 18px/400/25.992px. The active slide's items "Token creation and coordination with exchange li" `.roadmap-box__list-item` are 18px/400 `#FFFFFF`. A glass diamond marks the start, and a thin violet-to-orange line runs above the columns (not measured). Slides overflow the column's right edge like a carousel. Opacity, not a second grey, carries the past and future split.

## Do's and Don'ts

### Do
- Build cards as a 1px `.noise-box` shell carrying `#AA6EE5 → #CAFFFF` around a `#19181F` `.noise-box__inner` at the same 24px radius.
- Keep chapter heads lavender `#DCBFF9` at 40px/700/43px like `.no-touch__title.h2`, and card titles `#FFFFFF`.
- Set reading copy at Lexend 18px/400 with 25.992px leading in `#DFE4E8`, as on `.hero__li`.
- Give the action the cold gradient with `#101010` ink at 600 and an 8px radius, as on "Go to app" `.button-base.cold-gradient`.
- Let a glass render break a card edge and use generous side padding to clear it, as the 165px on `.sbs-token-box__inner.noise-box__inner` does.
- Dim inactive content with `rgba(255, 255, 255, 0.3)` like `.roadmap-box`, not with a new grey.
- Frame data and statements with the warm hairline `#FFFAC9 → #FFD3C1`, as on `.stf-token__chart-div` and `.stf-token__info`.

### Don't
- Don't add a box-shadow: `.product-box__inner.noise-box__inner` and every boxed class in the component census measure shadow none.
- Don't draw a solid border: the component census records border none on every row, `.understanding-box__inner.noise-box__inner` included; the outline is the gradient shell.
- Don't fill a panel with violet or ice: `#AA6EE5` and `#CAFFFF` are counted as gradient stops only, on "STRUCTURE" `.hero__title` and the `.noise-box` shells.
- Don't read `#620001` as a brand red; it is the first stop of `.button-base.cold-gradient` and does not show in the tiles.
- Don't track text: -1.92px lives on "STRUCTURE" `.hero__title`, and every other type census row measures normal.
- Don't square off a component: boxed corners run from 8px on `.button-base.cold-gradient` to 42px on `.stf-token__info__inner`; only the full-bleed `.join-community__inner` band measures 0px.
- Don't set paragraphs in 300; keep it for figures and the source link, as on "100,000,000" `.stf-token__subtitle__number`.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#101010` | Page ground; also the inner of rings, chart frame and statement panel, so those read as outlines on the page itself |
| 1 | Band | `#171717` | `.join-community__inner` full-width band (measured, not visible in the tiles) |
| 1 | Card | `#19181F` | `.noise-box__inner` for node, product and token-economics cards |
| 1 | Exchange tile | `#1B1A21` | `.stf-token__dex-image__inner`, the AscendEX and Huobi logo tiles |
| 2 | Graphite | `#282828` | "follow us on Twitter" button inner (measured, not visible in the tiles) |

## Elevation

The shadows census is empty, so depth comes from three places. First, the hairline: a 1px gradient shell traces each card, and that line of light, not a drop shadow, separates the card from the canvas. Second, a single fill step: `#101010` to `#19181F` or `#1B1A21`, low enough that a card reads as tinted glass. Third, the renders: glass objects overlap card edges and carry soft halos that are part of the imagery. Where the inner fill equals the canvas (chart frame, statement panel, icon rings), the hairline alone draws the shape.

## Imagery

3D glass carries the brand: a faceted dodecahedron gem, pyramids, a hollow cylinder and an octahedral diamond, all rendered with prism-edge chromatic dispersion that splits white highlights into violet, cyan, yellow and red. A chrome ball-and-stick network illustrates the oracle system. Benefit icons are thin peach line drawings in gradient rings; the oracle diagram uses grey glyphs. Partner and exchange logos keep their own colours. There is no photography and no people: the product is abstract financial structure, and faceted glass is the literal metaphor for it.

## Layout

The page is one centred column, 1160px wide at desktop (the `.stf-token__info` box), on a `#101010` ground, with sections spaced by 80px vertical padding and 120px before token economics. The hero splits vertically: a frosted left pane holds the title, bullets and partner logos, while the right half shows the gem clear. After that, the rhythm alternates. Staggered icon rows, a two-over-one node diagram, full-width paragraphs over the oracle render, a three-up product grid, the chart with its stat line, the statement panel, two exchange tiles under a bracket, left-right token cards, then the roadmap carousel. The census also measures a partners logo grid and a full-width community band that the tiles do not show. The footer is a single row: copyright left, eight social glyphs right.

## Typography Voice

Lexend runs in two modes. Titles speak in 700 (section titles, card titles, the statement panel), while reading copy sits at 400 with a 1.444 line-height that the census repeats across 18px, 24px and 48px rows. That single airy ratio gives the long explanatory paragraphs a slow, trustworthy pace. Headings break from it and tighten: 43px leading on the 40px section title, 1.23 on the display. Ink does the rest of the ranking, with lavender for chapters, white for card titles, mist `#DFE4E8` for body and 30% white for inactive roadmap slides. The stat line sets a 700 label against the 300 figure "100,000,000" `.stf-token__subtitle__number`; there weight contrast turns decorative, and it makes the number feel precise rather than loud.

## Agent Prompt Guide

Build on `#101010` in Lexend, outline cards with 1px gradient shells, and keep every hex below.

## Quick Color Reference
- background: #101010
- text: #DFE4E8
- surface: #19181F
- border: 1px gradient shell #AA6EE5 → #CAFFFF (no solid border colour)
- accent: #DCBFF9 (section titles)
- primary action: cold gradient #620001 → #AA6EE5 → #B0DCFF → #CAFFFF with #101010 label

## Example Component Prompts
1. **Product Card**: On a #101010 page, make a div with padding 1px, border-radius 24px and background linear-gradient(90deg, #AA6EE5, #CAFFFF). Inside, a panel 346×359px, background #19181F, border-radius 24px, padding 100px 40px, no border, no shadow. Centre "DNT" in Lexend 48px/600, line-height 69.312px, text filled with linear-gradient(90deg, #CAFFFF, #AA6EE5). Under it, Lexend 16px/400/23px #DFE4E8 copy, then a "Go to app" button. Let a glass 3D render overlap the panel's top edge.
2. **Cold-Gradient Button**: An anchor 266×50px, border-radius 8px, background linear-gradient(90deg, #620001, #AA6EE5, #B0DCFF, #CAFFFF), label "Go to app" in Lexend 18px/600, line-height 25.992px, colour #101010, centred, no border, no shadow.
3. **Statement Panel**: A 1160px-wide div, padding 1px, border-radius 42px, background linear-gradient(90deg, #FFFAC9, #FFD3C1); inside, a #101010 panel with border-radius 42px and padding 50px 70px holding Lexend 24px/700, line-height 34.656px, colour #DFE4E8.
4. **Roadmap Slide Row**: Columns of quarters under a thin spectral line. Active quarter: title Lexend 24px/700 #FFFFFF, bullet items 18px/400/25.992px #FFFFFF. Other quarters: the same sizes in rgba(255, 255, 255, 0.3). Let the last column run off the right edge.
5. **Icon Ring Feature Row**: A 142×142px circle with padding 1px and background linear-gradient(90deg, #FFFAC9, #FFD3C1), inner circle #101010 holding a peach line icon. To its right, a title in Lexend 18px/700, line-height 26px, #FFFFFF, then a paragraph in 18px/400/25.992px #DFE4E8. Indent every second row.

## Similar Brands
- **Raycast** — near-black marketing pages built around glossy 3D renders and softly glowing, gradient-edged panels.
- **Linear** — a dark canvas, a single sans family and cards separated by luminous hairlines instead of shadows.
- **dYdX** — a DeFi trading brand on a dark ground with violet-led gradients and restrained type.
- **Framer** — dark pages where gradient-filled display type and light effects carry the colour.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #101010;
  --color-card: #19181F;
  --color-tile: #1B1A21;
  --color-band: #171717;
  --color-graphite: #282828;
  --color-ink: #DFE4E8;
  --color-ink-bright: #FFFFFF;
  --color-ink-ghost: rgba(255, 255, 255, 0.3);
  --color-lavender: #DCBFF9;
  --color-violet: #AA6EE5;
  --color-ice: #CAFFFF;
  --color-sky: #B0DCFF;
  --color-oxblood: #620001;
  --color-cream: #FFFAC9;
  --color-peach: #FFD3C1;
  --gradient-cold: linear-gradient(90deg, #620001, #AA6EE5, #B0DCFF, #CAFFFF);
  --gradient-aurora: linear-gradient(90deg, #AA6EE5, #CAFFFF);
  --gradient-warm: linear-gradient(90deg, #FFFAC9, #FFD3C1);
  --gradient-title: linear-gradient(90deg, #CAFFFF, #AA6EE5);

  /* Typography — Families */
  --font-lexend: 'Lexend', ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-display: 96px;
  --text-product: 48px;
  --text-section: 40px;
  --text-tag: 26px;
  --text-heading: 24px;
  --text-node: 22px;
  --text-subheading: 20px;
  --text-body: 18px;
  --text-small: 16px;
  --leading-display: 118.08px;
  --leading-product: 69.312px;
  --leading-section: 43px;
  --leading-tag: 26px;
  --leading-heading: 34.656px;
  --leading-node: 31.152px;
  --leading-subheading: 26px;
  --leading-body: 25.992px;
  --leading-small: 23px;
  --tracking-display: -1.92px;

  /* Spacing */
  --spacing-hairline: 1px;
  --spacing-15: 15px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-50: 50px;
  --spacing-65: 65px;
  --spacing-70: 70px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-120: 120px;
  --spacing-125: 125px;
  --spacing-165: 165px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-button: 8px;
  --radius-tile: 20px;
  --radius-card: 24px;
  --radius-chart: 30px;
  --radius-panel: 42px;
  --radius-round: 50%;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #101010;
  --color-card: #19181F;
  --color-tile: #1B1A21;
  --color-band: #171717;
  --color-graphite: #282828;
  --color-ink: #DFE4E8;
  --color-ink-bright: #FFFFFF;
  --color-ink-ghost: rgba(255, 255, 255, 0.3);
  --color-lavender: #DCBFF9;
  --color-violet: #AA6EE5;
  --color-ice: #CAFFFF;
  --color-sky: #B0DCFF;
  --color-oxblood: #620001;
  --color-cream: #FFFAC9;
  --color-peach: #FFD3C1;
  --gradient-cold: linear-gradient(90deg, #620001, #AA6EE5, #B0DCFF, #CAFFFF);
  --gradient-aurora: linear-gradient(90deg, #AA6EE5, #CAFFFF);
  --gradient-warm: linear-gradient(90deg, #FFFAC9, #FFD3C1);
  --gradient-title: linear-gradient(90deg, #CAFFFF, #AA6EE5);

  --font-lexend: 'Lexend', ui-sans-serif, system-ui, sans-serif;

  --text-display: 96px;
  --text-display--line-height: 118.08px;
  --text-display--letter-spacing: -1.92px;
  --text-product: 48px;
  --text-product--line-height: 69.312px;
  --text-section: 40px;
  --text-section--line-height: 43px;
  --text-tag: 26px;
  --text-tag--line-height: 26px;
  --text-heading: 24px;
  --text-heading--line-height: 34.656px;
  --text-node: 22px;
  --text-node--line-height: 31.152px;
  --text-subheading: 20px;
  --text-subheading--line-height: 26px;
  --text-body: 18px;
  --text-body--line-height: 25.992px;
  --text-small: 16px;
  --text-small--line-height: 23px;

  --spacing-hairline: 1px;
  --spacing-15: 15px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-50: 50px;
  --spacing-65: 65px;
  --spacing-70: 70px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-120: 120px;
  --spacing-125: 125px;
  --spacing-165: 165px;

  --radius-none: 0px;
  --radius-button: 8px;
  --radius-tile: 20px;
  --radius-card: 24px;
  --radius-chart: 30px;
  --radius-panel: 42px;
  --radius-round: 50%;
}
```