Atoms

The smallest interactive parts — buttons, badges, inputs, toggles, avatars. Sized for an older, big-screen audience: 44px minimum targets, AA contrast, visible focus.

Buttons

44px minimum target. Primary carries the brand glow; ink-on-orange stays AA in both themes.

Variants & sizes

HTML

<button class="sg-btn sg-btn--primary">Start drilling</button>
<button class="sg-btn sg-btn--secondary">Skip</button>
<button class="sg-btn sg-btn--ghost">Learn more</button>
<button class="sg-btn sg-btn--primary sg-btn--sm">Small</button>
<button class="sg-btn sg-btn--primary sg-btn--lg">Large</button>

Web

<button class="sg-btn sg-btn--primary">

Flutter (planned)

StoaButton(variant: .primary, size: .base)

Reads brandOrange, textOnBrand, glowBrand, tapMin (44dp).

Badges & tags

Status shorthand — skill state, tier, catalog flags.

Badges

New Mastered In progress Locked Free Neutral Outline

HTML

<span class="sg-badge sg-badge--brand">New</span>
<span class="sg-badge sg-badge--success">Mastered</span>
<span class="sg-badge sg-badge--outline">Outline</span>

Web

<span class="sg-badge sg-badge--success">

Flutter (planned)

StoaBadge(tone: .success)

Semantic tone tokens (success / warning / danger / info / brand).

Inputs

Label + control + help/error, at a comfortable target height.

Fields

Email We email the new-card prep each season.

Password At least 8 characters.

Skill level

Notes

HTML

<div class="sg-field">
  <label class="sg-label">Email</label>
  <input class="sg-input" type="email" />
  <span class="sg-help">…</span>
</div>

Web

<input class="sg-input"> · sg-input--error

Flutter (planned)

StoaField(label:…, error:…)

An InputDecorationTheme derived from the shared border/danger/radius tokens.

Toggles & avatars

Switches, avatars, and the segmented mode picker.

Controls

SR SS RR

HTML

<label class="sg-switch"><input type="checkbox" checked><span></span></label>
<span class="sg-avatar">SS</span>
<span class="sg-segmented" role="group">…</span>

Web

<label class="sg-switch"> · sg-avatar · sg-segmented

Flutter (planned)

StoaSwitch · StoaAvatar · StoaSegmented

Switch uses ease-spring; avatar fills with the brand gradient + textOnBrand.