engineering/www.makepostsell.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
www.makepostsell.com/styleguide.html
russell@unturf.com 702ad49764 Purple source buttons, add purple to design system 
New .source-button class (#9B59B6, hover #7B2D8E) for PyPi and
Source Code buttons. Updated styleguide, CLAUDE.md color palette,
and button hierarchy docs.
2026-03-04 16:00:58 -05:00

567 lines
22 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<title>Style Guide &#8212; Make Post Sell</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#5871ad">
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="mps.css">
<style>
body { color: #515151; background-color: #F9F9FA; }
a { color: #a3c765; font-weight: 600; }
.bold-dark { color: #0b0b0b; font-weight: 550; }
.big-bold-dark { color: #0b0b0b; font-size: 1.4em; font-weight: 550; }
.huge-bold-dark { color: #0b0b0b; font-size: 2.7em; font-weight: 550; }
section.content { background-color: #F9F9FA; }
section.well-white { background-color: #FFFFFF; }
.sg-section { margin-bottom: 40px; }
.sg-section-title {
color: #0b0b0b;
font-size: 1.6em;
font-weight: 550;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 8px;
margin-bottom: 20px;
}
.sg-subsection { margin-bottom: 24px; }
.sg-label {
font-size: 13px;
font-weight: 600;
color: #777;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 8px;
}
.sg-swatches {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.sg-swatch {
width: 120px;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e0e0e0;
}
.sg-swatch-color {
height: 60px;
}
.sg-swatch-info {
padding: 8px;
background: #fff;
font-size: 12px;
line-height: 1.4;
}
.sg-swatch-name { font-weight: 600; color: #0b0b0b; }
.sg-swatch-hex { color: #999; }
.sg-code {
background: #f0f0f0;
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 12px 16px;
font-family: monospace;
font-size: 13px;
overflow-x: auto;
white-space: pre;
margin-top: 8px;
}
.sg-demo {
padding: 20px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 8px;
}
</style>
</head>
<body style="color: #515151; background-color: #F9F9FA;">
<div class="corner-ribbon">
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank">Contribute Code</a>
</div>
<div class="message-ribbon">
Style Guide &#8212; Make Post Sell Design System
</div>
<section class="main">
<section class="nav-grid">
<section class="nav">
<section class="logo">
<br>
<a href="/"><img class="logo" src="/static/mps.png" /></a>
</section>
<section class="middle"></section>
<section class="log-in" style="margin: 30px;">
<a href="/">Home</a> &nbsp; &nbsp; | &nbsp; &nbsp;
<a href="/styleguide.html">Style Guide</a>
</section>
</section>
</section>
<section class="content">
<section class="one-column well">
<span class="huge-bold-dark">Style Guide</span>
<br/><br/>
Live reference of every component on makepostsell.com. Use this to keep the design consistent as we grow.
<br/><br/><br/>
<!-- ======== COLORS ======== -->
<div class="sg-section">
<div class="sg-section-title">Colors</div>
<div class="sg-subsection">
<div class="sg-label">Primary &amp; CTA</div>
<div class="sg-swatches">
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #a3c765;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Green CTA</div>
<div class="sg-swatch-hex">#a3c765</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #98b6fa;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Blue Secondary</div>
<div class="sg-swatch-hex">#98b6fa</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #5871ad;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Navy Brand</div>
<div class="sg-swatch-hex">#5871ad</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #82A8FF;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Light Navy</div>
<div class="sg-swatch-hex">#82A8FF</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #9B59B6;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Purple</div>
<div class="sg-swatch-hex">#9B59B6</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #7B2D8E;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Purple Dark</div>
<div class="sg-swatch-hex">#7B2D8E</div>
</div>
</div>
</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Status &amp; Feedback</div>
<div class="sg-swatches">
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #678731;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Check Green</div>
<div class="sg-swatch-hex">#678731</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #c77765;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Cross Red</div>
<div class="sg-swatch-hex">#c77765</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #CC6958;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Danger Red</div>
<div class="sg-swatch-hex">#CC6958</div>
</div>
</div>
</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Text &amp; Background</div>
<div class="sg-swatches">
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #0b0b0b;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Text Dark</div>
<div class="sg-swatch-hex">#0b0b0b</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #515151;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Text Body</div>
<div class="sg-swatch-hex">#515151</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #777;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Text Muted</div>
<div class="sg-swatch-hex">#777777</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #999;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Text Faint</div>
<div class="sg-swatch-hex">#999999</div>
</div>
</div>
</div>
<br/>
<div class="sg-swatches">
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #F9F9FA; border-bottom: 1px solid #e0e0e0;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">BG Light</div>
<div class="sg-swatch-hex">#F9F9FA</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #FFFFFF; border-bottom: 1px solid #e0e0e0;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">White</div>
<div class="sg-swatch-hex">#FFFFFF</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #e0e0e0;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Border</div>
<div class="sg-swatch-hex">#e0e0e0</div>
</div>
</div>
</div>
</div>
</div>
<!-- ======== TYPOGRAPHY ======== -->
<div class="sg-section">
<div class="sg-section-title">Typography</div>
<div class="sg-demo">
<span class="huge-bold-dark">Huge Bold Dark</span>
<br/><br/>
<span class="big-bold-dark">Big Bold Dark</span>
<br/><br/>
<span class="bold-dark">Bold Dark</span>
<br/><br/>
Body text in #515151 on Helvetica.
<br/><br/>
<a href="#">Link style &#8212; green #a3c765, weight 600</a>
</div>
<div class="sg-code">font-family: helvetica;
.huge-bold-dark &#8212; 2.7em, weight 550, color #0b0b0b
.big-bold-dark &#8212; 1.4em, weight 550, color #0b0b0b
.bold-dark &#8212; weight 550, color #0b0b0b
body text &#8212; default size, color #515151
a (links) &#8212; color #a3c765, weight 600</div>
</div>
<!-- ======== BUTTONS ======== -->
<div class="sg-section">
<div class="sg-section-title">Buttons</div>
<div class="sg-subsection">
<div class="sg-label">Primary CTA (Green)</div>
<div class="sg-demo">
<a href="#" class="shop-new-button mps-button">&#65291; New Shop</a>
<a href="#" class="shop-new-button mps-button">&#x2710; Source Code</a>
</div>
<div class="sg-code">&lt;a href="#" class="shop-new-button mps-button"&gt;&#65291; New Shop&lt;/a&gt;</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Secondary (Blue)</div>
<div class="sg-demo">
<a href="#" class="product-edit-button mps-button">&#128366; PyPi</a>
<a href="#" class="product-edit-button mps-button">&#128366; Blog</a>
</div>
<div class="sg-code">&lt;a href="#" class="product-edit-button mps-button"&gt;&#128366; PyPi&lt;/a&gt;</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Purple (Source / Code)</div>
<div class="sg-demo">
<a href="#" class="source-button mps-button">&#128366; PyPi</a>
<a href="#" class="source-button mps-button">&#x2710; Source Code</a>
</div>
<div class="sg-code">&lt;a href="#" class="source-button mps-button"&gt;&#x2710; Source Code&lt;/a&gt;</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Navy (Log Out / Activate)</div>
<div class="sg-demo">
<a href="#" class="log-out-button mps-button">Log Out</a>
<a href="#" class="cart-activate-button mps-button">Activate</a>
</div>
<div class="sg-code">&lt;a href="#" class="log-out-button mps-button"&gt;Log Out&lt;/a&gt;</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Danger (Delete)</div>
<div class="sg-demo">
<a href="#" class="cart-delete-button mps-button">Delete</a>
</div>
<div class="sg-code">&lt;a href="#" class="cart-delete-button mps-button"&gt;Delete&lt;/a&gt;</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Outline (Switch / Public)</div>
<div class="sg-demo">
<a href="#" class="shop-switch-button mps-button">Switch Shop</a>
<a href="#" class="cart-public-button mps-button"><span class="lock">&#128274;</span> Public</a>
</div>
<div class="sg-code">&lt;a href="#" class="shop-switch-button mps-button"&gt;Switch Shop&lt;/a&gt;</div>
</div>
</div>
<!-- ======== RIBBON ======== -->
<div class="sg-section">
<div class="sg-section-title">Ribbons</div>
<div class="sg-subsection">
<div class="sg-label">Message Ribbon (top banner, desktop only)</div>
<div class="sg-demo">
<div class="message-ribbon" style="display: block;">
Sell digital downloads or physical products &#8212; commission free!
</div>
</div>
<div class="sg-code">&lt;div class="message-ribbon"&gt;
Your message here
&lt;/div&gt;
Gradient: #5871ad &#8594; #82A8FF
Hidden on mobile, visible at 800px+</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Corner Ribbon (fixed, top-right)</div>
<div class="sg-demo" style="position: relative; min-height: 200px; overflow: hidden;">
<div style="position: absolute; top: 0; right: 0; overflow: hidden; width: 185px; height: 185px;">
<a href="#" style="display: block; position: absolute; right: -45px; top: 40px; width: 250px; padding: 10px 0; text-align: center; font-size: 14px; font-weight: bold; color: #ffffff; background: linear-gradient(to right, #5871ad, #82A8FF); text-decoration: none; transform: rotate(45deg); box-shadow: 0 3px 6px rgba(0,0,0,0.25); letter-spacing: 0.03em;">Contribute Code</a>
</div>
</div>
<div class="sg-code">&lt;div class="corner-ribbon"&gt;
&lt;a href="https://git.unturf.com/..." target="_blank"&gt;Contribute Code&lt;/a&gt;
&lt;/div&gt;
Gradient: #5871ad &#8594; #82A8FF, hovers to green #a3c765
Fixed position, z-index 99
Uses !important to override inline page styles</div>
</div>
</div>
<!-- ======== WELLS ======== -->
<div class="sg-section">
<div class="sg-section-title">Wells</div>
<div class="sg-subsection">
<div class="sg-label">Well (gray background)</div>
<div class="sg-demo">
<section class="one-column well">
Content inside a gray well with rounded corners.
</section>
</div>
<div class="sg-code">&lt;section class="one-column well"&gt;...&lt;/section&gt;
Background: #F9F9FA, border-radius: 10px, padding: 10px</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Well White</div>
<div class="sg-demo">
<section class="one-column well well-white">
Content inside a white well with rounded corners.
</section>
</div>
<div class="sg-code">&lt;section class="one-column well well-white"&gt;...&lt;/section&gt;
Background: #FFFFFF</div>
</div>
</div>
<!-- ======== ALERTS ======== -->
<div class="sg-section">
<div class="sg-section-title">Alerts</div>
<div class="sg-demo">
<div class="alert alert-success" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
<div class="alert-message">Success alert &#8212; green background #a3c765</div>
</div>
<div class="alert alert-info" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
<div class="alert-message">Info alert &#8212; blue background #98b6fa</div>
</div>
<div class="alert alert-warning" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
<div class="alert-message">Warning alert &#8212; yellow background #fff3cd</div>
</div>
<div class="alert alert-danger" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
<div class="alert-message">Danger alert &#8212; red background #f8d7da</div>
</div>
</div>
<div class="sg-code">&lt;div class="alert alert-success"&gt;
&lt;div class="alert-message"&gt;Message&lt;/div&gt;
&lt;/div&gt;
Variants: alert-success, alert-info, alert-warning, alert-danger</div>
</div>
<!-- ======== LISTS ======== -->
<div class="sg-section">
<div class="sg-section-title">Check &amp; Cross Lists</div>
<div class="sg-demo">
<ul style="list-style-type: none; padding-left: 0;">
<li style="margin-bottom: 10px;"><b style="color: #678731;"> &#x2714; &nbsp; Positive item</b>
<span style="color: #515151;"> &#8212; <span class="avoid-wrap">Description here</span></span>
</li>
<li style="margin-bottom: 10px;"><b style="color: #678731;"> &#x2714; &nbsp; Another positive</b>
<span style="color: #515151;"> &#8212; <span class="avoid-wrap">More details</span></span>
</li>
</ul>
<ul style="list-style-type: none; padding-left: 0;">
<li style="margin-bottom: 10px;"><b style="color: #c77765">&#x274C;</b> &nbsp; Negative item we protect against</li>
<li style="margin-bottom: 10px;"><b style="color: #c77765">&#x274C;</b> &nbsp; Another negative item</li>
</ul>
</div>
<div class="sg-code">Checkmark: color #678731, &#x2714;
Cross: color #c77765, &#x274C;
list-style-type: none</div>
</div>
<!-- ======== LAYOUT ======== -->
<div class="sg-section">
<div class="sg-section-title">Layout</div>
<div class="sg-subsection">
<div class="sg-label">One Column (max-width 800px, centered)</div>
<div class="sg-code">&lt;section class="one-column"&gt;...&lt;/section&gt;
&lt;section class="one-column well"&gt;...&lt;/section&gt;
&lt;section class="one-column-thin"&gt;...&lt;/section&gt; (max-width 400px)</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Navigation Grid</div>
<div class="sg-code">&lt;section class="nav-grid"&gt;
&lt;section class="nav"&gt;
&lt;section class="logo"&gt;...&lt;/section&gt;
&lt;section class="middle"&gt;...&lt;/section&gt;
&lt;section class="log-in"&gt;...&lt;/section&gt;
&lt;/section&gt;
&lt;/section&gt;
Mobile: stacked (1 column)
Desktop (800px+): 3 columns (logo | middle | log-in)</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Breakpoints</div>
<div class="sg-code">Mobile first (no media query)
@media (min-width: 800px) &#8212; tablet/desktop
@media (min-width: 1200px) &#8212; wide desktop</div>
</div>
</div>
<!-- ======== FOOTER ======== -->
<div class="sg-section">
<div class="sg-section-title">Footer</div>
<div class="sg-code">&lt;footer class="mps-footer"&gt;
&lt;div class="mps-footer-grid"&gt;
&lt;div class="mps-footer-brand"&gt;...&lt;/div&gt;
&lt;div class="mps-footer-group"&gt;
&lt;span class="mps-footer-group-title"&gt;Title&lt;/span&gt;
&lt;nav class="mps-footer-links"&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="mps-footer-ctas"&gt;...&lt;/div&gt;
&lt;div class="mps-footer-bottom"&gt;...&lt;/div&gt;
&lt;/footer&gt;
Mobile: stacked (1 column)
Desktop (800px+): 4 columns (2fr 1fr 1fr 1fr)</div>
<p>See live footer below &#x2193;</p>
</div>
</section>
</section>
</section>
<footer class="mps-footer">
<div class="mps-footer-grid">
<div class="mps-footer-brand">
<a href="/" class="mps-footer-logo">Make Post Sell</a>
<p class="mps-footer-tagline">
Commission-free digital downloads &amp; physical product sales for creators.
</p>
</div>
<div class="mps-footer-group">
<span class="mps-footer-group-title">Get Started</span>
<nav class="mps-footer-links">
<a href="https://blog.makepostsell.com/c/0b408430-3a2a-11ef-8208-c3d535a3beac/how-to-create-a-new-shop-on-makepostsell">Create a Shop</a>
<a href="https://blog.makepostsell.com/c/83c41f98-3a2f-11ef-8208-c3d535a3beac/how-to-create-a-new-product-on-makepostsell">Create a Product</a>
<a href="https://blog.makepostsell.com/c/59c8c980-3a3b-11ef-8208-c3d535a3beac/how-to-create-new-content-on-makepostsell">Create Content</a>
<a href="https://blog.makepostsell.com/c/64903474-3a3c-11ef-8208-c3d535a3beac/how-to-create-a-digital-bundle-for-products-content-on-makepostsell">Create a Bundle</a>
</nav>
</div>
<div class="mps-footer-group">
<span class="mps-footer-group-title">Resources</span>
<nav class="mps-footer-links">
<a href="https://blog.makepostsell.com/">Blog</a>
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank">Source Code</a>
<a href="https://pypi.org/project/make-post-sell/" target="_blank">PyPi</a>
<a href="/styleguide.html">Style Guide</a>
</nav>
</div>
<div class="mps-footer-group">
<span class="mps-footer-group-title">Account</span>
<nav class="mps-footer-links">
<a href="https://my.makepostsell.com/u/settings">My Account</a>
<a href="https://my.makepostsell.com/s/new">New Shop</a>
</nav>
</div>
</div>
<div class="mps-footer-ctas">
<a href="https://my.makepostsell.com/s/new" class="shop-new-button mps-button">&#65291; New Shop</a>
<a href="https://blog.makepostsell.com/" class="product-edit-button mps-button">&#128366; Blog</a>
</div>
<div class="mps-footer-bottom">
makepostsell.com &copy; 2026 &mdash; Commission-free sales by <a href="https://www.unturf.com/software/" target="_blank">unturf.com</a>
</div>
</footer>
</body>
</html>
Reference in a new issue View git blame Copy permalink