01 — Colors

## Color Palette

A near-monochrome system with mint and pistachio greens reserved for the transactional track. Black is canonical; greens signal commerce.

### Brand & Accent

Aloe
#c1fbd4
Featured pricing tier and growth accent.
Pistachio
#d4f9e0
Wide section band on the light track.

### Surface

Canvas Night
#000000
Cinematic hero, feature pages, footer.
Night Elevated
#0a0a0a
Cards on cinematic surfaces.
Surface Elev Dark
#1e2c31
Teal-shifted dark surface accent.
Canvas Light
#ffffff
Pricing, signup, comparison.
Canvas Cream
#fbfbf5
Editorial off-white on transactional.
Hairline Light
#e4e4e7
Card borders, table dividers.

### Shade Ladder

Shade 30
#d4d4d8
Shade 40
#a1a1aa
Shade 50
#71717a
Shade 60
#52525b
Shade 70
#3f3f46

02 — Typography

## Typography Scale

Neue Haas Grotesk Display at thin weights (330) for every display tier. Inter Variable at 420–550 for UI body. ss03 stylistic set enabled across both.

display-xxl96 / 330 / 1.0 / 2.4px
Build it
display-xl70 / 330 / 1.0
Sell more places
display-lg55 / 330 / 1.16
Pricing plans for every stage
display-md48 / 330 / 1.14
$39 / month
heading-xl28 / 500 / 1.28 / 0.42px
Tier name
heading-md20 / 500 / 1.4 / 0.3px
Section sub-heading
body-lg18 / 550 / 1.56
Marketing body lead — moderately weighted Inter for readability without losing presence.
body-md16 / 420 / 1.5
Default UI body and pill-button labels. Inter at 420 weight reads quietly without disappearing.
caption14 / 500 / 1.49 / 0.28px
Helper copy, footnotes, fine print.
eyebrow-cap12 / 400 / 1.2 / 0.72px
Section eyebrow

03 — Components

## Button Variants

Pill geometry for every variant. Polarity flips per canvas: filled black on light, white-stroked outline on dark, mint-fill for the featured tier.

button-primary-pill · light
button-outline-on-light
button-aloe-pill · featured
button-outline-on-dark · cinematic

04 — Components

## Card Examples

Four pricing tiers + a featured aloe tier. Cinematic feature card and pistachio band carry the brand's two surface-treatment moods.

### Basic

$19

Per month, billed annually.

- Online store
- 2 staff accounts
- Basic reports

### Shopify

$49

Best for growing businesses.

- Online store
- 5 staff accounts
- Professional reports

### Advanced

$299

Scale with custom analytics.

- Online store
- 15 staff accounts
- Custom reports

### Sell anywhere

Online, in person, on social — one platform behind every checkout.

### Built-in payments

Lower transaction fees with the platform's native payment rails.

05 — Components

## Form Elements

8px-radius inputs sitting on white. Focus replaces the hairline border with the ink color — no colored ring.

Email address
Store name
Country
Tell us about your business

06 — Signature Components

## Signature Components

Pill tags, cinematic photo frames, and the layered tiny-shadow card halo — the brand's distinguishing visual moves.

#### pill-tag-mint

New Featured

Aloe-fill pill for category labeling on the light track.

#### pill-tag-shade

Beta Coming Soon

Neutral shade pill for status / availability.

#### card-photo-frame

Photography Frame

Full-bleed cinematic photo container; top-only rounded corners on some asymmetric cards.

#### Stacked tiny shadows

Layered 4-stop tiny shadows produce a soft paper halo on light pricing cards.

07 — Foundations

## Spacing Scale

8px base with denser sub-units for editorial fine work; 64px section gap on transactional surfaces, 128–192px on cinematic.

xxs · 2px
xs · 4px
sm · 8px
md · 12px
lg · 16px
xl · 24px
xxl · 32px
huge · 64px

08 — Foundations

## Border Radius Scale

Pill is canonical for buttons (9999px). Cards land at 12px, photo frames at 20px (often top-only), inputs at 8px.

xs · 4px
sm · 5px
md · 8px
lg · 12px
xl · 20px (top)
pill · 9999px

09 — Foundations

## Elevation & Depth

Cinematic cards use subtle inset top-edge highlights; light cards use stacked tiny shadows; modals use a single deep drop.

L0 · Flat
L1 · Inset highlight
L2 · Dark elevated
L3 · Stacked tiny
L4 · Modal drop

10 — Responsive

## Responsive Behavior

Display sizes scale through 96 → 70 → 55 → 48 → 36px; pricing tiers stair from 4-up to 1-up; cinematic photography crops to focal subject on mobile.

Name | Width | Key Changes
--- | --- | ---
Wide | ≥ 1440px | Cinematic edge-bleeding photography; pricing 4-up
Desktop | 1024–1440px | Default content max-width; pricing 4-up tightens
Tablet | 768–1023px | Pricing 2-up; cinematic photography crops
Mobile | < 768px | Pricing 1-up; hamburger nav; display-xxl drops to 56–64px

375
768
1024
1440

### Touch Targets

Pill buttons hit ≥44×44px on mobile. Form fields stay at the 44px minimum. WCAG AAA compliant.

### Collapsing Strategy

- Display sizes scale through the breakpoint stair: 96 → 70 → 55 → 48 → 36px.
- Cinematic photography re-crops to focal subject at smaller widths.
- Pricing tiers stair-step 4-up → 2-up → 1-up; aloe featured tier always distinguished.
- Top nav collapses to hamburger below 768px; menu inherits canvas polarity.

## Pricing Tiers

Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.

/0.1 · Starter
$9/month

For individuals getting started.

- Core features
- Up to 3 projects
- Community support

/0.2 · Pro Most popular
$29/month

For teams ready to ship.

- Everything in Starter
- Unlimited projects
- Email support
- Advanced analytics

/0.3 · Team
$99/month

For organizations operating at scale.

- Everything in Pro
- SSO + audit log
- Priority support
- SLA & onboarding