From 716bfd4577baa61a23fcb89a9a98a868feb0b353 Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Fri, 6 Mar 2026 07:49:45 -0500 Subject: [PATCH] Update styleguide with landing page components: pricing, step cards, protection lists, pill CTAs, alternating sections --- styleguide.html | 335 +++++++++++++++++++++++++++++++++++------------- 1 file changed, 249 insertions(+), 86 deletions(-) diff --git a/styleguide.html b/styleguide.html index f8c251d..827faba 100644 --- a/styleguide.html +++ b/styleguide.html @@ -10,6 +10,7 @@ + @@ -97,12 +104,12 @@ Style Guide — Make Post Sell Design System
- @@ -213,6 +220,13 @@ Style Guide — Make Post Sell Design System
#515151
+
+
+
+
Text Desc
+
#666666
+
+
@@ -251,6 +265,13 @@ Style Guide — Make Post Sell Design System
#e0e0e0
+
+
+
+
Border Light
+
#eeeeee
+
+
@@ -259,24 +280,41 @@ Style Guide — Make Post Sell Design System
Typography
-
- Huge Bold Dark -

- Big Bold Dark -

- Bold Dark -

- Body text in #515151 on Helvetica. -

- Link style — green #a3c765, weight 600 -
-
font-family: helvetica; - -.huge-bold-dark — 2.7em, weight 550, color #0b0b0b +
+
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
+
@@ -284,59 +322,204 @@ a (links) — color #a3c765, weight 600
Buttons
-
Primary CTA (Green)
+
App Buttons (common.css)
- ＋ New Shop - ✐ Source Code -
-
<a href="#" class="shop-new-button mps-button">＋ New Shop</a>
-
- -
-
Secondary (Blue)
-
- 🕮 PyPi - 🕮 Blog -
-
<a href="#" class="product-edit-button mps-button">🕮 PyPi</a>
-
- -
-
Purple (Source / Code)
-
- 🕮 PyPi + + New Shop + 🕮 Edit ✐ Source Code -
-
<a href="#" class="source-button mps-button">✐ Source Code</a>
-
- -
-
Navy (Log Out / Activate)
-
Log Out - Activate -
-
<a href="#" class="log-out-button mps-button">Log Out</a>
-
- -
-
Danger (Delete)
-
Delete + Switch Shop
-
<a href="#" class="cart-delete-button mps-button">Delete</a>
+
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
-
Outline (Switch / Public)
+
Landing Page CTAs (landing.css)
- Switch Shop - 🔒 Public +
+ + Open a Shop + ✐ Source Code +
-
<a href="#" class="shop-switch-button mps-button">Switch Shop</a>
+
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
@@ -405,34 +588,7 @@ Background: #FFFFFF
Danger alert — red background #f8d7da
-
<div class="alert alert-success"> - <div class="alert-message">Message</div> -</div> - -Variants: alert-success, alert-info, alert-warning, alert-danger
- - - -
-
Check & Cross Lists
- -
-
    -
  • ✔   Positive item - — Description here -
    • -
  • ✔   Another positive - — More details -
    • -
-
    -
  • ❌   Negative item we protect against
    • -
  • ❌   Another negative item
    • -
-
-
Checkmark: color #678731, ✔ -Cross: color #c77765, ❌ -list-style-type: none
+
Variants: alert-success, alert-info, alert-warning, alert-danger
@@ -466,6 +622,13 @@ Desktop (800px+): 3 columns (logo | middle | log-in) @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)
+
@@ -536,7 +699,7 @@ Desktop (800px+): 4 columns (2fr 1fr 1fr 1fr)
- ＋ New Shop + + New Shop 🕮 Blog