# Prime Intellect — Design Extract (Default)

Source: https://www.primeintellect.ai/ (captured 2026-09-02).
Build platform: Next.js + Tailwind CSS (utility classes and CSS custom properties read from the live DOM).
This document describes the visual design of the home page. It is a reference, not a set of instructions.


---


## 1. Overall Style

Prime Intellect employs a near‑black, high‑density engineering / terminal aesthetic for an open‑AI infrastructure company.

- The canvas is a very dark gray (`#0E0E0E`), not pure black; default text is near‑white (`#F4F4F4`).
- There is no coloured brand accent. Emphasis is carried by white at graded opacities (90 % / 62 % / 50 % / 45 % / 30 %) and by inversion (white fills on the dark ground). The only saturated colour is a terminal‑prompt green used for `$` in install commands and a five‑hue data‑viz set reserved for charts.
- Every corner is square: `--radius: 0px` — buttons, cards, inputs, chips and images all have `border-radius: 0`.
- Structure is a spec‑sheet: the four pillars are numbered in the nav (`TRAINING01`, `INFERENCE02`, `COMPUTE03`, `RESEARCH04`); sections are numbered `01`–`04`; small `FIG.1` / `FIG.2` labels annotate diagrams like a technical drawing.
- Two type voices: a clean grotesque (**Geist**) for headings and prose, and a monospace (**ABC Favorit Mono**) for every label, nav item, button, eyebrow, tag and figure caption — always UPPERCASE.
- The hero is a full‑bleed cinematic photograph (a jungle river with a glowing monolith) under a dark scrim; the rest of the page is flat dark with hairline rules.
- Copy leans developer‑first: `pip install prime`, `curl -fsSL … | sh`, “Init, develop, eval, and push with the Prime CLI”, live GPU price tables.
- Motion is minimal: opacity fades on hover, smooth scroll, a slow logo marquee. No parallax, no entrance animation.

Tagline (hero): “Own Your Intelligence” under the eyebrow “THE OPEN SUPERINTELLIGENCE STACK”.


## 2. Colour Palette (generic description)

The palette is a dark‑ground scale with white‑at‑opacities as the primary colour tool, plus a single terminal‑green accent and a five‑hue chart set.

- **Core neutrals** – background `#0E0E0E`, card fills `#151515` / `#161616` / `#101010`, popovers `#111111`, secondary surfaces `#202020`, muted `#1B1B1B`.
- **Text opacity ladder** – white (`#FFFFFF`) stepped down by alpha is the main scale: 0.90 for key body, 0.70 for nav links, 0.62 (`--muted-foreground`) for body copy, 0.50 for figure captions/tags, 0.45 for hero sub‑paragraph, 0.30 for eyebrow, 0.25 for `FIG.n` labels, 0.12 for hairlines.
- **Terminal green** – the `$` prompt in install blocks renders in bright green `#85ED75` (the `--chart-1` hue). It is the only “accent‑like” colour a visitor sees, and only there.
- **Chart hues** – five colours used exclusively for diagrams/charts: `--chart-1` green `#85ED75`, `--chart-2` amber `#F3BC56`, `--chart-3` violet `#8B7CF6`, `--chart-4` blue `#38BDF8`, `--chart-5` rose `#FB7185`.
- **Border / input** – `#2A2A2A` for hairline dividers, card outlines, table rules and input borders.
- **Focus ring** – white at 64 % (`#FFFFFFA3`).
- **Destructive** – `#EF4444` for errors only.
- **Footer background** – `#191919`, slightly lifted from the canvas.

*(Exact hex values have been replaced with descriptive roles; the original token table has been collapsed into role‑based categories.)*


## 3. Typography (generic)

- **Geist** – a clean grotesque sans‑serif (open‑source, Google‑Font/Verl) used for all headings and body copy, almost always weight **400**. Size and colour do the visual work.
- **ABC Favorit Mono** – a commercial monospace (self‑hosted) used for nav, buttons, eyebrows, section numbers, tags, figure captions and the ticker, always UPPERCASE. When a licence is not available, substitute Geist Mono, IBM Plex Mono or `ui‑monospace`.
- **Geist Mono** – monospace for code snippets and some numeric readouts, loaded from Google Fonts.
- **ABC Favorit** – a commercial grotesque used only for the occasional italic “Intellect” in the wordmark; substitute with a system sans‑serif if needed.

### Type scale (desktop)

