---
version: alpha
name: Stellar
description: An ink-black gallery wall where oversized Neue Montreal sets the pace and one violet pill does the asking.
colors:
  on-surface-variant: "#DDDDDD"
  surface: "#000000"
  primary: "#6A48F2"
  on-surface: "#FFFFFF"
  surface-2: "#171718"
  surface-raised: "#2C2C2E"
  heading-white: "#F3F3F3"
  hairline-light: "#E9E9E9"
  muted-grey: "#888888"
  faint-grey: "#333333"
  violet-light: "#8864F2"
  signal-yellow: "#FFDB00"
typography:
  display:
    fontFamily: Neue Montreal
    fontSize: 104px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
  heading-xl:
    fontFamily: Neue Montreal
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0em
  heading-l:
    fontFamily: Neue Montreal
    fontSize: 70.4px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0em
  lead:
    fontFamily: Neue Montreal
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  subhead:
    fontFamily: Neue Montreal
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  body-large:
    fontFamily: Neue Montreal
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body:
    fontFamily: Neue Montreal
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  small:
    fontFamily: Neue Montreal
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  caption:
    fontFamily: Neue Montreal
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
rounded:
  small-button-chip: 4px
  input-secondary-button-card: 6px
  card: 10px
  pill-cta-outline-link: 50px
spacing:
  2xs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
---
# Stellar — Style Reference
> An ink-black gallery wall where oversized Neue Montreal sets the pace and one violet pill does the asking.

**Theme:** dark

Stellar is a design-sprint studio, and its site is staged like a portfolio hung in a blacked-out room: the canvas is pure `#000000`, the interface is nearly colorless, and every drop of chroma is spent by the work itself — saturated project thumbnails (orange fabric, enamel pins, editorial mockups) run full-bleed beneath the fold and do all the coloring. The one deliberate brand mark is an electric violet, `#6A48F2`, reserved almost exclusively for the primary CTA. Type is the loudest voice in the room: Neue Montreal is set at genuinely oversized display sizes (up to 104px) in an off-white `#F3F3F3`, so the headline reads like signage rather than copy. Supporting text drops to a low-contrast `#888888` grey, keeping the composition quiet enough that the imagery and the single purple button carry all the weight. A faint yellow glow (`#FFDB00`, used only as a soft blur shadow) is the sole warm accent — decoration, never a control.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas Black | `#000000` | `--color-canvas` | The page. Full-bleed pure black; also doubles as the hairline border on cards. |
| Surface | `#171718` | `--color-surface` | Card / panel fill — a barely-there lift off the canvas, near-invisible. |
| Surface Raised | `#2C2C2E` | `--color-surface-raised` | Inputs, secondary buttons, icon chips. The only "control" grey. |
| Heading White | `#F3F3F3` | `--color-heading` | Display and heading text. Off-white, softer than pure white — the primary reading color. |
| Pure White | `#FFFFFF` | `--color-white` | Reserved for CTA button labels on violet, and the wordmark. |
| Hairline Light | `#E9E9E9` | `--color-hairline` | Light-grey border on outline pill links; occasional bright text. |
| Link Grey | `#DDDDDD` | `--color-link` | Muted navigation / inline link text on dark. |
| Muted Grey | `#888888` | `--color-text-muted` | Subheads, captions, disabled icon glyphs. The workhorse secondary text. |
| Faint Grey | `#333333` | `--color-text-faint` | Lowest-contrast link/label; whispers, never shouts. |
| Stellar Violet | `#6A48F2` | `--color-violet` | THE brand color. Primary CTA fill only — never a background wash, never body text. |
| Violet Light | `#8864F2` | `--color-violet-light` | Hover / active link tint of the violet; a lighter step for interactive text. |
| Signal Yellow | `#FFDB00` | `--color-glow` | Editorial glow accent (soft blur shadow) only. Decoration — never a button, border, or text color. |

