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-brand 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 brand, textOnBrand, glowBrand, tapMin (the 44dp floor every target clears) and btnHeightLg (52dp, the .lg variant's own height — not a second floor). The destructive variant takes dangerStrong + textOnDanger — textOnBrand is 3.35:1 there and cannot stand in.

Badges & tags

Status shorthand — skill state, tier, catalog flags.

Badges

NewMasteredIn progressLockedFreeNeutralOutline

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)

Padding is font-relative (badgePadY / badgePadX × the font size), not a spacing step. Semantic tone tokens (success / warning / danger / info / brand) — danger and info take the brighter -light ink in dark only, where the plain hue clears just ~4:1 on its own dim tint.

Inputs

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

Fields

EmailWe email the new-card prep each season.

PasswordAt 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. Error help text takes a per-theme ink swap — dangerLight in dark, danger in light — because plain danger is 4.16:1 on a card surface in dark.

Toggles & avatars

Switches, avatars, and the segmented mode picker.

Controls

SRSSRR

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 and reads switchTrack / switchThumb — its own tokens, because WCAG 1.4.11 wants 3:1 on the track and under the thumb. Avatar fills with a solid brand + textOnBrand: on the brand gradient that ink is 1.06:1 at the pale stop, so there is no gradient to assert against.