| Token          | Font          | Size / weight | Line‑hgt | Letter‑spacing | Colour (on dark) | Use |
|----------------|---------------|---------------|----------|----------------|------------------|-----|
| Display / H1   | Geist         | `clamp(40px, 6vw, 72px)` 400 | ~1.05 | -0.01em | `#FFFFFF` at 90% | Hero line (“Own Your Intelligence”). |
| H2 (section)   | Geist         | 36–44px 400 | ~1.1 | -0.01em | `#FFFFFF` | Section headlines. |
| H2 (small)     | Geist         | 28px / 1.22 | 34.16px | normal | `#FFFFFF` | “Join Prime Intellect” etc. |
| H3             | Geist         | 20–24px 400 | ~1.2 | normal | `#F4F4F4` | Card / feature titles. |
| Body / lede    | Geist         | 18px / 1.5 400 | 27px | normal | `#FFFFFF` at 45‑62% | Paragraphs, max ~30rem. |
| Body small     | Geist         | 12–14px 400 | ~1.3 | normal | `#FFFFFF` at 50‑62% | Stat lines, price‑table cells. |
| Eyebrow (mono)| ABC Favorit Mono | 14px 400 | 1 | normal | `#FFFFFF` at 30% | “THE OPEN SUPERINTELLIGENCE STACK”. |
| Nav / label    | ABC Favorit Mono | 12–13px 400 | 16px | normal | `#FFFFFF` at 88‑90% | Nav items, section labels. UPPERCASE. |
| Button label   | ABC Favorit Mono | 12px 400 | 12‑16px | normal | `#0B0B0B` / white | All CTAs. UPPERCASE. |
| Tag / caption  | ABC Favorit Mono | 12px 400 | 12px | normal | `#FFFFFF` at 50% | “CASE STUDY ↗”, “READ MORE ↗”. |
| Figure label   | ABC Favorit Mono | 10px 400 | 15px | normal | `#FFFFFF` at 25% | “FIG.1”, “FIG.2”. |
| Code           | Geist Mono    | 12‑14px 400 | ~1.5 | normal | `#F4F4F4`; `$` in green | `pip install prime`, curl commands. |

### Headline pattern

Mono eyebrow (UPPERCASE, low‑opacity) → one large Geist line, sentence case, weight 400.
Section headlines are often a full sentence with a trailing period, e.g. “Turn any task into an RL environment. Init, develop, eval, and push with the Prime CLI.”

### Label pattern

Section label = a two‑digit number joined to a short name: `01` + `RL Environments`, `02` + `Evaluations`, `03` + `Hosted Training`, `04` + `Inference`. The nav mirrors this with the number trailing: `TRAINING01`, `INFERENCE02`, `COMPUTE03`, `RESEARCH04`.

*(Font names have been replaced with free‑substitute families; a note indicates which original fonts are commercial.)*


## 4. Layout (generic)

- Full‑width dark sections stacked vertically, separated by a single `1px` `#2A2A2A` rule. No alternating light sections — the page stays dark end to end.
- Content sits in a centered column, ~1280 px max, with 24‑48 px horizontal padding.
- **Spacing scale**: base 8 px — steps `4, 8, 12, 16, 24, 32, 48, 64, 96`. Tailwind fractional steps appear (`h‑7.5` = 30 px, `h‑9` = 36 px).
- **Breakpoints**: 768 px (mobile→tablet), 1024 px (tablet→desktop), wide ≥ 1280 px.
- The hero is full‑bleed: a background photograph with a dark scrim, content bottom‑left, backer logos in a row beneath.
- Customer logos run in a horizontal strip of equal cells divided by vertical hairlines, each cell tagged `CASE STUDY ↗` or `READ MORE ↗` at the top.
- Compute section uses dense bordered **tables**: GPU name · VRAM / RAM / vCPU · one or more `$X.XX/HR` columns (on‑demand, reserved, spot), all `#2A2A2A` rules, mono figures.
- No shadows of consequence — depth is a `1px` border and a slightly different gray fill.


## 5. Components (generic)