## Tokens — Typography
### Neue Montreal — the entire voice: display, headings, subheads, body, and UI, at every weight · `--font-display`
Pangram Pangram's Neue Montreal is a warm neo-grotesque, and Stellar runs it end to end — there is no second display face. Its personality shows most at scale: the site sets it as large as 104px for the hero, letting the wide, even grotesque letterforms read as signage. Weight stays restrained (mostly 400, occasionally 500), so size and color — not boldness — build the hierarchy.
- **Substitute:** Neue Haas Grotesk, Helvetica Now Display, Inter (also loaded on the site as a fallback/UI face)
- **Weights:** 400 (Regular — headings and body), 500 (Medium — light emphasis); 600 loaded but rarely surfaced
- **Sizes:** 104px, 72px, 70.4px (display) · 22px, 21px, 18px (lead/subhead) · 16px, 15px, 14px (body/UI/caption)
- **Line height:** Tight on display (~1.0–1.05); comfortable ~1.4–1.5 on body
- **Letter spacing:** Effectively none — the grotesque is designed to sit at its natural tracking; let display run at 0
- **Role:** One family, one voice. Hierarchy comes from dramatic size jumps and the color drop from `#F3F3F3` to `#888888`, not from switching typefaces or piling on weight.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 104px | 1.0 | 0 | `--text-display` |
| Heading XL | 72px | 1.05 | 0 | `--text-h1` |
| Heading L | 70.4px | 1.05 | 0 | `--text-h2` |
| Lead | 22px | 1.4 | 0 | `--text-lead` |
| Subhead | 21px | 1.45 | 0 | `--text-subhead` |
| Body Large | 18px | 1.5 | 0 | `--text-body-lg` |
| Body | 16px | 1.5 | 0 | `--text-body` |
| Small | 15px | 1.5 | 0 | `--text-sm` |
| Caption | 14px | 1.5 | 0 | `--text-caption` |

## Tokens — Spacing & Shapes
**Base unit:** 8px   **Density:** comfortable (generous vertical air around oversized type)

### 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 | 32px | `--spacing-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Small button / chip | 4px |
| Input / secondary button / card | 6px |
| Card (large) | 10px |
| Pill CTA / outline link | 50px |
| Icon button | 100% (circle) |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Signal Glow | `rgb(255, 219, 0) 0px 0px 16px 0px` | `--shadow-glow` |

Note: this is the *only* shadow in the system — a soft yellow bloom used as an editorial accent, not for elevation. Depth is otherwise carried by luminance steps, not shadow.

### Layout
- **Page max-width:** wide / near-full-bleed — the project gallery breaks the container edge-to-edge
- **Section gap:** generous — the hero occupies a full viewport of black before the gallery begins
- **Card padding:** minimal chrome; thumbnails fill their frame with 0 internal padding, rounded 10px
- **Element gap:** 8px base rhythm; nav items and CTA sit on a single top rail

## Components
### Primary CTA (Pill)
**Role:** The single most important action — "Reserve your sprint."
Violet `#6A48F2` fill, `#FFFFFF` label, fully rounded 50px pill, ~10px 24px padding, weight 400 at ~19px. This is the only element allowed to wear the brand violet. On a black page it is the sole point of color in the chrome, so it reads instantly.

### Small Button
**Role:** Compact / inline action.
Violet `#6A48F2` fill, `#FFFFFF` label, tight 4px radius, 10px 24px padding, 15px/400. A squared-off variant of the CTA for denser contexts.

### Secondary Button
**Role:** Lower-priority action alongside the violet CTA.
Fill `#2C2C2E`, text `#E9E9E9`, 6px radius, 16px 20px padding, 14px/400. No border — it sits as a raised grey slab against black.

### Icon Button
**Role:** Circular utility control.
Fill `#2C2C2E`, glyph `#888888`, `100%` radius (perfect circle), ~40px glyph, no border, 0 padding. Muted by default so it never competes with the CTA.

### Input
**Role:** Form field (subscribe / contact).
Fill `#2C2C2E`, text `#F3F3F3`, 6px radius, 0px 12px padding, 14px/400. Border matches the fill (`1px #2C2C2E`) so the field reads as a soft dark trough rather than an outlined box.

### Outline Pill Link
**Role:** Ghost / tertiary action styled as a bordered link.
Transparent fill, text `#E9E9E9`, `1px #E9E9E9` hairline border, 50px pill, 16px 32px padding, 15px/400. Echoes the CTA's pill geometry in grey — quieter, hollow.

