Molecules

Small compositions of atoms — the surfaces that group content: cards, stat blocks, and callouts.

Cards & tiles

One surface family. sg-card is the base; the modifiers stack on it — --elevated, --hover, --glass, --gradient. Ported from the EPM Labs card set.

Base & elevated

Card

The base surface for grouped content.

Elevated

Floats above the page with shadow-lg.

HTML

<div class="sg-card">…</div>
<div class="sg-card sg-card--elevated">…</div>

Gradient Border Card

Featured

A brand-gradient border via background-clip. Glows on hover; add sg-glow for an always-on halo.

HTML

<div class="sg-card sg-card--gradient">…</div>

Glass Card

Glass

Backdrop blur over a translucent fill. Needs something behind it to blur.

HTML

<div class="sg-card sg-card--glass">…</div>

Web

<div class="sg-card sg-card--gradient">…</div>

Compose modifiers on sg-card. Ships today in css/components.css.

Flutter (planned)

StoaCard(variant: .gradient)

A StoaCard widget reading the same shared tokens (surface, borderSubtle, brandGradient, radiusXl). Per ADR-0008 components are reimplemented per platform on the shared token set — no widget exists yet.

Base for standard grouping — lessons, settings, form sections.
Elevated / --hover for active, focused, or tappable cards (a subtle 2px lift).
Gradient border for featured content and premium callouts — sparingly.
Glass only over imagery or a colored wash (modals, floating menus).

List tiles

⚙️

Settings

Reminders, sound, account

🔔

Daily reminder

Nudge me to practice

HTML

<div class="sg-tile">
  <div class="sg-tile__icon">⚙️</div>
  <div class="sg-tile__text"><div class="sg-tile__title">Settings</div><div class="sg-tile__sub">…</div></div>
  <span>›</span>
</div>

Stats & progress

The numbers a learner sees on Home and Stats — a big figure with a label, a streak chip, and a progress bar.

Stat cards + progress

Lessons done

82%

Drill accuracy

🔥 6-day streak

Charleston track · 64%

HTML

<div class="sg-card"><div class="sg-stat"><div class="sg-stat__num">17</div><div class="sg-stat__label">Lessons done</div></div></div>
<div class="sg-progress"><div class="sg-progress__fill" style="width:64%"></div></div>

Web

<div class="sg-stat">…<div class="sg-progress">

Flutter (planned)

StoaStat(...) · StoaProgress(value: 0.64)

Widgets over the shared brandOrange / success tokens.

Callouts

The teaching voice on screen — the "why this move is right" explanation that carries the product's value.

Callout

Why this is right Passing the three tiles you're least likely to use keeps your strongest hand options open — the Charleston is about shedding, not collecting.

HTML

<div class="sg-callout">
  <span class="sg-callout__label">Why this is right</span>
  <span class="sg-body">…</span>
</div>

Web

<div class="sg-callout">…</div>

Flutter (planned)

StoaCallout(label: '…', child: …)

Left brand-orange rule + surface tokens; the drill runner's explanation card.