---
name: Shopify
description: "An excellent example of a modern, premium SaaS design that uses a dark theme to project authority and focus, while using a single vibrant accent to guide user attention."
version: alpha

colors:
  background: "#02090a"
  primary: "#ffffff"
  secondary: "#a1a1aa"
  tertiary: "#36f4a4"
  neutral: "#99b3ad"
  bg-soft: "#041e18"
  line: "rgba(255, 255, 255, 0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 80px
    lineHeight: 0.95
    fontWeight: 500
    letterSpacing: "-0.03em"
  h2:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 420
    letterSpacing: "-0.01em"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "normal"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

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

---

## Overview

A premium, modern SaaS platform that empowers entrepreneurs to build and scale their businesses globally.

*A high-end, empowering toolkit for modern creators and businesses.*

## Colors

High contrast with a vibrant, energetic accent to drive conversion and highlight key actions.

- **Background (`#02090a`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`#a1a1aa`)** — uses `ink-soft` token
- **Accent (`#36f4a4`)** — uses `accent` token
- **Muted (`#99b3ad`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.1)`)** — uses `line` token

## Typography

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

## Layout

Full-width dark hero sections transitioning to structured content grids below.

*Rhythm:* Consistent 4px base grid with generous padding (90px) for content containers.

## Elevation & Depth

- 0px 20px 25px -5px rgba(0, 0, 0, 0.1)
- 0px 8px 10px -6px rgba(0, 0, 0, 0.1)
- Borders: Subtle 1px borders (rgba(255, 255, 255, 0.1)) for cards and dividers.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Primary filled (white bg, dark text), secondary outlined (white border, white text) and ghost styles.
- **card:** Dark, translucent cards with subtle borders for feature highlights.
- **chip:** Minimal tags for statuses like 'Paid' or 'Unfulfilled'.
- **input:** Clean text input with a prominent green accent button.
- **hero:** Full-width, cinematic imagery with large typography overlay and clear call-to-actions.

## Do's and Don'ts

**Don't:**
- Don't use a busy or colorful background — screenshot shows dark, cinematic imagery that keeps focus on content.
- Don't use a serif font for headlines — screenshot shows a clean, modern grotesque sans-serif.
- Don't use muted, low-contrast colors for call-to-actions — screenshot shows high-contrast white buttons on dark backgrounds.
- Don't use excessive borders or drop shadows on cards — screenshot shows subtle, minimal borders.
- Don't use a small, cramped layout — screenshot shows generous padding (90px) and wide content containers.
- Don't use a primary accent color that is not vibrant — screenshot shows a high-chroma green (#36f4a4) used sparingly for focus.

---

## System Prompt (paste into AI agent)

```
This is a premium SaaS e-commerce platform design. The visual DNA is characterized by a very dark, near-black background (#02090a) and clean white typography, creating high contrast and a premium feel. A vibrant green accent color (#36f4a4) is used sparingly for key interactive elements like AI prompts and status tags. The typography relies on clean grotesque and humanist sans-serif categories, with large, bold display text for hero sections. Critical constraints: never use serif fonts or bright, multi-colored backgrounds; maintain a 4px base grid for spacing; and ensure all call-to-actions remain high-contrast and clearly visible against the dark canvas.
```