### Nav Link
**Role:** Top-rail navigation ("Tools for designers").
Text `#DDDDDD` at 15px/400, no decoration, no background. Low-contrast on black so the wordmark and CTA lead the eye.

### Inline / Faint Link
**Role:** Lowest-emphasis inline link.
Text `#333333` at 16px/400. Deliberately near-invisible against black — used where a link should exist but not draw attention.

### Card
**Role:** Content / project panel.
Fill `#171718`, text `#888888`, 10px radius, `1px #000000` border (the black border makes edges vanish into the canvas). A whisper-quiet container that lets embedded imagery supply all the color.

### Gallery Thumbnail
**Role:** The chromatic heart of the page — full-bleed portfolio work.
Rounded 10px, 0 internal padding, image fills the frame. These saturated photographs (orange, deep green, editorial layouts) are where all the color lives; the surrounding UI stays monochrome to let them sing.

### Heading
**Role:** Display / section titles.
Neue Montreal, color `#F3F3F3`, weight 400, sizes 104px / 72px / 70.4px, tight line height, no letter spacing. Scale alone builds hierarchy.

## Do's and Don'ts
### Do
- Keep the canvas pure `#000000` and let saturated imagery be the only color on the page.
- Spend the violet `#6A48F2` on the primary CTA and almost nothing else.
- Set headings genuinely large (72–104px) in Neue Montreal `#F3F3F3` — size is the hierarchy.
- Drop supporting copy to `#888888` so it recedes behind the headline and the work.
- Build depth from luminance steps (`#000000` → `#171718` → `#2C2C2E`), not shadows.
- Reuse the 50px pill geometry for both the violet CTA and the grey outline link.

### Don't
- Don't paint surfaces or backgrounds violet — `#6A48F2` is a CTA fill, full stop.
- Don't use the yellow `#FFDB00` as anything but a soft decorative glow; it is never a button, border, or text color.
- Don't introduce a second display typeface — Neue Montreal carries everything.
- Don't lean on weight for emphasis; stay at 400/500 and let size and color do the work.
- Don't add drop shadows for elevation — the system uses exactly one glow, for accent only.
- Don't raise body text above `#888888` on secondary copy; low contrast is intentional.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#000000` | The page. Pure black, full-bleed; also the "invisible" card border. |
| 1 | Surface | `#171718` | Cards and panels — a near-imperceptible lift off the canvas. |
| 2 | Surface Raised | `#2C2C2E` | Inputs, secondary/icon buttons — the interactive grey. |

## Elevation
Depth is conveyed almost entirely by luminance, not shadow. Surfaces step upward in tiny increments (`#000000` → `#171718` → `#2C2C2E`), and cards even use a `1px #000000` border so their edges dissolve into the canvas rather than casting a shadow. The single shadow in the system — a yellow `rgb(255,219,0)` bloom — is an editorial accent, not an elevation cue. The result is a flat, gallery-like plane where objects feel *placed* rather than *floating*.

## Imagery
Imagery is the entire point. Below the black hero, full-bleed rounded-10px thumbnails of the studio's project work run edge-to-edge — richly saturated photography (orange textiles with enamel pins, deep-green screen mockups, editorial print spreads). The UI is deliberately drained of color so these images provide 100% of the chroma. Direction: high-contrast, warm-leaning, real photographed objects and screens over illustration; let the work be loud so the interface can be silent.

## Layout
Full-bleed and near-full-width. A single top rail carries the pixel-dot wordmark on the left and a "Tools for designers" link plus the violet "Reserve your sprint" pill on the right. The hero is a full viewport of black with the oversized headline centered high and a two-line muted subhead beneath it, then a large empty gutter before the gallery breaks the container edge-to-edge. Rhythm is: enormous type → breathing black → wall of color. Nav is minimal (one link + one CTA); the composition trusts scale and contrast over dense navigation.

## Typography Signature
Stellar runs a one-font system and extracts a two-mode voice from it purely through size and luminance. **Mode one** is signage: Neue Montreal at 72–104px in `#F3F3F3`, tight line height, zero tracking — the headline behaves like an installation title, not a paragraph. **Mode two** is the whisper: the same face at 15–21px dropped to `#888888`, so subheads sit far back in the visual plane. The move works because Neue Montreal's even, wide grotesque proportions hold up at billboard scale without needing a separate display cut, and because the studio refuses to add weight — everything is 400/500, so the *only* variables are size and grey. It's a disciplined, confident system: no bold, no italics, no second face.

