Stellar operates in a midnight-black creative marketplace language: pure void canvas, dark elevated surfaces, oversized whisper-light display type, and a single vivid violet that fires only when an action matters. The entire interface reads like a portfolio on a closed gallery wall — everything recedes into shadow except the headline and the one CTA. Color is rationed: achromatic text and hairline borders do 95% of the work, and #6a48f2 appears as a precise electric punctuation on the reserve button, link hovers, and selected states. Components are minimal and borderless by default, gaining shape only through subtle #2c2c2 outlines and 6-10px corner softening. The design's defining choice is restraint — massive 70-104px type at weight 400 with tight negative tracking creates a hushed authority that does not compete with the photography of the designers themselves.
#6a48f2Primary CTA fill, active link, brand accent — the single chromatic note in an achromatic system, reserved for actions that convert; Accent gradient terminus — fades from Sprint Violet into soft pink to signal premium/highlight moments
#000000Page background, primary canvas — absolute black eliminates surface depth, making images and white type feel like they float
#171718Card surfaces, elevated panels, designer profile containers — one shade above void to separate without illuminating
#2c2c2eBorders on inputs, buttons, and nav dividers — the thinnest readable outline on near-black
#888888Muted body text, secondary labels, inactive borders — the only gray with enough chroma to carry information
#e9e9e9Helper text, subtle text accents on dark surfaces
#f3f3f3Headings, high-emphasis text — slightly off-white to avoid harshness against pure black
#ffffffPrimary headings, logo text, pure-contrast display copy
#ddddddNav text at rest — sits one step below pure white to create a de-emphasized nav hierarchy
104px · 400 · 1 · -2.08px trackingThe quick brown fox jumps
72px · 400 · 1.1 · -1.44px trackingThe quick brown fox jumps
70px · 400 · 1.1The quick brown fox jumps
40px · 400 · 1.2 · -0.4px trackingThe quick brown fox jumps
22px · 500 · 1.43 · -0.22px trackingThe quick brown fox jumps
21px · 400 · 1.5The quick brown fox jumps
19px · 400 · 1.43 · -0.19px trackingThe quick brown fox jumps
18px · 500 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Single-family type system. Weight 400 carries the entire display scale up to 104px — the deliberate refusal of a bold weight is the signature. Weight 500 activates only on small uppercase labels and button text. Negative letter-spacing tightens display sizes (-0.02em at 70-104px) while small uppercase eyebrow labels open to +0.035-0.040em. The 104px display at weight 400 is anti-conventional — most systems would set this at 700-800; here it whispers, letting the void around it carry the weight.
6px6px10px6px50px3px5px8px10px11px12px14px15px16px20px24px30px32px36px40px45px48px50px58px64px70px158px200px280pxPill-shaped, 50px border-radius, filled Sprint Violet (#6a48f2) background, white text. Neue Montreal 15-16px weight 500, padding 10px 20-24px. No border. The only fully chromatic control in the system — its scarcity makes it irresistible.
No background, no border. Neue Montreal 15px weight 400 in Platinum (#dddddd). On hover: color shifts to Paper (#ffffff). Horizontal row, 16px gap between items.
Neue Montreal weight 400 at 70-104px, line-height 1.0-1.1, letter-spacing -0.02em. White (#ffffff) or Bone (#f3f3f3). Never bold — the scale itself carries weight, not the stroke.
10px border-radius, Obsidian (#171718) surface on Void (#000000) canvas. 20px internal padding. Top half: full-bleed designer photo. Bottom: name (15-16px weight 500 white), role label (15px weight 400 Ash #888888). No border, no shadow — image contrast against black does all the visual work.
6px border-radius, Obsidian (#171718) background. Contains a centered project mockup/browser image, 1px Graphite (#2c2c2e) hairline divider below image, then designer attribution row (avatar + name + role). A 'Sprint with me →' ghost button anchors the bottom-right.
1px Graphite (#2c2c2e) border, 6px border-radius, transparent background, 20px vertical padding. Placeholder text in Ash (#888888) at 15px weight 400. Focus state: border shifts to Sprint Violet (#6a48f2).
Neue Montreal 12-14px weight 500, uppercase, letter-spacing +0.035 to +0.040em, Ash (#888888) color. Used above section titles or inline as metadata.
Neue Montreal 18-19px weight 400, line-height 1.43, Ash (#888888) color. Sits one contrast level below the headline — lets the display type own the page.
Full-bleed photography or browser mockup, 6-10px border-radius, no border, no padding around the image. Image quality and scale do the design work — no overlay text, no gradients on the image itself.
No background, 50px border-radius (pill hover state). 15-16px weight 400 white text. Hover: text shifts to Sprint Violet (#6a48f2) or gains an arrow indicator.
Transparent over Void (#000000), no border-bottom, no background fill. Left: Stellar sparkle logo + wordmark in white. Right: nav links (15px weight 400 Platinum #dddddd) then a Sprint Violet pill CTA. Vertical padding ~20px, full-bleed width, content max-width 1200px centered.
Display headline (70-72px weight 400 white), 20px gap, subtext paragraph (18-19px Ash #888888). Centered or left-aligned depending on section rhythm. No background, no divider — the void itself separates sections.
#000000Page background, hero canvas, section dividers
#171718Designer profile cards, elevated content blocks
#2c2c2Input fields, outlined controls, nav borders
#6a48f2Action surfaces — the only chromatic layer
No box-shadows. Depth is achieved through surface contrast alone: pure black void (#000000) for canvas, Obsidian (#171718) for cards, Graphite (#2c2c2e) for outlined controls. The single detected shadow (rgb(255,219,0) 0px 0px 16px) is a decorative yellow glow, not elevation — used sparingly as a spotlight effect on select imagery. This shadowless approach keeps the gallery-wall feeling: cards sit ON the void, not ABOVE it.
Full-bleed dark canvas with content constrained to a 1200px max-width centered column. The hero is a vertically generous void — oversized display headline (70-104px) left-aligned or centered, with subtext paragraph below and 80-100px of vertical breathing room before content begins. Sections flow as seamless dark bands separated only by whitespace; no alternating backgrounds, no dividers. The mid-page is a horizontally scrolling row of large project showcase cards (Sprint Showcase Cards) that break the vertical rhythm. Below that, a heading section introduces the designer grid: a multi-row card grid (3-4 columns visible in the screenshot) of Designer Profile Cards with uniform sizing. Navigation is a transparent top bar that disappears into the void. Density is spacious — the void is a feature, not wasted space.
Designer photography dominates: portrait crops, environmental shots, and project mockups fill card and hero real estate. Treatment is edge-to-edge within cards with 6-10px corners — no rounded-mask decoration, no overlays. The third screenshot reveals a horizontally scrolling row of designer profile cards, each with a single portrait or workspace photo at top. Imagery is desaturated or naturally muted to coexist with the dark void — no duotone filters, no color grading effects visible. Product mockups appear as browser-frame screenshots in the sprint showcase cards, centered with realistic screen content (blue CTAs, product UI). Iconography is minimal: a simple sparkle/asterisk mark for the logo, and thin-stroke arrow indicators on inline links.
**Quick Color Reference** - background: #000000 - text: #ffffff (display), #f3f3f3 (headings), #888888 (body/subtext) - border: #2c2c2e (outlined controls), #171718 (card edges) - accent/primary action: #6a48f2 (filled action) - surface: #171718 (Obsidian — cards and elevated panels) **3-5 Example Component Prompts** 1. *Hero Section*: Pure black (#000000) background. Display headline 'Your brand or website, delivered at lightspeed.' in Neue Montreal weight 400 at 72px, color #ffffff, letter-spacing -1.44px, line-height 1.1. Subtext paragraph below in #888888 at 19px weight 400, line-height 1.43, max-width 640px. 80px vertical padding above and below the text block. 2. *Primary CTA Button*: Pill shape, 50px border-radius, Sprint Violet (#6a48f2) background fill, no border. Text 'Reserve your sprint' in Neue Montreal 15px weight 500, color #ffffff, padding 10px 24px. No hover shadow — on hover, background brightens 10%. 3. *Designer Profile Card*: 10px border-radius, Obsidian (#171718) surface. 20px padding. Top: full-width portrait photo (no padding around it, image bleeds to card edges). Bottom: designer name in 16px weight 500 #ffffff, role label in 15px weight 400 #888888 directly below. No border, no shadow. 4. *Outlined Input Field*: 1px Graphite (#2c2c2e) border, 6px border-radius, transparent background. Placeholder text in #888888 at 15px weight 400. Vertical padding 20px, horizontal padding 16px. On focus: border color shifts to Sprint Violet (#6a48f2). 5. *Eyebrow Label*: Neue Montreal 14px weight 500, uppercase, letter-spacing +0.5px, color #888888. Used above section headlines or as metadata tags. No background, no border.
The system operates on a 95/5 color budget: 95% achromatic (#000000, #171718, #2c2c2e, #888888, #ffffff, #f3f3f3), 5% chromatic (#6a48f2). Violet appears only on the primary CTA button and the focused/active state of interactive elements. This rationing is not minimalism for its own sake — it is a conversion strategy. When a user sees Sprint Violet, it means 'this is the action.' If you find yourself wanting to add a second brand color, replace an existing usage with the neutral equivalent first.
Same dark-mode void aesthetic with oversized whisper-weight display type and a single chromatic accent (Linear's purple vs Stellar's violet) rationed to primary actions only
Identical pure-black canvas philosophy with no elevation shadows, large left-aligned display headlines, and achromatic UI with color appearing only on CTAs and status indicators
Same gallery-wall dark UI with restrained palette, pill-shaped primary CTAs, and designer-grade typography that lets content breathe against the void
Similar premium dark-mode treatment with oversized display type, minimal chrome, and a single vivid accent color reserved for moments of interaction
Use the design exports or connect Musterlab to your AI.
