# STRK20 Brand & UI Guidelines

> Everything an agent (or human) needs to build interfaces that look like STRK20. Machine-readable design tokens: [/brand/tokens.json](https://strk20.starknet.io/brand/tokens.json). Logos: [/brand/](https://strk20.starknet.io/brand). Live reference: [strk20.starknet.io](https://strk20.starknet.io).

## The look in one paragraph
STRK20 is **dark, terminal, and industrial** — a near-black canvas (`#0d0d0d`) with one vivid orange accent (`#c53400`) and nothing else competing for attention. Type is loud and structural: huge, tight, uppercase display headlines; clean sans body; and small monospace labels tracked wide like a control panel. Surfaces are flat dark panels edged with hairline borders; corners are mostly sharp. Ambient texture — film grain, faint scanlines, and orange radial glows — gives it a CRT/terminal feel without noise. Motion is restrained: content reveals on scroll and cards lift subtly on hover. The voice matches: terse, technical, confident.

**Golden rules:** near-black backgrounds · exactly one accent (orange) · uppercase display + mono labels · hairline borders · sharp corners · single subtle orange glow per surface · restraint over decoration.

---

## Color

| Role | Token | Value |
|------|-------|-------|
| Canvas | `bg.base` | `#0d0d0d` |
| Raised surface | `bg.raised` | `#141414` |
| Raised (higher) | `bg.raised2` | `#1a1a1a` |
| Hairline border | `line.default` | `#262626` |
| Subtle divider | `line.subtle` | `rgba(250,250,250,0.05)` |
| Primary text | `text.default` | `#fafafa` |
| Secondary text | `text.dim` | `rgba(250,250,250,0.65)` |
| Muted / labels | `text.faint` | `#616161` |
| Disabled | `text.ghost` | `#3a3a3a` |
| **Accent** | `accent.orange` | **`#c53400`** |
| Accent (pressed) | `accent.orangeDark` | `#a02a00` |
| Accent glow | `accent.glow` | `rgba(197,52,0,0.55)` |
| Text selection | — | bg `#c53400`, text `#1a0a04` |

**Rules:**
- **One accent, always orange.** `#c53400` (= `rgba(197,52,0,α)`) is the only brand hue — used for CTAs, links, eyebrow ticks, focus, status dots, top-accent rules, and every glow. Do **not** add a second color.
- Text hierarchy is opacity-driven white, not new colors: `#fafafa` → 65% → `#616161`.
- Note: in the codebase the accent CSS var is confusingly named `--green` but its value is orange. Ignore the name; use orange.

---

## Typography

Three faces, three jobs:

| Role | Font | Fallback stack | Treatment |
|------|------|----------------|-----------|
| **Display** (H1–H4) | Unison Pro (800) | `"Unison Pro","Neue Montreal","Helvetica Neue",sans-serif` | **UPPERCASE**, `letter-spacing:-0.025em`, `line-height:1.0`, `text-wrap:balance` |
| **Body** | Neue Montreal (400) | `"Neue Montreal","Helvetica Neue",Arial,sans-serif` | `line-height:1.6` |
| **Labels / mono** | GT America Mono | `"GT America Mono",ui-monospace,"SFMono-Regular",monospace` | UPPERCASE, `letter-spacing:0.22em–0.32em` |

The three brand faces are **commercial/paid** (Fontfabric, Pangram Pangram, Grilli Type) — do **not** redistribute the files. The fallback stacks render faithfully; free stand-ins: display → *Archivo Expanded* / *Space Grotesk*, mono → *Space Mono* / *IBM Plex Mono*.

**Display headline treatment** — hero H1s are gradient-filled warm off-white, clipped to text:
```css
background: linear-gradient(178deg, #fffdf1 0%, #f4ece8 50%, #ffcdb6 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
```
**Fluid type ladder** (use `clamp()`): H1 `clamp(22px,5.6vw,62px)` · section H2 `clamp(26px,3.4vw,52px)` · card H3 `clamp(19px,1.9vw,30px)`.
**Exception:** descriptive *card* titles (not section headlines) use the **body** font at weight 500–600 — a softer treatment that distinguishes them from display headlines.

---

## Logos

Files live under [`/brand/`](https://strk20.starknet.io/brand):

| Asset | File | Use on |
|-------|------|--------|
| Wordmark, color | `strk20-logo.svg` / `.png` | dark backgrounds (default) |
| Wordmark, color | `strk20-logo-onlight.svg` | light backgrounds |
| Wordmark, mono | `strk20-logo-white.svg` | orange / photo backgrounds |
| Wordmark, mono | `strk20-logo-black.svg` | light print / single-color |
| Icon / mark | `strk20-mark.svg` / `.png` | favicons, avatars, tight spaces |

The wordmark is **`STRK`** + a bracketed **`[20]`** with a slashed zero. **Do:** keep the `[20]` orange on the color versions; give it clear space of at least the height of the "S"; use SVG whenever possible. **Don't:** recolor `STRK` to orange, restretch/skew, add effects, or place the color wordmark on a busy background (use the white mono version).

---

## Components

### Buttons
Base is monospace, uppercase, sharp (2px), hairline-bordered:
```css
.btn {
  display:inline-flex; align-items:center; gap:0.6em;
  font-family: var(--mono); font-size:13px; letter-spacing:0.04em; text-transform:uppercase;
  padding:12px 20px; border:1px solid var(--line); border-radius:2px;
  background:transparent; color:var(--text);
  transition: border-color .2s, background .2s, color .2s, transform .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-orange { background:var(--orange); border-color:var(--orange); color:#fff; font-weight:600; }
.btn-orange:hover { box-shadow: 0 0 28px rgba(197,52,0,0.5); }   /* primary CTA */
.btn-ghost:hover { border-color:var(--orange); color:var(--orange); }  /* secondary */
```
**Arrow convention** — the glyph signals intent, and nudges on hover: `↓` scroll/enter · `→` forward nav · `↗` external/new-tab · `»` "read more".

### Eyebrow labels
Small mono kickers above headings. Two variants:
- **Faint** — `mono, 11px, letter-spacing:0.32em, uppercase, color:#616161`, prefixed with a `◢` tick in **orange**. e.g. `◢ HOW IT WORKS`.
- **Accent** — `mono, 12px, letter-spacing:0.18em, uppercase, color:#c53400` (no glyph). e.g. `WHERE TO START`.
- **Category tags** wrap in literal brackets: `[ MARKETS ]`, `[ PAYMENTS ]` (mono, faint).

### Cards
- **Bento card** (signature): flat dark panel with a per-card corner **orange radial glow** + diagonal panel gradient, a hairline border, and an oversized **"ghost numeral"** bleeding off the top-right (cropped by `overflow:hidden`).
  ```css
  background:
    radial-gradient(ellipse 70% 80% at 12% 0%, rgba(197,52,0,0.13), transparent 60%),
    linear-gradient(165deg,#181818 0%,#141414 48%,#100c0a 100%);
  border:1px solid var(--line);
  /* ghost numeral: display font, clamp(84px,9vw,150px), color:rgba(197,52,0,0.14), top/right, absolute */
  ```
  Hover: `transform:translateY(-4px); border-color:rgba(197,52,0,0.5); box-shadow:0 40px 70px -30px rgba(0,0,0,0.7)` (the ghost numeral drifts and warms).
- **Feature card:** same dark panel + a **`border-top:2px solid #c53400`** accent rule and a base-rising orange bloom.
- **Corner radius:** bento/section cards are sharp (`0`); softer content cards use `10–12px`; status pills `999px`.

### Section layout
- Content max-width **1280px** (wide/build pages **1680px**), inside a fluid gutter `clamp(20px,5vw,72px)`.
- Section vertical padding `clamp(80px,12vh,150px)`; build sections are full-viewport (`min-height:100vh`, centered).
- Sections separate by padding + background, occasionally a `border-top:1px solid var(--line)` — never heavy dividers.

---

## Textures & effects (the "terminal" feel)
Layer these subtly over the dark canvas:
- **Film grain** — fixed full-screen SVG `fractalNoise` overlay at **`opacity:0.04`**, gently animated.
- **Scanlines** — `repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.18) 3px 4px)` at **`opacity:0.35; mix-blend-mode:multiply`**.
- **Orange radial glow** — the signature ambient bloom: `radial-gradient(ellipse …, rgba(197,52,0,0.08–0.16), transparent 55–60%)` placed at one corner/edge per surface. One glow per surface, never many.
- **Code rain** — low-opacity mono hex/symbol strings behind cards (decorative, `aria-hidden`).
- **Selection** — orange background, near-black text.
- (Advanced) the build hero runs a WebGL "faulty terminal" shader tinted `#c53400` at `opacity:0.55` behind a darkening scrim.

---

## Motion
- **Reveal on scroll** — the default entrance: `opacity:0→1` + `translateY(22px)→0` over `.7s cubic-bezier(.2,.7,.2,1)`, staggered by ~0.05s between siblings.
- **Signature easing:** `cubic-bezier(.2,.7,.2,1)`.
- **Hover:** buttons lift `translateY(-1px)`; cards lift `translateY(-4px)` with a large soft shadow; arrows nudge 3–4px.
- **Durations:** 0.15–0.25s for hover, 0.7s for reveals.
- Always honor `@media (prefers-reduced-motion: reduce)` — disable animations.

---

## Voice & tone
Terse, technical, confident. Short declarative sentences; imperative product verbs; names real primitives; a period at the end of headlines.
- Headlines: *"Privacy that works for crypto."* · *"Pick your integration route."* · *"Privacy, not secrecy."* · *"Private by default, disclosable when required."* (the qualifying clause often set in orange).
- Body: dense and spec-like — *"Anonymous swaps run on existing AMMs (Ekubo, AVNU). No unshield-swap-reshield, no fragmented liquidity."*
- Micro/meta copy reads like a filing: `FILED · APR 2026 / STATUS · OPEN / STAGE · PRE-SEED → SEED`.
- Avoid hype adjectives and filler; let the mechanism be the flex.

---

## Copy-paste starter
Drop this in and you're building in-brand:
```css
:root{
  --bg:#0d0d0d; --bg-1:#141414; --bg-2:#1a1a1a; --line:#262626;
  --text:#fafafa; --dim:rgba(250,250,250,.65); --faint:#616161;
  --orange:#c53400; --orange-d:#a02a00; --glow:rgba(197,52,0,.55);
  --display:"Unison Pro","Helvetica Neue",sans-serif;
  --body:"Neue Montreal","Helvetica Neue",Arial,sans-serif;
  --mono:"GT America Mono",ui-monospace,monospace;
  --gut:clamp(20px,5vw,72px);
}
body{ background:var(--bg); color:var(--text); font-family:var(--body); line-height:1.6; }
h1,h2,h3{ font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:-.025em; line-height:1; }
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--faint); }
.eyebrow b{ color:var(--orange); }  /* the ◢ tick */
```

---

_Machine-readable tokens: [/brand/tokens.json](https://strk20.starknet.io/brand/tokens.json) · This site indexed for agents: [/llms-full.txt](https://strk20.starknet.io/llms-full.txt)_