- **Announcement ticker** (top bar) – full‑width, ~36 px tall, `rgba(0,0,0,0.14)` over the hero. Left: “Introducing Prime Agent ↗”. Right: a mono command `curl -fsSL https://app.primeintellect.ai/prime-agent/install.sh | sh` with a copy‑to‑clipboard icon. Mono, ~13 px, white at 70 %.
- **Header / nav** – left: logomark (small angular “spark” glyph) + wordmark “PRIME” in mono caps, “Intellect” in italic sans. Center: four pillar links as low‑contrast pills (label left, number right) on `rgba(255,255,255,0.06)` fill, 30 px tall, `padding: 0 8 px`, square. Then plain mono links: `DOCS`, `BLOG`, `CAREERS24`. Right: `BOOK A CALL` (mono text link), `LOGIN`, and `START TRAINING` (primary button). Sticky, transparent over the hero, gains a dark fill on scroll.
- **Buttons** – three variants (primary white fill, secondary subtle fill, text/link). All square (`border‑radius: 0`), 36 px tall, `padding: 0 12 px`, ABC Favorit Mono 12 px UPPERCASE. Primary carries a trailing chevron `›`; text links carry `↗` or `↓`. Hover: primary dims slightly, secondary fill lifts toward `#2C2C2C`; links go to full white. Optional `scale(1.02)`.
- **Command block** – dark inset (`#111`–`#151515`), `1px #2A2A2A`, square. Geist Mono. A green `$` prompt (`≈ #85ED75`), then the command in near‑white, then a copy icon at the right. Example: `$ pip install prime`.
- **Section block** – 1. Mono label: `NN` + name (e.g. `01 RL Environments`). 2. One large Geist headline sentence (weight 400). 3. Short list of plain stat lines (hairline‑separated, mono or Geist‑small). 4. A mono CTA link with `↘`. 5. Optional diagram panel annotated `FIG.n`.
- **Backer / logo row** – “Backed by” then names as plain text separated by ` / `: Founders Fund / Radical / NVIDIA / Intel / Andrej Karpathy / John Schulman / Dylan Patel / Clem Delangue. Customer logos (monochrome wordmarks) in divided cells.
- **Price table** – bordered grid. Columns: GPU (e.g. `H200`), spec string (`80 GB VRAM · 184 GB RAM · 32 vCPU`), and price columns (`$1.99/HR`, `$1.80/HR`, `$1.23/HR`, `$0.47/HR` for on‑demand / reserved / spot). All mono, white; rules `#2A2A2A`. A “Liquid Reserved Cluster” example shows a full cost/resale P&L (`RESERVED COST (3YRS) $67,276,800`, `PROFIT ON IDLE CAPACITY +$20,183,040`).
- **Customer story card** – tag `POST‑TRAINING` → headline (Geist) → pull quote in Geist → attribution `— Karim Atiyeh, Ramp Co‑CEO` in mono.
- **Research list** – `RESEARCH` label → title (Geist) → one‑line description (muted) → `READ MORE ↗`. Items: “Recursive Language Models: the paradigm of 2026”, “INTELLECT‑3: A 100B+ MoE trained with large‑scale RL”, “SYNTHETIC‑2 Release”. Blog rows carry a mono date (`AUG 25TH, 2026`).
- **Footer** – background `#191919`, top hairline. Big Geist line “Be your own Lab.” + `Start training` / `Book a call`. Then a 5‑column link grid with mono UPPERCASE group headers:

  - **Platform** — Lab, Compute, Research
  - **Company** — Careers24, Merch, Contact
  - **Community** — X, LinkedIn, Discord, Luma
  - **Resources** — Docs, Writings, Events, Merch, Platform Status
  - **Terms** — Terms of Service, Privacy Policy, Security Policy

  Copyright: `© 2026 Prime Intellect, Inc.`


## 6. Page Structure and Content (generic order)

1. **Header + announcement ticker** – nav as above; ticker: “Introducing Prime Agent ↗” + `curl … install.sh | sh`.
2. **Hero** – eyebrow “THE OPEN SUPERINTELLIGENCE STACK”; H1 “Own Your Intelligence”; body “Train, deploy, and continuously improve your own models on an integrated compute, training, inference, and sandbox stack”; buttons “START TRAINING”, “BOOK A CALL”; command `$ pip install prime`. Full‑bleed background photograph (jungle river + glowing monolith) under a dark scrim.
3. **Backed by** – Founders Fund · Radical · NVIDIA · Intel · Andrej Karpathy · John Schulman · Dylan Patel · Clem Delangue.
4. **Customer logo strip** – ramp · NVIDIA · zapier · character.ai · goodfire; each cell tagged `CASE STUDY ↗` / `READ MORE ↘`.
5. **01 — RL Environments** – “Turn any task into an RL environment. Init, develop, eval, and push with the Prime CLI.” · 2 500+ community environments on the Hub · CTA: “Create Environments”.
6. **02 — Evaluations** – “Hosted evaluations for you to benchmark the performance of your models.” · 100+ open‑source models · No infra, no setup · Public leaderboard · CTA: “Run your first eval”.
7. **03 — Hosted Training** – “Train large‑scale models optimized for agentic workflows.” · Train on 2 500+ RL environments · Managed training workflows with full visibility and control · Hands‑on support from our applied research team · CTA: “Start Training”.
8. **04 — Inference** – “Dedicated or serverless inference for your custom models, with native LoRA support.” · 1‑click deployment for any fine‑tuned model · LoRA adapters served alongside base models · Zero config. No setup · CTA: “Book a Call”.
9. **Compute** – “Find reliable compute operated globally from a single GPU to largest clusters.” Buttons: “FIND COMPUTE”, “BOOK A DEMO”. Sub‑block “On demand” — instant access to 1‑256 GPUs; use GPUs across clouds in a single platform. Features: SLURM / K8s orchestration, Infiniband networking, Grafana monitoring dashboards. GPU price table (H200 from $1.99/HR, B300 $4.99/HR, B200 $3.49/hr, H100 $2.43/HR / spot $0.94/HR, …). “Liquid Reserved Clusters” — request large‑scale clusters from 50+ providers; sell‑back idle GPUs to our spot market.
10. **Research** – “Our Contributions to the Frontier of Open‑Source AI.” CTA: “DISCOVER”. Prime Agent: “A self‑improving RLM agent” — `curl -fsSL https://app.primeintellect.ai/prime-agent/install.sh | sh`. Articles: “Recursive Language Models: the paradigm of 2026”, “INTELLECT‑3: A 100B+ MoE trained with large‑scale RL”, “SYNTHETIC‑2 Release”. Latest research blog: “Uncovering a universal offline sandbox escape” (AUG 25TH, 2026), “Measuring Autonomous AI Research” (AUG 14TH, 2026), “Prime Flash MoE” (AUG 13TH, 2026).
11. **Customer Stories** – Zapier (POST‑TRAINING) → “How Zapier Turned AutomationBench Into a Continuous Agent Improvement Loop” → Robin Salimans, Principal AI Engineer. Ramp (POST‑TRAINING) → “How Ramp Used RL to Beat Frontier Models at Spreadsheet Search” → Karim Atiyeh, Ramp Co‑CEO.
12. **We’re Hiring** – subhead “Join Prime Intellect”. “We are seeking the most ambitious developers to join our team — in San Francisco or remotely. Please send us examples of your exceptional work.” CTA: “Join us”.
13. **Footer CTA + footer** – “Be your own Lab.” + Start training / Book a call, then the 5‑column link grid and copyright.


