# Stellar Work · Design system migration spec

> Source: https://www.stellar.work  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

Stellar Work operates like a high-end design boutique, prioritizing speed and exclusivity over all else. The design system is engineered to feel both elite and efficient, a precise tool for delivering premium work at agency pace.

**One-liner:** Elite design services delivered with agency speed.
**Keywords:** fast · elite · design · sprint · senior-level
**Analogy:** A high-end design boutique offering speed and exclusivity.

## 2. Color

The color system is one of severe restraint. A dark, neutral foundation of deep grey and white is pierced by a single, vibrant electric purple accent reserved for primary actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#171718` | main background |
| `--bg-soft` | `#2C2C2E` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#888888` | secondary text |
| `--muted` | `#888888` | placeholder |
| `--muted-soft` | `#F3F3F3` | weak hint |
| `--accent` | `#6A48F2` | single accent |
| `--line` | `rgba(255, 255, 255, 0.2)` | divider |

**Color principle:** Dark, neutral foundation with a single electric purple accent for primary actions.

The principle is strict: one accent color, maximum impact.

## 3. Typography

Typography is the system's loudest voice. It employs a clean, grotesque-sans category, deployed at a massive scale with tight tracking on display text to convey confidence and immediacy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | -2px | Hero headline |
| display-lg | 96px | 1.0 | 400 | -2px | Section headline |
| body | 16px | 1.5 | 400 | 0.32px | General text |

**Type rules:**
- Tight tracking on large display text
- Generous vertical spacing between sections

## 4. Spacing

Rhythm is established through vast vertical padding, creating deliberate pauses between content sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 / 200 / 280 px
- **Rhythm:** Flexible grid with large vertical padding (128-280px) to create breathing room.

## 5. Surfaces

Depth is communicated through subtle light, not heavy elevation. Faint, low-opacity borders provide separation while a specific golden glow shadow hints at interactive potential.

- **Radius:** sm 4px · md 10px · lg 16px · pill 50px
- **Shadows:**
  - 0px 0px 16px 0px rgba(255, 219, 0, 0.5)
- **Borders:** Subtle 1px borders in rgba(255,255,255,0.2) for faint separation.

## 6. Layout

The layout skeleton is a centered, wide container. It uses generous horizontal padding to frame content while maintaining tight vertical alignment within the hero, focusing attention on the massive headline.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is a subtle, confirming gesture, not a narrative. All interactive elements share a consistent 0.3-second transition, with content revealed through polished fade-ins.

- **Durations:** micro 220ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions on all interactive elements (0.3s)
  - Subtle fade-ins for content reveal

- **Hover:** Subtle background or opacity shift on buttons and interactive elements.
- **Click:** Immediate visual feedback with slight scale or opacity change.
- **Transition:** All properties transitioned over 0.3s for a polished feel.
- **Keyboard:** Standard focus rings, likely matching the accent color.

## 8. Voice & Don'ts

The editorial voice is confident and direct, using short, punchy statements that lead with value. Copy is action-oriented, stripped of humility and corporate filler.

- **Tone:** Confident, direct, and premium.
- **Headline style:** Short, punchy, and value-driven statements.
- **CTA style:** Clear, action-oriented verbs like 'Reserve' or 'Start'.
- **Avoid:** Humble or overly polite language / Generic corporate jargon / Excessive exclamation marks / Long-winded explanations

### Don'ts
- ❌ 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

The system deliberately excludes decorative type, bright backgrounds, multiple accent colors, and cramped layouts.

## System Prompt (paste into AI tool)

```
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.
```