Skip to content
DesignMunkDesignMunk Submit a site

Stacked

stacked.com
Take home 90% of your earnings with the lowest fees.
Ecommerce Entertainment Next.js Homepage Inter owners
Share Visit site
stacked.com DESKTOP · 1440
Stacked

AI Breakdown

Design export

---
version: alpha
name: Stacked
description: Take home 90% of your earnings with the lowest fees.
colors:
  primary: "#f5f5f5"
  secondary: "#848484"
  tertiary: "#2eb865"
  neutral: "#0a0a0a"
  border: "#313131"
  brand-explosive-grey: "#c3c3c3"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: owners
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1
  headline-md:
    fontFamily: owners
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.01
  headline-sm:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.19
  headline-xs:
    fontFamily: Inter
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.19
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
rounded:
  sm: 8px
  md: 16px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 64px
  xl: 74px
components:
  button-primary:
    backgroundColor: "#ffffff"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 0px 12px
    height: 34px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 0px 12px
    height: 34px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Stacked: Dark Dashboard Hero With 90% Creator Split

## Overview

Stacked's UI is dark, data-driven, and conversion-oriented. It uses a single bright accent to imply growth and keeps everything else quiet: white type, muted labels, and crisp borders. Spacing is generous so dense, dashboard-like content never feels cramped. The tone is confident and utilitarian rather than playful, aimed at professional creators comparing platforms and ready to sign up.

## Colors

