Style Guide — Make Post Sell Design System
Style Guide

Live reference of every component on makepostsell.com. Use this to keep the design consistent as we grow.


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 Muted
#777777
Text Faint
#999999

BG Light
#F9F9FA
White
#FFFFFF
Border
#e0e0e0
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 .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
Buttons
Primary CTA (Green)
＋ 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 ✐ 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
<a href="#" class="cart-delete-button mps-button">Delete</a>
Outline (Switch / Public)
Switch Shop 🔒 Public
<a href="#" class="shop-switch-button mps-button">Switch Shop</a>
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
<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
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
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 ↓