---
title: "Stellar design system"
variant: extended
source: https://www.stellar.work/
captured_at: 2026-10-12
theme: dark
industry: design
generator: Design DNA (https://four.wiralomi.com/style/stellar-work)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Stellar · Design System

> A dark canvas for fast, considered design

**Theme:** dark · **Industry:** design · **Source:** https://www.stellar.work/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Stellar presents a premium design-sprint service through an expansive black canvas, restrained type, and vivid portfolio imagery. Rounded project cards, repeated purple calls to action, and generous section spacing make the long homepage feel like a polished creative showcase.

## North star

Let the black canvas and generous breathing room frame vivid work imagery, while purple appears chiefly as the action signal.

## Overview

Build the page around a near-continuous #000000 canvas, using #171718 for card bodies and the footer rather than introducing broad contrasting bands. Keep text mostly white or soft near-white, with #888888 for supporting copy and quiet links; reserve #6a48f2 for the primary sprint actions and small emphasis marks. Neue Montreal gives the page its clean, contemporary voice: large, light-weight centered hero typography contrasts with compact, slightly tracked body and navigation text. The layout alternates centered statements with wide, image-led showcases and two-column service explanations, while maintaining a spacious vertical cadence. Portfolio work, designer portraits, interface mockups, and a diamond visual provide the color and texture, so their imagery should remain distinct from the restrained brand palette. Cards use subtle dark boundaries and modest rounding; avoid heavy shadows or decorative chrome. The closing CTA adds a vivid purple gradient field before the subdued footer.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Pitch Black | `#000000` | `--color-pitch-black` | brand | Primary page canvas across the hero and almost every content section. |
| Graphite Panel | `#171718` | `--color-graphite-panel` | surface | Designer and project card bodies, subtle borders, and the footer surface. |
| Quiet Gray | `#888888` | `--color-quiet-gray` | semantic | Supporting paragraphs, card captions, and low-emphasis login links. |
| Sprint Violet | `#6a48f2` | `--color-sprint-violet` | accent | Primary sprint buttons and small purple emphasis details. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Hero and section headings, navigation, and text on violet buttons. |
| Soft Chalk | `#f3f3f3` | `--color-soft-chalk` | neutral | Near-white heading and navigation text; use as a restrained text tone. |
| Pale Silver | `#e9e9e9` | `--color-pale-silver` | neutral | Muted light text, including the secondary dark button label. |

### Semantic aliases

`--color-canvas` → `#000000` (Pitch Black) · `--color-surface` → `#171718` (Graphite Panel) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#888888` (Quiet Gray) · `--color-border` → `#171718` (Graphite Panel) · `--color-accent` → `#6a48f2` (Sprint Violet) · `--color-on-accent` → `#ffffff` (Clean White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#171718` | 17.92:1 | AAA |
| `#888888` | `#000000` | 5.92:1 | AA |
| `#888888` | `#171718` | 5.05:1 | AA |
| `#6a48f2` | `#000000` | 3.82:1 | AA-large |
| `#6a48f2` | `#171718` | 3.26:1 | AA-large |

### Gradients

- `linear-gradient(rgb(0, 0, 0), rgba(255, 255, 255, 0) 25%), url("https://cdn.prod.website-files.com/62e845231c7bf476803995ba/644958768fa6738f092b41bb_COMP_gradient%20large.jpg")`
- `linear-gradient(7deg, rgb(106, 72, 242) 20%, rgb(252, 206, 238))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Montreal | `--font-body` | webfont | 400, 500 | All measured display, heading, body, caption, button, and navigation text. | Inter |

- **Neue Montreal:** Use regular weights for most copy and medium for select small headings; headings are large and light, while body and nav use subtle positive tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.473, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 104px | 400 | 1.1 | -0.02em | — | Neue Montreal | Oversized display statements and prominent hero messaging. |
| h1 | 72px | 400 | 1.1 | -0.01em | — | Neue Montreal | Primary hero headline and major page titles. |
| h2 | 70.5px | 400 | 1.1 | -0.01em | — | Neue Montreal | Large section headings, including service and process sections. |
| h3 | 22px | 500 | 1.5 | 0.025em | — | Neue Montreal | Compact emphasized headings within cards or content groups. |
| h4 | 21px | 400 | 1.5 | 0.025em | — | Neue Montreal | Secondary card and supporting section headings. |
| body | 15px | 400 | 1.5 | 0.035em | — | Neue Montreal | Explanatory paragraphs and standard page copy. |
| caption | 14px | 400 | 1.5 | 0.03em | — | Neue Montreal | Project credits, designer labels, and small supporting details. |
| button | 15px | 400 | 1.5 | 0.03em | — | Neue Montreal | Primary sprint actions and secondary calls to action. |
| nav | 15px | 400 | 1.2 | 0.035em | — | Neue Montreal | Header links and compact navigation labels. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 3, 5, 10, 12, 15, 16, 20, 24, 30, 32, 50, 58, 64, 158, 200 px.
- Section rhythm 200px · element gap 20px · card padding 20px · max content width 1325px.

Use a spacious, vertically scrolling composition with content constrained to the measured 1325px maximum width. The hero is centered; service sections alternate image and text placement, while portfolio and designer showcases use multi-column card rows. Keep the four-column how-it-works sequence visually distinct. Section spacing is notably generous, with a measured 200px section gap; internal groupings remain tighter and card padding is measured at 20px. The overall density is low, even where image grids create visual activity.

## Shape & elevation

- Radius: button `9999px` · input `6px` · card `6px` · xs `6px` · sm `10px` · pill `9999px`
- Shadow `md` (other): `rgb(255, 219, 0) 0px 0px 16px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The design is predominantly flat: black canvas, dark card surfaces, and subtle borders do the structural work. Cards use a measured 6px radius, with no recurring shadow treatment. Layered mockups and media create depth inside image areas; the closing CTA uses a purple-to-pink gradient field rather than elevated panels.

## Imagery

Use vivid client work, designer portraits, website mockups, and product-branding images as the main source of color. Frame work in horizontal rounded cards with dark caption strips and restrained metadata. Service imagery can appear as layered device or brand presentations against black. The process row uses video or interface stills; the diamond visual is illustrative content, not a brand color cue.

## Components

### Header navigation

Minimal white brand mark at left, compact navigation at right, and a violet reserve-sprint action.

### Hero

Centered oversized light headline on black with a short, muted two-line supporting statement.

### Work carousel cards

Rounded image-led project cards with dark caption areas, small creator metadata, and horizontally browsable presentation.

### Designer cards

Dense portrait tiles on dark surfaces, with subdued names and specialties beneath each image.

### Sprint feature split

Alternating image-and-copy service sections, compact benefit lists, and pill-shaped violet sprint actions.

### Process cards

Four sequential visual cards with media, a purple numbered marker, and a concise step label.

### Footer form

Three-column dark footer for course signup, links, and newsletter; uses a dark input and compact secondary action.

### Measured component styles

- **Primary button** (“Start a brand sprint”): background #6a48f2 · text #ffffff · border 1px solid · radius 50px · padding 10px 24px · 400 19px Neue Montreal
- **Secondary button** (“Learn More”): background #2c2c2e · text #e9e9e9 · radius 6px · padding 16px 20px · 400 14px Neue Montreal
- **Link** (“Login”): transparent background · text #888888 · radius 0px · padding 5px 0px · 400 14px Neue Montreal
- **Input**: background #2c2c2e · text #f3f3f3 · border 1px solid #2c2c2e · radius 6px · padding 0px 12px · 400 14px Neue Montreal
- **Card** (“Titus Brand Designer”): background #171718 · text #888888 · border 1px solid #171718 · radius 6px · padding 20px · 400 16px Neue Montreal
- **Navigation item** (“Tools for designers Reserve your sprint”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Neue Montreal

## Do

- Keep the main canvas consistently black.
- Use violet for primary sprint actions.
- Pair bold work imagery with quiet interface chrome.
- Preserve generous vertical gaps between major sections.
- Use muted gray for secondary copy and metadata.
- Keep card rounding subtle and consistent.

## Don't

- Do not add broad light-colored section backgrounds.
- Do not use violet as a dominant page background outside the closing CTA treatment.
- Do not let supporting copy compete with the hero headline.
- Do not add heavy shadows or ornate borders.
- Do not treat colors inside portfolio imagery as brand palette colors.
- Do not compress the page into a dense dashboard layout.

## Agent prompt

Create a design-sprint agency page in Stellar’s visual style. Use Pitch Black (#000000) as the near-continuous canvas and Graphite Panel (#171718) for cards and footer surfaces. Set headings in Neue Montreal or a close Inter substitute, with large light-weight display text and modestly tracked compact copy. Use Clean White (#ffffff) and Soft Chalk (#f3f3f3) for prominent text, Quiet Gray (#888888) for supporting copy, and Sprint Violet (#6a48f2) for primary actions. Build a spacious hero, image-led project cards, alternating service feature splits, and a four-step process row. Let real work imagery supply the color; use restrained rounded corners and subtle dark boundaries. Keep the layout wide, breathable, and mostly flat, then finish with a vivid gradient CTA and understated dark footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy on a black canvas. | Clear service promise, Supporting value proposition | Oversized light heading, Muted centered copy |
| 2 | gallery | Wide horizontal carousel of image-led work cards. | Browseable project examples, Card-level creator details | Rounded media cards, Dark caption strips |
| 3 | team | Centered introduction above a broad, multi-column designer grid. | Meet the creative team, Scan names and specialties | Portrait tiles, Compact dark cards |
| 4 | feature-split | Single-row image and text split with copy aligned to the start. | Service overview, Benefit checklist, Primary sprint action | Brand presentation visual, Violet pill CTA |
| 5 | feature-split | Two-column service section with copy and website mockup. | Service overview, Deliverables checklist, Primary sprint action | Layered website imagery, Violet pill CTA |
| 6 | gallery | Left-aligned introduction above a wide, browsable project-card row. | Category tabs, Carousel navigation | Project thumbnails, Dark caption panels |
| 7 | feature-split | Two-column split pairing a diamond visual with explanatory copy. | Explain the sprint model, Reserve-sprint action | Illustrative media, Violet action button |
| 8 | how-it-works | Left-aligned heading above four sequential media cards. | Four-step progression, Numbered process | Video or interface stills, Purple step markers |
| 9 | cta | Centered headline and action over a wide gradient-backed section. | Conversion-focused close, Reserve sprint | Purple gradient field, Centered violet button |
| 10 | footer | Three-column footer band on a dark graphite surface. | Course waitlist, Site navigation, Newsletter signup | Compact dark form fields, Subdued link text |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/stellar-work