- **primary (#f5f5f5):** Primary text on dark surfaces; headings, body, and interactive text.
- **secondary (#848484):** Secondary copy, meta labels, chart axes, and subdued UI text.
- **tertiary (#2eb865):** Positive deltas, success chips, and data highlights that indicate growth.
- **neutral (#0a0a0a):** Global background and card surfaces in dark mode.
- **border (#313131):** Keylines separating cards, tables, and inputs in lieu of shadows.
- **brand-explosive-grey (#c3c3c3):** High-value neutral for subdued icons or de-emphasized text on dark.
- **surface ({colors.neutral}):** Alias of neutral; use for panels and cards.
- **on-surface ({colors.primary}):** Alias of primary; text color when placed on surfaces.

## Typography

- Owners is the display family for large headlines. It is custom-hosted (not Google), so agents should not assume they can load it. Viable substitutes with a similar compact, modern grotesk tone: Outfit (Google), Space Grotesk (Google), League Spartan (Google).
- Inter is the UI and supporting headline family. It is Google-hosted and safe to load. Body text uses body-md (14px/1.43, 400). Smaller section headlines use headline-sm (32px/1.19, 400) and headline-xs (21px/1.19, 400). Primary hero and section openers use headline-lg (72px/1, 500) and headline-md (48px/1.01, 500) in Owners or the listed substitutes when Owners is unavailable.

## Layout

The spacing scale is compact in the smalls (8/16/24px) and expansive at section level (64/74px). Build sections with clear vertical rhythm: 64–74px breaks between blocks, 16–24px gaps within cards and between elements in a group. Cards align to a simple multi-column grid; on desktop, four-up KPI cards read left-to-right with uniform widths. Content stays centered with generous side gutters to keep the dark canvas from feeling heavy.

## Elevation & Depth

Shadows are not used. Hierarchy is created with: 1) borders at #313131 for separation, 2) tonal shifts between #0A0A0A surfaces and #F5F5F5 type, and 3) whitespace from the spacing scale. Emphasis relies on size and contrast rather than elevation.

## Shapes

Corner radii are minimal and functional: 8px for interactive controls and small UI elements; 16px for cards and major panels. Use the larger 16px radius to signal containers or grouped data and keep buttons at 8px to remain compact and utilitarian.

## Components

- Button — Primary: white background (#FFFFFF), text #0A0A0A, 8px radius, 34px height, 0 12px padding. Use for primary CTAs like "Start earning".
- Button — Secondary: text #F5F5F5, 8px radius, 34px height, 0 12px padding; present as a ghost on dark surfaces. Pair beside the primary.
- Button — Link: text #F5F5F5, no radius; inline actions within copy.
- Card: background #0A0A0A, text #F5F5F5, 16px radius, 16px padding; add a #313131 border to separate adjacent cards.

### Top Navigation
- Layout: left-aligned logo, center links, right-aligned auth actions. Spacing sm (16px) between items.
- Colors: text #F5F5F5, hover underline via button-link. No shadows; bottom keyline optional at #313131.

### Hero with Dual CTAs
- Headline: headline-lg 72px/1, Owners 500; center-aligned.
- Subhead: body-md 14px Inter 400 in #848484.
- Actions: primary and secondary buttons side-by-side with 16px gap.

### KPI Stat Cards (4-up)
- Container: card with 16px radius and 16px padding; 1px border #313131.
- Labels: Inter 14px #848484; Values: headline-xs 21px #F5F5F5; Deltas in #2EB865.

### Revenue Chart Panel
- Full-width card with 16px radius and padding 16–24px.
- Axes and legends in #848484; positive series bars or markers in #2EB865.

### Sales Feed List
- Rows separated by #313131 keylines within a card container.
- Member name: #F5F5F5; meta (time, type): #848484; amounts can use #F5F5F5 with bold for emphasis.

### Creator Logos Rail
- Grid or marquee of avatar+label tiles.
- Use #C3C3C3 for subdued brand labels; keep tile corners at 16px if carded.

### Comparison Table
- Table header and cells sit on the dark surface with #313131 grid lines.
- Feature names: Inter 14px #F5F5F5; platform columns may use checkmarks or values, keeping accents minimal; avoid new colors beyond #2EB865 for positives.

### FAQ Accordion
- Each item is a border-separated block (1px #313131) with 16px vertical padding.
- Question: Inter 21–32px depending on density; Answer: body-md 14px #F5F5F5 with #848484 for minor notes.

## Do's and Don'ts

- Do reserve #2EB865 for success states, upticks, and positive data; keep it out of primary CTAs.
- Do use #313131 borders to separate dense content instead of adding shadows.
- Do keep buttons at 34px height with 8px radius to match the system's compact control size.
- Do set long-form copy in Inter 14px/1.43 and avoid using secondary gray (#848484) for extended paragraphs.
- Don't introduce additional accent colors in charts; if multiple series are required, use opacity or patterns with the existing palette.
- Don't round containers beyond 16px or mix light surfaces into the dark canvas; contrast should come from type, not backgrounds.

## Agent Prompt Guide

Quick color reference — Text: #F5F5F5, Background: #0A0A0A, Border: #313131, Accent: #2EB865.

1) Build a hero section on a dark canvas:
- Page background #0A0A0A. Center a container with max-width 960px.
- H1: "The platform where creators earn more" in Owners (or Outfit if unavailable), 72px, weight 500, line-height 1, color #F5F5F5.
- Subhead: Inter 14px/1.43, color #848484, 24px top margin.
- Actions row: 16px gap. Primary button 34px high, 0 12px padding, 8px radius, background #FFFFFF, text #0A0A0A. Secondary button 34px high, 0 12px padding, 8px radius, text #F5F5F5 on transparent, with a 1px border #313131.

2) Create a 4-card KPI row:
- Grid: 4 equal columns with 16px gaps.
- Each card: background #0A0A0A, 1px border #313131, 16px radius, 16px padding.
- Label: Inter 14px #848484. Value: Inter 21px #F5F5F5. Delta chip: Inter 14px #2EB865.

3) Comparison table block:
- Wrapper: 64px top and bottom margins.
- Table on #0A0A0A with 1px cell borders #313131.
- Left column feature names: Inter 14px #F5F5F5. Cells: Inter 14px #F5F5F5; use #2EB865 for positive marks only.

4) FAQ accordion:
- Stack items vertically with 1px separators #313131 and 16px vertical padding.
- Question: Inter 21px #F5F5F5. Answer: Inter 14px/1.43 #F5F5F5 with incidental notes in #848484. Icons or carets inherit #F5F5F5; focus outlines use #313131.

## Similar Brands

- Patreon — Also membership-focused; lighter palette and more marketing illustration where Stacked sticks to dark, data-forward UI.
- Ko-fi — Creator payouts and tipping; friendlier, pastel brand versus Stacked's restrained dark mode and dashboard hero.
- Gumroad — Simple commerce for creators; uses neutral grays but less emphasis on real-time analytics.
- Kajabi — All-in-one creator platform; heavier marketing sections and brighter brand color, while Stacked keeps a single accent and dashboard proof.

More like this

Browse Ecommerce →
wizcommerce.com
WizCommerce AI
WizCommerce
Built for Wholesale. Powered by AI.
Homepage · 1 day ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 2 days ago
rodeo-labs.com
Rodeo Adventure Labs Ecommerce
Rodeo Adventure Labs
Ride. Explore. Create.
Homepage · 3 days ago
auntfannies.com
Aunt Fannie’s Ecommerce
Aunt Fannie’s
Cleaning differently: no harsh chemicals, plant-based, pet-friendly goodness
Homepage · 3 days ago