---
name: Stellar Work
description: "This site is an excellent example of premium, dark-themed agency design that uses extreme typographic scale and color restraint to create a high-impact, elite aesthetic."
version: alpha

colors:
  background: "#171718"
  primary: "#FFFFFF"
  secondary: "#888888"
  tertiary: "#6A48F2"
  neutral: "#888888"
  bg-soft: "#2C2C2E"
  muted-soft: "#F3F3F3"
  line: "rgba(255, 255, 255, 0.2)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2px"
  display-lg:
    fontFamily: grotesque-sans
    fontSize: 96px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.32px"

rounded:
  sm: 4px
  md: 10px
  lg: 16px
  pill: 50px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Elite design services delivered with agency speed.

*A high-end design boutique offering speed and exclusivity.*

## Colors

Dark, neutral foundation with a single electric purple accent for primary actions.

- **Background (`#171718`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#888888`)** — uses `ink-soft` token
- **Accent (`#6A48F2`)** — uses `accent` token
- **Muted (`#888888`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.2)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- Tight tracking on large display text
- Generous vertical spacing between sections

## Layout

Centered, wide container with generous horizontal padding and tight vertical alignment in the hero.

*Rhythm:* Flexible grid with large vertical padding (128-280px) to create breathing room.

## Elevation & Depth

- 0px 0px 16px 0px rgba(255, 219, 0, 0.5)
- Borders: Subtle 1px borders in rgba(255,255,255,0.2) for faint separation.

## Shapes

- `sm`: 4px
- `md`: 10px
- `lg`: 16px
- `pill`: 50px

## Components

- **button:** Pill-shaped (border-radius: 50px) with solid accent fill and white text.
- **card:** Dark background cards (rgba(23,23,24,1.0)) with subtle borders and rounded corners.
- **chip:** Pill-shaped tags for filtering (e.g., 'Branding', 'Web Design').
- **hero:** Massive, tightly tracked display type on a dark background with minimal imagery.

## Do's and Don'ts

**Don't:**
- don't use bright or pastel backgrounds — screenshot shows deep dark grey (#171718) instead
- don't use decorative or handwritten fonts — screenshot shows a clean grotesque-sans instead
- don't use multiple high-chroma accent colors — screenshot shows a single dominant purple (#6A48F2) instead
- don't use small, cramped display typography — screenshot shows massive, tightly tracked headlines instead
- don't use sharp, square corners on buttons — screenshot shows pill-shaped (50px radius) buttons instead
- don't use busy, cluttered layouts — screenshot shows generous whitespace and a clean grid instead

---

## System Prompt (paste into AI agent)

```
Stellar Work is a premium, high-speed design agency landing page characterized by a dark, moody aesthetic and massive, tightly tracked grotesque-sans typography. The color palette is strictly monochrome (dark grey #171718 background, white #FFFFFF ink, #888888 muted) with a single vibrant electric purple (#6A48F2) used exclusively for primary call-to-action buttons and accents. The layout is spacious and centered, with generous vertical padding and a 12-column grid. Avoid light backgrounds, decorative serif fonts, multiple bright colors, or cluttered, information-dense sections. Keep interactions smooth with 0.3s transitions and maintain a confident, direct voice in all copy.
```