## 7. Assets (generic)

- Hero and section imagery: dark, cinematic photography and 3D renders; heavy dark scrims (`rgba(9,9,9,0.8) → rgba(9,9,9,0)`).
- Logos: monochrome SVG wordmarks, rendered at ~40 % white.
- Diagrams: line work on the dark ground, annotated with `FIG.n` mono labels; chart fills from the 5‑hue `--chart‑*` set.
- Icons: monochrome white line SVG, 16‑24 px, functional only (`↘`, `›`, `↘`, copy).
- No rounded media — image containers are square.


## 8. Motion (generic)

- Hover: opacity fade (links 70→100 %, surfaces toward `#2C2C2C`); optional `scale(1.02)` on buttons.
- Smooth scroll; sticky header gains a dark fill after the hero.
- Slow horizontal marquee on the backer / customer logo rows.
- Terminal blocks may type or show a blinking block cursor.
- Otherwise static — no parallax, no scroll‑triggered entrances.


## 9. Quick Token Summary (generic)

```css
:root {
  /* surfaces */
  --background:            #0E0E0E;
  --foreground:            #F4F4F4;
  --card:                  #151515;
  --card-foreground:       #F4F4F4;
  --popover:               #111111;
  --secondary:             #202020;
  --secondary-foreground:  #EDEDED;
  --muted:                 #1B1B1B;
  --muted-foreground:      rgba(255,255,255,.62);
  --accent:                #2C2C2C;   /* gray, not a hue */
  --accent-foreground:     #FFFFFF;
  --footer:                #191919;

  /* line + focus */
  --border:                #2A2A2A;
  --input:                 #2A2A2A;
  --ring:                  rgba(255,255,255,.64);
  --destructive:           #EF4444;

  /* button */
  --primary:               #F4F4F4;
  --primary-foreground:    #0B0B0B;

  /* text opacity ladder on dark */
  --t-90: rgba(255,255,255,.90);
  --t-70: rgba(255,255,255,.70);
  --t-62: rgba(255,255,255,.62);
  --t-50: rgba(255,255,255,.50);
  --t-45: rgba(255,255,255,.45);
  --t-30: rgba(255,255,255,.30);
  --t-25: rgba(255,255,255,.25);
  --t-12: rgba(255,255,255,.12);

  /* terminal + charts */
  --term-green: #85ED75;   /* the $ prompt — the only accent a visitor sees */
  --chart-1: #85ED75; --chart-2: #F3BC56; --chart-3: #8B7CF6;
  --chart-4: #38BDF8; --chart-5: #FB7185;

  /* type */
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "ABC Favorit Mono", "Geist Mono", ui-monospace, monospace;
  --font-code:    "Geist Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* geometry */
  --radius:       0px;   /* everything is square */
  --container:    1280px;
  --gutter:       24px;
  --space-unit:   8px;   /* 4 8 12 16 24 32 48 64 96 */
  --btn-height:   36px;
}
```