## Agent Prompt Guide
## Quick Color Reference
- background: `#000000` / text: `#F3F3F3` (heading), `#888888` (muted body) / surface: `#171718` (card), `#2C2C2E` (raised) / border: `#000000` (card hairline), `#E9E9E9` (outline pill) / accent: `#FFDB00` (glow only) / primary action: `#6A48F2` (violet CTA, white label)

## Example Component Prompts
1. **Primary CTA**: Build a fully-rounded pill button (50px radius), fill `#6A48F2`, label `#FFFFFF` in Neue Montreal 400 at 19px, padding 10px 24px, no shadow. Sits on a pure `#000000` page as the only colored element.
2. **Oversized Hero Heading**: Render a two-line hero headline in Neue Montreal 400 at 104px, color `#F3F3F3`, line height 1.0, zero letter spacing, on a `#000000` background, with a muted `#888888` two-line subhead at 21px beneath it.
3. **Secondary Button**: Grey slab button, fill `#2C2C2E`, text `#E9E9E9` at 14px/400, 6px radius, padding 16px 20px, no border, no shadow — for actions ranking below the violet CTA.
4. **Project Card**: Card with fill `#171718`, `1px #000000` border, 10px radius, holding a full-bleed saturated project photograph with 0 internal padding; caption text `#888888` at 15px.
5. **Dark Input**: Form field, fill `#2C2C2E`, text `#F3F3F3`, border `1px #2C2C2E` (matches fill), 6px radius, padding 0px 12px, 14px — reads as a soft dark trough.

## Similar Brands
- **Cuberto** — near-black studio portfolio where oversized grotesque type and full-bleed saturated work carry the whole page.
- **Locomotive** — dark, gallery-first agency site that lets project imagery be the only color against a monochrome shell.
- **Pangram Pangram** — the foundry behind Neue Montreal; the same confident, tracking-neutral grotesque display language.
- **Basement Studio** — black-canvas, single-accent, big-type studio aesthetic with restrained chrome.
- **Vercel** — pure-black background, off-white type, one saturated accent, and a discipline that keeps the interface nearly colorless.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #000000;
  --color-surface: #171718;
  --color-surface-raised: #2C2C2E;
  --color-heading: #F3F3F3;
  --color-white: #FFFFFF;
  --color-hairline: #E9E9E9;
  --color-link: #DDDDDD;
  --color-text-muted: #888888;
  --color-text-faint: #333333;
  --color-violet: #6A48F2;
  --color-violet-light: #8864F2;
  --color-glow: #FFDB00;

  /* Typography — Families */
  --font-display: 'Neue Montreal', 'Neue Haas Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-display: 104px;
  --text-h1: 72px;
  --text-h2: 70.4px;
  --text-lead: 22px;
  --text-subhead: 21px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-sm: 15px;
  --text-caption: 14px;
  --leading-display: 1.0;
  --leading-heading: 1.05;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-card: 10px;
  --radius-pill: 50px;
  --radius-circle: 100%;

  /* Shadow */
  --shadow-glow: 0px 0px 16px 0px rgb(255, 219, 0);
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-canvas: #000000;
  --color-surface: #171718;
  --color-surface-raised: #2C2C2E;
  --color-heading: #F3F3F3;
  --color-white: #FFFFFF;
  --color-hairline: #E9E9E9;
  --color-link: #DDDDDD;
  --color-text-muted: #888888;
  --color-text-faint: #333333;
  --color-violet: #6A48F2;
  --color-violet-light: #8864F2;
  --color-glow: #FFDB00;

  /* Typography — Families */
  --font-display: 'Neue Montreal', 'Neue Haas Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-display: 104px;
  --text-h1: 72px;
  --text-h2: 70.4px;
  --text-lead: 22px;
  --text-subhead: 21px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-sm: 15px;
  --text-caption: 14px;
  --leading-display: 1.0;
  --leading-heading: 1.05;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-card: 10px;
  --radius-pill: 50px;
  --radius-circle: 100%;

  /* Shadow */
  --shadow-glow: 0px 0px 16px 0px rgb(255, 219, 0);
}
```