School of Gains · Presented by PaperGains

Button

Portal-standard buttons: 12px corners, sentence case, weight 800. #00C948 with dark #04130A text is the one primary action per view.

Rules

Use sentence case ("Join the community"), never ALL CAPS.
One primary button per section. Pair it with secondary or ghost.
Never use pill (9999px) radius on buttons. Pills are only for badges and chips.
Discord blue only for "Continue with Discord" or Discord joins.

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>

size

View HTML

<button class="sog-btn sog-btn--primary sog-btn--sm">Small</button>
<button class="sog-btn sog-btn--primary">Medium</button>
<button class="sog-btn sog-btn--primary sog-btn--lg">Large</button>

icon

Start your application

View HTML

<a href="#" class="sog-btn sog-btn--primary">Start your application <span aria-hidden="true">→</span></a>
<button class="sog-btn sog-btn--secondary"><span aria-hidden="true">▶</span> Watch the live session</button>

state

View HTML

<button class="sog-btn sog-btn--primary" disabled>Disabled</button>
<button class="sog-btn sog-btn--primary is-loading">Loading</button>

block (forms, mobile)

View HTML

<div style="max-width:360px"><button class="sog-btn sog-btn--primary sog-btn--block">Email me a code</button></div>

portal set: ghost, pill edit, chips, full-width

View HTML

<div style="display:grid;gap:14px">
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center">
<button class="sog-btn sog-btn--primary">Turn on reminders</button>
<button class="sog-btn sog-btn--ghost">My reminders</button>
<button class="sog-btn sog-btn--ghost sog-btn--pill">Open the calendar</button>
<button class="sog-btn sog-btn--ghost sog-btn--pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16z"/></svg> Edit home</button>
<button class="sog-btn sog-btn--discord"><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</button></div>
<div style="display:flex;gap:6px;flex-wrap:wrap"><button class="sog-chip">Accessories ↗</button><button class="sog-chip is-active">Hoodies &amp; Jackets ↗</button><button class="sog-chip">Shirts ↗</button></div>
<div style="max-width:320px;display:grid;gap:8px"><button class="sog-btn sog-btn--primary sog-btn--lg sog-btn--block">Start my application</button><button class="sog-btn sog-btn--ghost sog-btn--lg sog-btn--block">Back to my portal</button></div></div>