Colors

Primary & CTA

Green CTA

#a3c765

Blue Secondary

#98b6fa

Navy Brand

#5871ad

Light Navy

#82A8FF

Purple

#9B59B6

Purple Dark

#7B2D8E

Status & Feedback

Check Green

#678731

Cross Red

#c77765

Danger Red

#CC6958

Text & Background

Text Dark

#0b0b0b

Text Body

#515151

Text Desc

#666666

Text Muted

#777777

Text Faint

#999999

BG Light

#F9F9FA

White

#FFFFFF

Border

#e0e0e0

Border Light

#eeeeee

Typography

App Typography (common.css)

Huge Bold Dark

Big Bold Dark

Bold Dark

Body text in #515151 on Helvetica.

Link style — green #a3c765, weight 600

.huge-bold-dark — 2.7em, weight 550, color #0b0b0b .big-bold-dark — 1.4em, weight 550, color #0b0b0b .bold-dark — weight 550, color #0b0b0b body text — default size, color #515151 a (links) — color #a3c765, weight 600

Landing Typography (landing.css)

Hero Title

Hero subtitle line

Section Title

Landing body text with inline link and proper line-height.

Muted caption text, centered.

.landing-hero-title — 2.4em mobile / 4.5em desktop, weight 700 .landing-hero-subtitle — 1.25em, weight 500 .landing-section-title — 2em, weight 700, centered .landing-body — 1.05em, line-height 1.7, color #515151 .landing-muted — 14px, color #999, centered

Buttons

App Buttons (common.css)

+ New Shop 🕮 Edit ✐ Source Code Log Out Delete Switch Shop

Green CTA: .shop-new-button.mps-button Blue: .product-edit-button.mps-button Purple: .source-button.mps-button Navy: .log-out-button.mps-button Danger: .cart-delete-button.mps-button Outline: .shop-switch-button.mps-button border-radius: 4px, min-width: 250px

Landing Page CTAs (landing.css)

+ Open a Shop ✐ Source Code

Add .landing-cta for pill shape + hover lift border-radius: 50px, padding: 16px 32px box-shadow: 0 2px 8px rgba(0,0,0,0.08) hover: translateY(-1px), deeper shadow .landing-cta-large — 18px font, 48px horizontal padding

Landing Sections

Alternating sections (no HR dividers)

White section (.landing-section)

Alt section (.landing-section-alt)

White section

<section class="landing-section">...</section> <section class="landing-section landing-section-alt">...</section> .landing-section — padding: 64px mobile, 80px tablet, 100px desktop .landing-section-alt — background: #F9F9FA .landing-final-cta — gradient: #f8faf5 to #f0f6ff

Pricing Cards

📅 $14/month Pay as you go. Cancel anytime.

Best value 🌟 $97/year Save 42%. Two months free.

.landing-pricing-card — white bg, 1px border, 16px radius .landing-pricing-featured — 2px green border, green shadow .landing-pricing-badge — absolute pill, green bg, white text .landing-pricing-amount — 3em, weight 700 .landing-pricing-period — 0.35em, color #999

Feature Cards

💰 Card Title Card description with details about the feature goes here.

📈 Linked Card Title Cards with links in the title use green hover.

<div class="mps-card-grid"> <div class="mps-card"> <span class="mps-card-icon">...</span> <span class="mps-card-title">Title</span> <span class="mps-card-desc">Description</span> </div> </div> Landing: 12px radius, subtle shadow, hover lift Grid: 1 col mobile, 2 col tablet+, .three-col for 3

Step Cards

1 First Step Description of the first step.

2 Second Step Description of the second step.

3 Third Step Description of the third step.

.landing-step-card — centered text .landing-step-number — 44px green circle, white number, weight 700

Protection Lists

❌ Negative item
❌ Another negative

✔ Positive item — Details
✔ Another positive — More details

.landing-list-bad — bg #fef2f2, border #f5d5d5 .landing-list-good — bg #f0f9e8, border #d5e8c0 .landing-x — color #c77765 .landing-check — color #678731 .landing-list-detail — color #666 Grid: stacked mobile, 2 col at 800px+

Comparison Cards

$14.00 Marketplace (30% commission)

$19.12 Make Post Sell (0% commission)

.mps-comparison-card.marketplace — bg #f8d7da, border #c77765 .mps-comparison-card.mps — bg #e8f5d4, border #678731 .mps-comparison-amount — 2.4em, weight 600 Landing: 16px radius, 32px padding

Ribbons

Message Ribbon (top banner, desktop only)

Sell digital downloads or physical products — commission free!

<div class="message-ribbon"> Your message here </div> Gradient: #5871ad → #82A8FF Hidden on mobile, visible at 800px+

Wells

Well (gray background)

Content inside a gray well with rounded corners.

<section class="one-column well">...</section> Background: #F9F9FA, border-radius: 10px, padding: 10px

Well White

Content inside a white well with rounded corners.

<section class="one-column well well-white">...</section> Background: #FFFFFF

Alerts

Success alert — green background #a3c765

Info alert — blue background #98b6fa

Warning alert — yellow background #fff3cd

Danger alert — red background #f8d7da

Variants: alert-success, alert-info, alert-warning, alert-danger

Layout

One Column (max-width 800px, centered)

<section class="one-column">...</section> <section class="one-column well">...</section> <section class="one-column-thin">...</section> (max-width 400px)

Navigation Grid

<section class="nav-grid"> <section class="nav"> <section class="logo">...</section> <section class="middle">...</section> <section class="log-in">...</section> </section> </section> Mobile: stacked (1 column) Desktop (800px+): 3 columns (logo | middle | log-in)

Breakpoints

Mobile first (no media query) @media (min-width: 800px) — tablet/desktop @media (min-width: 1200px) — wide desktop

CSS Files

common.css — shared app styles (layout, buttons, nav, wells, footer, cards) mps.css — message ribbon, alerts landing.css — landing page (hero, sections, pricing, CTAs, lists, steps)

Footer

<footer class="mps-footer"> <div class="mps-footer-grid"> <div class="mps-footer-brand">...</div> <div class="mps-footer-group"> <span class="mps-footer-group-title">Title</span> <nav class="mps-footer-links"> <a href="#">Link</a> </nav> </div> </div> <div class="mps-footer-ctas">...</div> <div class="mps-footer-bottom">...</div> </footer> Mobile: stacked (1 column) Desktop (800px+): 4 columns (2fr 1fr 1fr 1fr)

See live footer below ↓