School of Gains · Presented by PaperGains
School of Gains design system
The single source of truth for School of Gains, Presented by PaperGains. It is dark-first and matches the my.school-of-gains.com portal. Every website, funnel, GHL page and newsletter should use these tokens and components.
Foundations
Components
46 components. Each page shows live variants and copy-paste HTML using the exported sog-tokens.css + sog-components.css.
Button
Portal-standard buttons: 12px corners, sentence case, weight 800. #00C948 with dark #04130A text is the one primary action per view.
variant
View HTML
<button class="sog-btn sog-btn--primary">Join the community</button>
<button class="sog-btn sog-btn--secondary">Explore courses</button>
<button class="sog-btn sog-btn--outline">View programs</button>
<button class="sog-btn sog-btn--ghost">Learn more</button>
<button class="sog-btn sog-btn--discord">Continue with Discord</button>
<button class="sog-btn sog-btn--danger">Cancel plan</button>Link
Inline text links use action green with a soft underline. Muted links are for nav and footers.
variant
View HTML
<p>Read the <a class="sog-link" href="#">risk disclosure</a> before you join.</p>
<a class="sog-link sog-link--muted" href="#">Privacy</a> <a class="sog-link sog-link--muted" href="#">Terms</a>
Badge & eyebrow
Pill-shaped status labels, plus the uppercase eyebrow used above headings (green by default, amber for editorial labels).
badge
Default
Apprentice
Master
Closed
Live trading floor active
View HTML
<span class="sog-badge">Default</span>
<span class="sog-badge sog-badge--green">Apprentice</span>
<span class="sog-badge sog-badge--amber">Master</span>
<span class="sog-badge sog-badge--danger">Closed</span>
<span class="sog-badge sog-badge--green sog-badge--live">Live trading floor active</span>Input & forms
Inputs, selects, textareas, checkboxes, radios and switches. Dark surface, 12px corners, green focus ring.
text field
We'll email you a 6-digit code. No passwords, ever.
View HTML
<div class="sog-field" style="max-width:380px">
<label class="sog-label" for="em">Your email</label>
<input class="sog-input" id="em" type="email" placeholder="you@example.com"/>
<span class="sog-help">We'll email you a 6-digit code. No passwords, ever.</span>
</div>Code input
6-digit one-time code entry, matching the portal's passwordless sign-in.
otp
View HTML
<div class="sog-field">
<label class="sog-label">Enter the 6-digit code</label>
<div class="sog-code" role="group" aria-label="One-time code">
<input inputmode="numeric" maxlength="1" value="4"/><input inputmode="numeric" maxlength="1" value="8"/><input inputmode="numeric" maxlength="1" value="2"/><input inputmode="numeric" maxlength="1"/><input inputmode="numeric" maxlength="1"/><input inputmode="numeric" maxlength="1"/>
</div>
<span class="sog-help">Didn't get it? <a class="sog-link" href="#">Resend code</a></span>
</div>
Card
Surface containers. Feature, interactive, and featured variants.
feature cards
🎓
Elite academy
Structured lessons that take you from the basics to a full trading plan, in the right order.
📡
Live trading sessions
Trade alongside mentors in real time on the live floor.
⚡
AI scanning tools
Find setups faster with the community scanners.
View HTML
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px">
<div class="sog-card sog-card--interactive"><div class="sog-card__icon">🎓</div><h3 class="sog-h3">Elite academy</h3><p class="sog-muted" style="font-size:14px">Structured lessons that take you from the basics to a full trading plan, in the right order.</p></div>
<div class="sog-card sog-card--interactive"><div class="sog-card__icon">📡</div><h3 class="sog-h3">Live trading sessions</h3><p class="sog-muted" style="font-size:14px">Trade alongside mentors in real time on the live floor.</p></div>
<div class="sog-card sog-card--interactive"><div class="sog-card__icon">⚡</div><h3 class="sog-h3">AI scanning tools</h3><p class="sog-muted" style="font-size:14px">Find setups faster with the community scanners.</p></div>
</div>Program card
Apprentice and Master program cards for the courses section.
programs
Apprentice of Gains
Build the foundation
The core system: market structure, risk management and your first trading plan.
- Foundation + core skills modules
- Weekly live sessions
- Private Discord channels
Master of Gains
Trade like a pro
Advanced analysis and strategic development, with 1:1 mentorship.
- Advanced analysis + strategy
- 1:1 mentor reviews
- Master-only live room
View HTML
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:16px">
<div class="sog-card"><span class="sog-badge sog-badge--green">Apprentice of Gains</span><h3 class="sog-h2" style="margin:16px 0 8px">Build the foundation</h3><p class="sog-muted">The core system: market structure, risk management and your first trading plan.</p><ul class="sog-list"><li>Foundation + core skills modules</li><li>Weekly live sessions</li><li>Private Discord channels</li></ul><a class="sog-btn sog-btn--primary" href="#">Start your application →</a></div>
<div class="sog-card sog-card--featured"><span class="sog-badge sog-badge--amber">Master of Gains</span><h3 class="sog-h2" style="margin:16px 0 8px">Trade like a pro</h3><p class="sog-muted">Advanced analysis and strategic development, with 1:1 mentorship.</p><ul class="sog-list"><li>Advanced analysis + strategy</li><li>1:1 mentor reviews</li><li>Master-only live room</li></ul><a class="sog-btn sog-btn--primary" href="#">Apply for Master →</a></div>
</div>Pricing card
Plan comparison with price, inclusions and a single CTA. Featured plan uses the green border.
pricing
Prices are placeholders.
View HTML
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px">
<div class="sog-card"><p class="sog-eyebrow">Community</p><div class="sog-price" style="margin:12px 0">Free</div><ul class="sog-list"><li>Discord community</li><li>Weekly brief newsletter</li></ul><a class="sog-btn sog-btn--secondary sog-btn--block" href="#">Join free</a></div>
<div class="sog-card sog-card--featured"><p class="sog-eyebrow">Apprentice <span class="sog-badge sog-badge--green" style="margin-left:6px">Most popular</span></p><div class="sog-price" style="margin:12px 0">$97<small> /month</small></div><ul class="sog-list"><li>Full academy</li><li>Live sessions</li><li>AI scanners</li></ul><a class="sog-btn sog-btn--primary sog-btn--block" href="#">Start now</a></div>
<div class="sog-card"><p class="sog-eyebrow sog-eyebrow--amber">Master</p><div class="sog-price" style="margin:12px 0">Apply</div><ul class="sog-list"><li>Everything in Apprentice</li><li>1:1 mentorship</li></ul><a class="sog-btn sog-btn--outline sog-btn--block" href="#">Book a call</a></div>
</div><p class="sog-subtle" style="font-size:12px;margin-top:12px">Prices are placeholders.</p>
Discord feed card
The portal's "Headlines" card, showing the latest Discord announcement with pagination dots.
feed
View HTML
<div class="sog-feed" style="max-width:340px">
<div class="sog-feed__head"><span class="sog-eyebrow sog-eyebrow--amber">Headlines</span><span class="sog-subtle" style="font-size:12px">1 / 10</span></div>
<div class="sog-feed__media">LIVE ▶</div>
<div class="sog-feed__meta"><span class="sog-dot"></span><b>Announcements</b> on Discord · 9h ago</div>
<p style="margin:0 0 12px;font-size:14px">Live in 15. Market open breakdown on YouTube.</p>
<a class="sog-btn sog-btn--primary sog-btn--sm" href="#">Join the community</a>
</div>Header / nav
Sticky, blurred header. Use the horizontal logo at 44px tall minimum, keep nav items to 7 or fewer, and one primary CTA.
desktop
View HTML
<header class="sog-header">
<a class="sog-header__logo" href="#"><img src="/brand/sog-logo-horizontal-white.png" alt="School of Gains, Presented by PaperGains"/></a>
<nav class="sog-nav"><a href="#" aria-current="page">Home</a><a href="#">Courses</a><a href="#">Community</a><a href="#">Tools</a><a href="#">Merch</a><a href="#">About</a></nav>
<div class="sog-header__actions"><a class="sog-btn sog-btn--ghost sog-btn--sm" href="https://my.school-of-gains.com">Sign in</a><a class="sog-btn sog-btn--primary sog-btn--sm" href="#">Join free</a></div>
</header>
Hero
Display headline in Sora 800, with the last line in action green, a radial green glow, primary and secondary CTAs and social proof.
hero
Trade smarter.
Think bigger.
Grow together.
Learn alongside experienced traders in a community built for growth, education and long-term thinking.
★★★★★ 4.9 from 2,500+ traders
View HTML
<section class="sog-hero">
<span class="sog-badge sog-badge--green sog-badge--live">Live trading floor active</span>
<h1 class="sog-display" style="margin-top:24px">Trade smarter.<br/>Think bigger.<br/><span class="sog-accent">Grow together.</span></h1>
<p class="sog-muted" style="font-size:18px;max-width:520px;margin-top:20px">Learn alongside experienced traders in a community built for growth, education and long-term thinking.</p>
<div class="sog-hero__actions"><a class="sog-btn sog-btn--primary sog-btn--lg" href="#">Join the free Discord</a><a class="sog-btn sog-btn--secondary sog-btn--lg" href="#">Explore courses</a></div>
<p class="sog-hero__proof"><b>★★★★★</b> 4.9 from 2,500+ traders</p>
</section>Beehiiv signup
Newsletter block for "The Weekly Brief". Use the native form posting to Beehiiv, or wrap the Beehiiv iframe embed in .sog-embed.
native (styled)
View HTML
<div class="sog-card sog-newsletter">
<div><span class="sog-eyebrow">The Weekly Brief</span><h3 class="sog-h2" style="margin:10px 0">Trade smarter. One email a week.</h3><p class="sog-muted" style="margin:0">Market recap, setups to watch and one lesson. Free.</p></div>
<form action="https://embeds.beehiiv.com/REPLACE_WITH_PUBLICATION_ID" method="post" target="_blank" style="display:grid;gap:10px">
<div class="sog-input-group"><input class="sog-input" type="email" name="email" placeholder="you@example.com" required/><button class="sog-btn sog-btn--primary">Subscribe</button></div>
<span class="sog-help">Unsubscribe anytime. Trading involves risk. Education only, not financial advice.</span>
</form>
</div>GHL form / booking
Wrapper for GoHighLevel (LeadConnector) forms and calendars, so third-party embeds sit inside an on-brand frame. In GHL, set the form/calendar theme to: bg #141414, inputs #141414 with #3A3A3A border, button #00C948 with #04130A text, radius 12px, font Nunito Sans.
booking wrapper
View HTML
<div class="sog-embed" style="max-width:640px">
<div class="sog-embed__bar"><div><span class="sog-eyebrow">Strategy call</span><h3 class="sog-h3" style="margin-top:6px">Book your free strategy call</h3></div><span class="sog-badge">30 min</span></div>
<iframe src="about:blank" data-src="https://api.leadconnectorhq.com/widget/booking/REPLACE_CALENDAR_ID" height="260" title="Book a call" scrolling="no"></iframe>
<p class="sog-help" style="margin-top:12px">Trading involves risk. Education only, not financial advice.</p>
</div>Consent banner
A slim bar docked at the bottom with position: sticky, so it takes up real space in the flow and never overlaps hero CTAs. Never use a centered modal for consent.
consent
View HTML
<div style="border:1px solid var(--sog-border);border-radius:16px;overflow:hidden">
<div style="padding:32px"><a class="sog-btn sog-btn--primary" href="#">Join the free Discord</a> <span class="sog-subtle" style="font-size:13px;margin-left:8px">CTA stays visible above the bar</span></div>
<div class="sog-consent" role="region" aria-label="Analytics consent">
<span><b style="color:var(--sog-text)">Your analytics choice.</b> Anonymous analytics help us improve. The site works either way.</span>
<div class="sog-consent__actions"><button class="sog-btn sog-btn--ghost sog-btn--sm">Essential only</button><button class="sog-btn sog-btn--primary sog-btn--sm">Allow analytics</button></div>
</div>
</div>Alert
Inline feedback messages.
variant
✓
You're in.Check your inbox for the welcome email.
!
Risk reminderTrading involves risk. Education only, not financial advice.
×
Payment failedUpdate your card to keep access.
i
Live session movedTonight's session starts at 8:30 PM ET.
View HTML
<div style="display:grid;gap:12px">
<div class="sog-alert sog-alert--success"><span>✓</span><div><strong>You're in.</strong>Check your inbox for the welcome email.</div></div>
<div class="sog-alert sog-alert--warning"><span>!</span><div><strong>Risk reminder</strong>Trading involves risk. Education only, not financial advice.</div></div>
<div class="sog-alert sog-alert--danger"><span>×</span><div><strong>Payment failed</strong>Update your card to keep access.</div></div>
<div class="sog-alert sog-alert--info"><span>i</span><div><strong>Live session moved</strong>Tonight's session starts at 8:30 PM ET.</div></div>
</div>Tabs
Segmented tabs that switch between panels of related content.
tabs
Market basics, charting and the language of trading.
Entries, exits, position sizing and risk management.
Multi-timeframe analysis and strategy development.
View HTML
<div class="sog-tabs" data-tabs>
<div class="sog-tabs__list" role="tablist"><button class="sog-tabs__tab" role="tab" aria-selected="true" aria-controls="t1">Foundation</button><button class="sog-tabs__tab" role="tab" aria-selected="false" aria-controls="t2">Core skills</button><button class="sog-tabs__tab" role="tab" aria-selected="false" aria-controls="t3">Advanced</button></div>
<div class="sog-tabs__panel" id="t1" role="tabpanel">Market basics, charting and the language of trading.</div>
<div class="sog-tabs__panel" id="t2" role="tabpanel" hidden>Entries, exits, position sizing and risk management.</div>
<div class="sog-tabs__panel" id="t3" role="tabpanel" hidden>Multi-timeframe analysis and strategy development.</div>
</div>
Accordion
FAQ pattern built on native <details> elements.
faq
Is the Discord really free?
Yes. The community Discord is free to join. Programs are paid.
Do I need trading experience?
No. The Foundation track starts from zero.
Is this financial advice?
Trading involves risk. Education only, not financial advice.
View HTML
<div class="sog-accordion">
<details open><summary>Is the Discord really free?</summary><div class="sog-accordion__body">Yes. The community Discord is free to join. Programs are paid.</div></details>
<details><summary>Do I need trading experience?</summary><div class="sog-accordion__body">No. The Foundation track starts from zero.</div></details>
<details><summary>Is this financial advice?</summary><div class="sog-accordion__body">Trading involves risk. Education only, not financial advice.</div></details>
</div>Modal
A native <dialog> with a blurred backdrop. Use it only for confirmations, never for marketing pop-ups that cover CTAs.
modal
View HTML
<button class="sog-btn sog-btn--secondary" data-open="dlg">Open modal</button>
<dialog class="sog-modal" id="dlg"><h3 class="sog-h3" style="font-size:22px">Leave the live session?</h3><p class="sog-muted">You can rejoin from the portal anytime.</p><form method="dialog" class="sog-modal__actions"><button class="sog-btn sog-btn--ghost">Stay</button><button class="sog-btn sog-btn--primary">Leave</button></form></dialog>
<dialog class="sog-modal" open style="position:static;margin:0"><h3 class="sog-h3" style="font-size:22px">Leave the live session?</h3><p class="sog-muted">You can rejoin from the portal anytime.</p><div class="sog-modal__actions"><button class="sog-btn sog-btn--ghost">Stay</button><button class="sog-btn sog-btn--primary">Leave</button></div></dialog>Avatar
Mentor and member initials.
avatar
JBSGAM+9
View HTML
<span class="sog-avatar">JB</span><span class="sog-avatar sog-avatar--lg">SG</span><span style="display:flex"><span class="sog-avatar">A</span><span class="sog-avatar" style="margin-left:-10px;background:#3a3a3a">M</span><span class="sog-avatar" style="margin-left:-10px;background:#5865F2">+9</span></span>Tooltip
A short hint shown on hover.
tooltip
View HTML
<button class="sog-btn sog-btn--secondary sog-tooltip" data-tip="Opens in Discord">Hover me</button>
Meter & loader
Course progress meter and a loading spinner.
meter
Foundation64%
View HTML
<div style="max-width:360px;display:grid;gap:8px"><div style="display:flex;justify-content:space-between;font-size:13px"><b>Foundation</b><span class="sog-muted">64%</span></div><div class="sog-meter"><span style="width:64%"></span></div></div>Table
Data tables for the schedule, comparisons and results.
calendar
| Day | Session | Time (ET) | Access |
|---|---|---|---|
| Mon | Market open breakdown | 9:15 AM | Free |
| Wed | Live trading floor | 10:00 AM | Apprentice |
| Thu | Master strategy room | 8:00 PM | Master |
View HTML
<table class="sog-table"><thead><tr><th>Day</th><th>Session</th><th>Time (ET)</th><th>Access</th></tr></thead><tbody>
<tr><td>Mon</td><td>Market open breakdown</td><td>9:15 AM</td><td><span class="sog-badge sog-badge--green">Free</span></td></tr>
<tr><td>Wed</td><td>Live trading floor</td><td>10:00 AM</td><td><span class="sog-badge sog-badge--amber">Apprentice</span></td></tr>
<tr><td>Thu</td><td>Master strategy room</td><td>8:00 PM</td><td><span class="sog-badge">Master</span></td></tr></tbody></table>Breadcrumbs & pagination
Wayfinding for course and blog pages.
breadcrumbs
View HTML
<nav class="sog-breadcrumbs"><a href="#">Courses</a>/<a href="#">Apprentice</a>/<span aria-current="page">Risk management</span></nav>Logo component
Logo usage in UI. See Foundations › Logo for the rules.
variant="horizontal" | "stacked" | "mark"
View HTML
<img src="/brand/sog-logo-horizontal-white.png" alt="School of Gains, Presented by PaperGains" style="height:56px"/>
<img src="/brand/sog-logo-stacked-white.png" alt="School of Gains, Presented by PaperGains" style="height:120px"/>
<img src="/brand/sog-mark.png" alt="School of Gains" style="height:48px"/>Section label
Tiny (9px) uppercase, 800 weight, 0.16em tracking. Green by default; amber for Headlines and Staff; blue for Monthly Classic and Apprentice; Discord purple for Discord and Marathon. An optional muted meta follows the label.
colours
Next up
Headlines
Monthly Classic
Quarterly Marathon
1 · Foundation
View HTML
<div style="display:grid;gap:10px">
<span class="sog-label-sm">Next up</span>
<span class="sog-label-sm sog-label-sm--amber">Headlines</span>
<span class="sog-label-sm sog-label-sm--blue">Monthly Classic <span class="sog-label-sm__meta">October Classic</span></span>
<span class="sog-label-sm sog-label-sm--discord">Quarterly Marathon</span>
<span class="sog-label-sm sog-label-sm--muted">1 · Foundation</span></div>Two-tone headline
Uppercase Sora 800 hero line where the final phrase is green. Pair with a green section label above and a muted lead below.
hero
School of Gains trading competition
Pick your stocks. Lock them in. Take the crown.
Build a $100K paper portfolio, lock it before the bell, and climb the leaderboard. No real money, real bragging rights.
View HTML
<p class="sog-label-sm">School of Gains trading competition</p>
<h1 class="sog-headline">Pick your stocks. Lock them in. <em>Take the crown.</em></h1>
<p class="sog-muted" style="max-width:440px;font-size:13px;margin:0">Build a $100K paper portfolio, lock it before the bell, and climb the leaderboard. No real money, real bragging rights.</p>
Ticker
A thin looping strip with faded edges. Bold white subjects, muted verbs, green numbers (red for negative). Pauses on hover and stops for reduced motion. The content is duplicated once so the loop is seamless.
live strip
Sprint · Oct 26–30 entries open WestCoastBrando won Sprint · Oct 19–23 +1.3% 5 new designs in the merch shop October Classic is live 26 playing Jamie N last round −0.6%
Sprint · Oct 26–30 entries open WestCoastBrando won Sprint · Oct 19–23 +1.3% 5 new designs in the merch shop October Classic is live 26 playing Jamie N last round −0.6%
View HTML
<div class="sog-ticker"><div class="sog-ticker__track"><div style="display:flex;gap:36px">Sprint · Oct 26–30 <span>entries open</span> WestCoastBrando <span>won Sprint · Oct 19–23</span> <b>+1.3%</b> 5 new designs <span>in the merch shop</span> October Classic <span>is live</span> <b>26 playing</b> Jamie N <span>last round</span> <b class="neg">−0.6%</b></div><div style="display:flex;gap:36px">Sprint · Oct 26–30 <span>entries open</span> WestCoastBrando <span>won Sprint · Oct 19–23</span> <b>+1.3%</b> 5 new designs <span>in the merch shop</span> October Classic <span>is live</span> <b>26 playing</b> Jamie N <span>last round</span> <b class="neg">−0.6%</b></div></div></div>
Accent card
The "Next up" card: dark-green gradient, green border, soft glow and faint concentric circles at the top-right. Use one per screen, for the single most important next action.
next up
Next up
Nothing on the calendar right now
New calls and events show here as soon as they are posted.
View HTML
<div class="sog-accent-card" style="max-width:340px"><p class="sog-label-sm" style="margin:0">Next up</p><h3 class="sog-title" style="font-size:15px">Nothing on the calendar right now</h3><p>New calls and events show here as soon as they are posted.</p><button class="sog-btn sog-btn--ghost sog-btn--pill sog-btn--sm">Open the calendar</button></div>
Stat pill / Streak
An amber streak segment joined to a green-dot "new" segment, plus the ring capsule for lesson progress. Lives top-right of the page header.
header stats
🔥 2-day streak 1 new
0 of 7lessons done
View HTML
<span class="sog-stat"><span class="sog-stat__streak">🔥 2-day streak</span><span class="sog-stat__new"><i class="sog-dot"></i> 1 new</span></span>
<span class="sog-ring-cap"><span class="sog-ring" style="--p:0"></span><span><b>0 of 7</b><small>lessons done</small></span></span>
Status pills & event tags
Status pills for challenges and courses, sidebar counters, and small rectangular event tags for the calendar.
status
Live
Entries open
Not started
Apprentice
New
New
0/7
View HTML
<span class="sog-pill sog-pill--live">Live</span>
<span class="sog-pill sog-pill--open">Entries open</span>
<span class="sog-pill sog-pill--outline">Not started</span>
<span class="sog-pill sog-pill--blue"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg> Apprentice</span>
<span class="sog-pill sog-pill--new">New</span>
<span class="sog-pill sog-pill--new-outline">New</span>
<span class="sog-counter">0/7</span>Progress ring & bar
Ring capsule (conic gradient, set --p from 0 to 100), thin 4px bars, and the big "0 / 7" stat card.
ring
0 of 7lessons done
3 of 7lessons done
View HTML
<span class="sog-ring-cap"><span class="sog-ring" style="--p:0"></span><span><b>0 of 7</b><small>lessons done</small></span></span>
<span class="sog-ring-cap"><span class="sog-ring" style="--p:43"></span><span><b>3 of 7</b><small>lessons done</small></span></span>
Course outline
Numbered steps grouped by module. Current step is a raised sub-card with green duration; locked modules collapse to a label row with a lock.
outline
Course outline 0 of 24 complete
1 · Foundation0/7
1Introduction22 min
2Trading vs. Investing27 min
3Understanding Market Types17 min
2 · Core skills🔒
3 · Advanced analysis🔒
View HTML
<div class="sog-outline">
<div class="sog-outline__head">Course outline <small>0 of 24 complete</small></div>
<div class="sog-outline__group"><span>1 · Foundation</span><span class="sog-counter">0/7</span></div>
<div class="sog-step is-current"><span class="sog-step__n">1</span><span class="sog-step__t">Introduction</span><small>22 min</small></div>
<div class="sog-step"><span class="sog-step__n">2</span><span class="sog-step__t">Trading vs. Investing</span><small>27 min</small></div>
<div class="sog-step"><span class="sog-step__n">3</span><span class="sog-step__t">Understanding Market Types</span><small>17 min</small></div>
<div class="sog-outline__group"><span>2 · Core skills</span><span>🔒</span></div>
<div class="sog-outline__group"><span>3 · Advanced analysis</span><span>🔒</span></div></div>
Sidebar nav
Brand mark with a fold chevron, outline icons, active item as a dark-green pill, amber STAFF group, Discord promo card at the bottom and a user row. Add .is-collapsed for icons only; counters become a green dot.
expanded + collapsed
View HTML
<div style="display:flex;gap:24px;align-items:flex-start"><aside class="sog-side">
<div class="sog-side__brand"><img src="/brand/sog-mark.png" alt=""/><span>My School of<br/>Gains</span><button class="sog-side__fold" aria-label="Collapse sidebar">‹</button></div>
<a href="#" class="sog-nav-item"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5V21H3z"/><path d="M9 21v-6h6v6"/></svg></span><span class="sog-nav-label">Home</span></a>
<a href="#" class="sog-nav-item"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg></span><span class="sog-nav-label">Calendar</span></a>
<a href="#" class="sog-nav-item"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 17 6-6 4 4 8-8"/></svg></span><span class="sog-nav-label">Challenge</span></a>
<a href="#" class="sog-nav-item is-active"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M9 3v18"/></svg></span><span class="sog-nav-label">Lessons</span><span class="sog-counter">0/7</span></a>
<a href="#" class="sog-nav-item"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span><span class="sog-nav-label">Group coaching</span></a>
<a href="#" class="sog-nav-item"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0M19 8v6M16 11h6"/></svg></span><span class="sog-nav-label">Apply</span></a>
<a href="#" class="sog-nav-item"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0M17 4a4 4 0 0 1 0 8M22 21a7 7 0 0 0-4-6.3"/></svg></span><span class="sog-nav-label">Community</span></a>
<a href="#" class="sog-nav-item"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M9 7h6M9 11h6M9 15h4"/></svg></span><span class="sog-nav-label">Tools</span><span class="sog-counter">4/8</span></a>
<a href="#" class="sog-nav-item"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3 3 6l2 5 3-1v11h8V10l3 1 2-5-5-3a4 4 0 0 1-8 0z"/></svg></span><span class="sog-nav-label">Merch shop</span></a>
<a href="#" class="sog-nav-item"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg></span><span class="sog-nav-label">Settings</span></a>
<div class="sog-side__group">Staff</div>
<a href="#" class="sog-nav-item"><span style="color:var(--sog-amber)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/></svg></span><span class="sog-nav-label">Admin</span></a>
<div class="sog-side__promo"><b>Paper Gains is live</b><p>Pre-market with Jason, every market day.</p><a class="sog-btn sog-btn--discord sog-btn--sm sog-btn--block" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.3 4.4A19.8 19.8 0 0 0 15.4 3l-.6 1.3a18.4 18.4 0 0 0-5.6 0L8.6 3a19.7 19.7 0 0 0-4.9 1.5C.6 9.1-.3 13.6.1 18a19.9 19.9 0 0 0 6 3l1.3-2.1a12.9 12.9 0 0 1-2-1l.5-.4a14.2 14.2 0 0 0 12.2 0l.5.4c-.6.4-1.3.7-2 1l1.3 2.1a19.8 19.8 0 0 0 6-3c.5-5.1-.8-9.6-3.6-13.6ZM8 15.3c-1.2 0-2.2-1.1-2.2-2.4s1-2.4 2.2-2.4 2.2 1.1 2.2 2.4-1 2.4-2.2 2.4Zm8 0c-1.2 0-2.2-1.1-2.2-2.4s1-2.4 2.2-2.4 2.2 1.1 2.2 2.4-1 2.4-2.2 2.4Z"/></svg><span>Join the community</span></a></div>
<div class="sog-side__user"><span class="sog-avatar" style="width:24px;height:24px;font-size:10px">M</span><span class="sog-nav-label">Media · Account</span></div>
</aside><aside class="sog-side is-collapsed">
<div class="sog-side__brand"><img src="/brand/sog-mark.png" alt=""/><span>My School of<br/>Gains</span><button class="sog-side__fold" aria-label="Expand sidebar">›</button></div>
<a href="#" class="sog-nav-item is-active"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5V21H3z"/><path d="M9 21v-6h6v6"/></svg></span><span class="sog-nav-label">Home</span></a>
<a href="#" class="sog-nav-item"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg></span><span class="sog-nav-label">Calendar</span></a>
<a href="#" class="sog-nav-item"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 17 6-6 4 4 8-8"/></svg></span><span class="sog-nav-label">Challenge</span></a>
<a href="#" class="sog-nav-item"><span class="sog-has-dot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M9 3v18"/></svg></span><span class="sog-nav-label">Lessons</span><span class="sog-counter">0/7</span></a>
<a href="#" class="sog-nav-item"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span><span class="sog-nav-label">Group coaching</span></a>
<a href="#" class="sog-nav-item"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0M19 8v6M16 11h6"/></svg></span><span class="sog-nav-label">Apply</span></a>
<a href="#" class="sog-nav-item"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0M17 4a4 4 0 0 1 0 8M22 21a7 7 0 0 0-4-6.3"/></svg></span><span class="sog-nav-label">Community</span></a>
<a href="#" class="sog-nav-item"><span class="sog-has-dot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M9 7h6M9 11h6M9 15h4"/></svg></span><span class="sog-nav-label">Tools</span><span class="sog-counter">4/8</span></a>
<a href="#" class="sog-nav-item"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3 3 6l2 5 3-1v11h8V10l3 1 2-5-5-3a4 4 0 0 1-8 0z"/></svg></span><span class="sog-nav-label">Merch shop</span></a>
<a href="#" class="sog-nav-item"><span class=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg></span><span class="sog-nav-label">Settings</span></a>
<div class="sog-side__group">Staff</div>
<a href="#" class="sog-nav-item"><span style="color:var(--sog-amber)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/></svg></span><span class="sog-nav-label">Admin</span></a>
<div class="sog-side__promo"><b>Paper Gains is live</b><p>Pre-market with Jason, every market day.</p><a class="sog-btn sog-btn--discord sog-btn--sm sog-btn--block" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.3 4.4A19.8 19.8 0 0 0 15.4 3l-.6 1.3a18.4 18.4 0 0 0-5.6 0L8.6 3a19.7 19.7 0 0 0-4.9 1.5C.6 9.1-.3 13.6.1 18a19.9 19.9 0 0 0 6 3l1.3-2.1a12.9 12.9 0 0 1-2-1l.5-.4a14.2 14.2 0 0 0 12.2 0l.5.4c-.6.4-1.3.7-2 1l1.3 2.1a19.8 19.8 0 0 0 6-3c.5-5.1-.8-9.6-3.6-13.6ZM8 15.3c-1.2 0-2.2-1.1-2.2-2.4s1-2.4 2.2-2.4 2.2 1.1 2.2 2.4-1 2.4-2.2 2.4Zm8 0c-1.2 0-2.2-1.1-2.2-2.4s1-2.4 2.2-2.4 2.2 1.1 2.2 2.4-1 2.4-2.2 2.4Z"/></svg><span>Join the community</span></a></div>
<div class="sog-side__user"><span class="sog-avatar" style="width:24px;height:24px;font-size:10px">M</span><span class="sog-nav-label">Media · Account</span></div>
</aside></div>
List row with accent
Rows with a 3px left accent bar coloured by program, a label + title + meta, and a status pill on the right.
active challenges
Monthly Classic
October Classic6d 19h until the final bell
LiveOctober Classic6d 19h until the final bell
Quarterly Marathon
Q4 Marathon68d 20h until the final bell
LiveQ4 Marathon68d 20h until the final bell
Weekly Sprint
Sprint · Oct 26–302d 12h until portfolios lock
Entries openSprint · Oct 26–302d 12h until portfolios lock
View HTML
<div style="display:grid;gap:8px;max-width:420px">
<div class="sog-row sog-row--blue"><div class="sog-row__body"><span class="sog-label-sm sog-label-sm--blue">Monthly Classic</span><br/><b>October Classic</b><small>6d 19h until the final bell</small></div><span class="sog-pill sog-pill--live">Live</span></div>
<div class="sog-row sog-row--discord"><div class="sog-row__body"><span class="sog-label-sm sog-label-sm--discord">Quarterly Marathon</span><br/><b>Q4 Marathon</b><small>68d 20h until the final bell</small></div><span class="sog-pill sog-pill--live">Live</span></div>
<div class="sog-row"><div class="sog-row__body"><span class="sog-label-sm">Weekly Sprint</span><br/><b>Sprint · Oct 26–30</b><small>2d 12h until portfolios lock</small></div><span class="sog-pill sog-pill--open">Entries open</span></div></div>
Date block
Small-caps month over a big day number, used in "Coming up" event rows.
events
Oct28
🔒 Group coaching with JasonWed · 5:30pm to 7:30pm EDT
CoachingNov26
Market closed: Thanksgiving DayThu · All day
MarketView HTML
<div style="display:grid;gap:8px;max-width:340px">
<div class="sog-event"><span class="sog-date"><small>Oct</small><b>28</b></span><div class="sog-event__body"><b>🔒 Group coaching with Jason</b><small>Wed · 5:30pm to 7:30pm EDT</small></div><span class="sog-tag sog-tag--teal">Coaching</span></div>
<div class="sog-event"><span class="sog-date"><small>Nov</small><b>26</b></span><div class="sog-event__body"><b>Market closed: Thanksgiving Day</b><small>Thu · All day</small></div><span class="sog-tag sog-tag--red">Market</span></div></div>
Podium
Top three with gold, silver and bronze. 1st place is centred, raised, gold-bordered with a crown and soft gold glow. Numbers are green for gains, red for losses.
compact tiles
2ndEmp IV+0.8%
👑 1stWestCoastBrando+1.3%
3rdJamie N−0.6%
View HTML
<div class="sog-podium">
<div class="sog-podium__tile"><small>2nd</small><b>Emp IV</b><span class="sog-up">+0.8%</span></div>
<div class="sog-podium__tile sog-podium__tile--1"><small>👑 1st</small><b>WestCoastBrando</b><span class="sog-up">+1.3%</span></div>
<div class="sog-podium__tile"><small>3rd</small><b>Jamie N</b><span class="sog-down">−0.6%</span></div></div>
Module card
Course module with a gradient number block (green, teal, slate, plum), title, lesson count, status pill and lesson list. Locked modules blur the lesson titles and show the blue Apprentice pill.
modules
01
Foundation
7 lessons · 0 completeNot started- 1 · Introduction
- 2 · Trading vs. Investing
- + 5 more
02
Core Skills
8 lessons🔒 Apprentice- 8 · Lesson title here
- 9 · Lesson title here
03
Advanced Analysis
4 lessons🔒 Apprentice- 16 · Lesson title
04
Strategic Development
5 lessons🔒 Apprentice- 20 · Lesson title
View HTML
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px">
<div class="sog-module"><div class="sog-module__num">01</div><h4>Foundation</h4><small>7 lessons · 0 complete</small><div class="sog-bar" style="margin:0 4px 8px"><i style="width:0"></i></div><span class="sog-pill sog-pill--outline" style="margin-left:4px">Not started</span><ol><li>1 · Introduction</li><li>2 · Trading vs. Investing</li><li>+ 5 more</li></ol></div>
<div class="sog-module"><div class="sog-module__num sog-module__num--2">02</div><h4>Core Skills</h4><small>8 lessons</small><span class="sog-pill sog-pill--blue" style="margin-left:4px">🔒 Apprentice</span><ol class="sog-blur"><li>8 · Lesson title here</li><li>9 · Lesson title here</li></ol></div>
<div class="sog-module"><div class="sog-module__num sog-module__num--3">03</div><h4>Advanced Analysis</h4><small>4 lessons</small><span class="sog-pill sog-pill--blue" style="margin-left:4px">🔒 Apprentice</span><ol class="sog-blur"><li>16 · Lesson title</li></ol></div>
<div class="sog-module"><div class="sog-module__num sog-module__num--4">04</div><h4>Strategic Development</h4><small>5 lessons</small><span class="sog-pill sog-pill--blue" style="margin-left:4px">🔒 Apprentice</span><ol class="sog-blur"><li>20 · Lesson title</li></ol></div></div>
Tool card
Two-column grid of compact tool cards: bold title, optional green "Used", muted description and an outlined type chip (Calculator, Simulator, Quiz).
tools
Position size calculatorUsed
CalculatorThe exact share count from your account, your risk per trade and your stop.
Losing streak simulator
SimulatorThousands of simulated runs show how long a normal losing streak is.
Trader profile quiz
QuizSix quick questions, then your trader archetype and a three-step plan.
View HTML
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px">
<div class="sog-tool"><div><b>Position size calculator</b><span class="sog-used">Used</span><p>The exact share count from your account, your risk per trade and your stop.</p></div><span class="sog-type">Calculator</span></div>
<div class="sog-tool"><div><b>Losing streak simulator</b><p>Thousands of simulated runs show how long a normal losing streak is.</p></div><span class="sog-type">Simulator</span></div>
<div class="sog-tool"><div><b>Trader profile quiz</b><p>Six quick questions, then your trader archetype and a three-step plan.</p></div><span class="sog-type">Quiz</span></div></div>
Merch card
Square light product image (the only light surface in the portal), green NEW pill, bold name, price and a muted "View ↗".
rack
View HTML
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px">
<div class="sog-merch"><span class="sog-pill sog-pill--new">New</span><div class="sog-merch__img"></div><div class="sog-merch__body"><b>Three Black Crows Hoodie</b><div class="sog-merch__foot"><span>$88.00</span><a href="#">View ↗</a></div></div></div><div class="sog-merch"><span class="sog-pill sog-pill--new">New</span><div class="sog-merch__img"></div><div class="sog-merch__body"><b>Dead Cat Bounce · Halloween Button-Up</b><div class="sog-merch__foot"><span>$59.00</span><a href="#">View ↗</a></div></div></div><div class="sog-merch"><span class="sog-pill sog-pill--new">New</span><div class="sog-merch__img"></div><div class="sog-merch__body"><b>The Disclaimer · NFA Tee</b><div class="sog-merch__foot"><span>$36.00</span><a href="#">View ↗</a></div></div></div><div class="sog-merch"><div class="sog-merch__img"></div><div class="sog-merch__body"><b>Blood in the Streets Tee</b><div class="sog-merch__foot"><span>$42.00</span><a href="#">View ↗</a></div></div></div></div>Accordion row
Settings-style rows: title + muted summary with a chevron. Down chevron expands in place; right chevron (.sog-acc--link) navigates.
settings
Help and feedbackGet help, report a problem, or share an idea
Your detailsmedia@revupcmo.com · Account
Name, email and phone live here.
Trader profile0 of 6 answered
Six quick questions.
View HTML
<div style="max-width:420px">
<details class="sog-acc sog-acc--link"><summary><div><b>Help and feedback</b><small>Get help, report a problem, or share an idea</small></div></summary></details>
<details class="sog-acc" open><summary><div><b>Your details</b><small>media@revupcmo.com · Account</small></div></summary><div class="sog-acc__body">Name, email and phone live here.</div></details>
<details class="sog-acc"><summary><div><b>Trader profile</b><small>0 of 6 answered</small></div></summary><div class="sog-acc__body">Six quick questions.</div></details></div>
Checklist card
A flat card of green-check benefits that sits directly above the primary CTA.
community
- Daily market chat with traders one step ahead of you
- The portfolio challenge, with weekly, monthly and quarterly rounds
- Your portal and Discord linked, so everything is in one place
View HTML
<div style="max-width:420px;display:grid;gap:10px"><ul class="sog-checklist"><li>Daily market chat with traders one step ahead of you</li><li>The portfolio challenge, with weekly, monthly and quarterly rounds</li><li>Your portal and Discord linked, so everything is in one place</li></ul>
<a class="sog-btn sog-btn--discord sog-btn--lg sog-btn--block" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.3 4.4A19.8 19.8 0 0 0 15.4 3l-.6 1.3a18.4 18.4 0 0 0-5.6 0L8.6 3a19.7 19.7 0 0 0-4.9 1.5C.6 9.1-.3 13.6.1 18a19.9 19.9 0 0 0 6 3l1.3-2.1a12.9 12.9 0 0 1-2-1l.5-.4a14.2 14.2 0 0 0 12.2 0l.5.4c-.6.4-1.3.7-2 1l1.3 2.1a19.8 19.8 0 0 0 6-3c.5-5.1-.8-9.6-3.6-13.6ZM8 15.3c-1.2 0-2.2-1.1-2.2-2.4s1-2.4 2.2-2.4 2.2 1.1 2.2 2.4-1 2.4-2.2 2.4Zm8 0c-1.2 0-2.2-1.1-2.2-2.4s1-2.4 2.2-2.4 2.2 1.1 2.2 2.4-1 2.4-2.2 2.4Z"/></svg> Continue with Discord</a></div>
Locked state
Gated content: blurred preview behind a veil with a lock, one-line reason and a single CTA to the upgrade path. Never hide that the content exists.
gated
Group coaching
Every Wednesday after the market closes. Submit your TA for review ahead of time.
Replays · Notes · Q&A
Needs Premium Discord Access and Apprentice
Once your account has it, this page opens on its own.
Apply to Apprentice of GainsView HTML
<div class="sog-locked" style="max-width:420px"><div class="sog-locked__content"><h3 class="sog-title">Group coaching</h3><p>Every Wednesday after the market closes. Submit your TA for review ahead of time.</p><p>Replays · Notes · Q&A</p></div>
<div class="sog-locked__veil"><span class="sog-lock"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span><b>Needs Premium Discord Access and Apprentice</b><p>Once your account has it, this page opens on its own.</p><a class="sog-btn sog-btn--primary" href="#">Apply to Apprentice of Gains</a></div></div>
Empty state
Friendly one-liner, a reason, and one way forward. In the accent card it reads "Nothing on the calendar right now".
empty
Nothing on the calendar right nowNew calls and events show here as soon as they are posted.
View HTML
<div class="sog-empty" style="max-width:380px"><div class="sog-empty__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg></div><b>Nothing on the calendar right now</b>New calls and events show here as soon as they are posted.<br/><button class="sog-btn sog-btn--ghost sog-btn--pill sog-btn--sm">Turn on reminders</button></div>
Carousel dots
Square arrows at each end, dots in the middle with the active dot as a wider pill (Discord purple for Headlines, green elsewhere), and a "2 / 10" counter in the card header.
nav
Headlines2 / 10
View HTML
<div class="sog-card" style="max-width:380px"><div style="display:flex;justify-content:space-between;margin-bottom:40px"><span class="sog-label-sm sog-label-sm--amber">Headlines</span><span class="sog-count">2 / 10</span></div>
<div class="sog-carousel-nav"><button class="sog-arrow" aria-label="Previous">‹</button><div class="sog-dots"><i></i><i class="is-active"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><button class="sog-arrow" aria-label="Next">›</button></div></div>
<div class="sog-dots sog-dots--green" style="margin-top:16px"><i class="is-active"></i><i></i><i></i></div>
Discord button
#5865F2 with the Discord glyph and white text. Only for joining or signing in with Discord. Sizes: compact "Join", sidebar promo, and full-width "Continue with Discord".
sizes
View HTML
<div style="display:grid;gap:10px;max-width:380px"><div><a class="sog-btn sog-btn--discord sog-btn--sm" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.3 4.4A19.8 19.8 0 0 0 15.4 3l-.6 1.3a18.4 18.4 0 0 0-5.6 0L8.6 3a19.7 19.7 0 0 0-4.9 1.5C.6 9.1-.3 13.6.1 18a19.9 19.9 0 0 0 6 3l1.3-2.1a12.9 12.9 0 0 1-2-1l.5-.4a14.2 14.2 0 0 0 12.2 0l.5.4c-.6.4-1.3.7-2 1l1.3 2.1a19.8 19.8 0 0 0 6-3c.5-5.1-.8-9.6-3.6-13.6ZM8 15.3c-1.2 0-2.2-1.1-2.2-2.4s1-2.4 2.2-2.4 2.2 1.1 2.2 2.4-1 2.4-2.2 2.4Zm8 0c-1.2 0-2.2-1.1-2.2-2.4s1-2.4 2.2-2.4 2.2 1.1 2.2 2.4-1 2.4-2.2 2.4Z"/></svg> Join</a> <a class="sog-btn sog-btn--discord" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.3 4.4A19.8 19.8 0 0 0 15.4 3l-.6 1.3a18.4 18.4 0 0 0-5.6 0L8.6 3a19.7 19.7 0 0 0-4.9 1.5C.6 9.1-.3 13.6.1 18a19.9 19.9 0 0 0 6 3l1.3-2.1a12.9 12.9 0 0 1-2-1l.5-.4a14.2 14.2 0 0 0 12.2 0l.5.4c-.6.4-1.3.7-2 1l1.3 2.1a19.8 19.8 0 0 0 6-3c.5-5.1-.8-9.6-3.6-13.6ZM8 15.3c-1.2 0-2.2-1.1-2.2-2.4s1-2.4 2.2-2.4 2.2 1.1 2.2 2.4-1 2.4-2.2 2.4Zm8 0c-1.2 0-2.2-1.1-2.2-2.4s1-2.4 2.2-2.4 2.2 1.1 2.2 2.4-1 2.4-2.2 2.4Z"/></svg> Join the community</a></div>
<a class="sog-btn sog-btn--discord sog-btn--lg sog-btn--block" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.3 4.4A19.8 19.8 0 0 0 15.4 3l-.6 1.3a18.4 18.4 0 0 0-5.6 0L8.6 3a19.7 19.7 0 0 0-4.9 1.5C.6 9.1-.3 13.6.1 18a19.9 19.9 0 0 0 6 3l1.3-2.1a12.9 12.9 0 0 1-2-1l.5-.4a14.2 14.2 0 0 0 12.2 0l.5.4c-.6.4-1.3.7-2 1l1.3 2.1a19.8 19.8 0 0 0 6-3c.5-5.1-.8-9.6-3.6-13.6ZM8 15.3c-1.2 0-2.2-1.1-2.2-2.4s1-2.4 2.2-2.4 2.2 1.1 2.2 2.4-1 2.4-2.2 2.4Zm8 0c-1.2 0-2.2-1.1-2.2-2.4s1-2.4 2.2-2.4 2.2 1.1 2.2 2.4-1 2.4-2.2 2.4Z"/></svg> Continue with Discord</a></div>