Shared Component Kernel · Interactive Specification

Every State. Every Device. One Visual Language.

This board is the acceptance reference for the reusable component layer. Toggle appearance and team identity to confirm that structure, readability, and hierarchy remain stable while accents change.

Appearance
Team Accent
01 — Controls

Compact, Clear, Predictable.

One primary action per decision context. Secondary controls stay visually quieter without sacrificing touch targets.

Action Hierarchy

Buttons and Icon Controls

42px standard height · 44px minimum mobile target
Primary
Secondary
Ghost
Destructive
Disabled + reason required
Icon with label
Non-blocking success
Consequential action
Navigation

Workspace Tabs

Keyboard arrows · active state · badges · horizontal mobile rail
02 — Identity

Faces Are Part of the Information Architecture.

Manager imagery stays prominent in hero moments. Player imagery scales by context. Missing imagery becomes a deliberate identity state.

NJ
BizzyShadyville GiantsManager Hero · 142px
JA
Buffalo BillsJosh AllenPlayer Hero · Large Cutout
F/A
Roster StatusFree AgentIntentional Fallback
03 — Metrics

Centered Units, Clear Consequence.

Labels, values, supporting details, and badges form one centered vertical unit. Calculations stay outside the component.

Week Projection19.514.6–24.4 range9.8 Range Width
Recent Points24.7Week 1+5.2 vs Projection
Next Opponent@ TENSep 20 · 1:00 PMSchedule Confirmed
Start Confidence80%Current recommendationStarting QB
Player intelligence is current. Last successful update 2 minutes ago.
04 — Honest System States

Never Leave the User Guessing.

Every state explains what happened, what is still safe, and the next useful action. Layout is reserved during loading.

Lineup Updated

Dart is now starting. Your Week 2 lineup remains complete.

Loading

Reserve the final layout and preserve orientation.

No Claims Yet

Your waiver queue is empty.

Offline

Cached roster data remains visible. Changes will wait for a connection.

Swap Was Not Saved

Your previous lineup is intact. No roster state was lost.

Data Is 18 Minutes Old

Showing the last valid score while the live provider reconnects.

05 — Feedback and Priority

Action Before Information.

Notifications retain identity, deadline, consequence, and route-to-action. Reversible success uses concise toasts.

Starter Availability ChangedJosh Allen is OUT. Review your legal replacements.
Trade Proposal Needs a DecisionHoney offered 2 players and 18 FAAB. Expires in 4 hours.
Waiver Claim SubmittedYour $24 bid is second in the processing queue.

Toasts confirm reversible actions without blocking the next task. Durable history remains in the relevant activity surface.

✓Player StarredJosh Allen was added to your watchlist.
06 — Dialog Shell

Contained Workflows, Persistent Actions.

Desktop dialogs center. Mobile dialogs center or align to the top safe area—never the bottom. Only the body region scrolls.

07 — Responsive Contract

Same Capability, Deliberate Form.

Breakpoints respond to usable space and interaction mode, not device marketing names. No critical action disappears.

Phone · 320–430Single-column priority

Large identity, horizontal tab rails, top-aligned dialogs, persistent actions, 44px touch targets.

Note · 431–760Compact two-column where useful

Metrics and secondary cards may pair; primary identity still dominates.

Fold · Pane-awareWidth decides composition

Folded uses phone structure. Open uses the laptop hierarchy without excessive whitespace.

Laptop · 1080+Dense, inward-balanced layouts

Use available width for context, not oversized gaps or expanded buttons.

08 — Component Contract Matrix

Clear Ownership Prevents Drift.

Each component owns visual and interaction consistency. Domain calculations, network requests, and league rules remain outside.

Component Required Inputs Required States Responsive Rule Accessibility Rule Never Owns
Button tone, size, label, icon default, hover, pressed, disabled, busy 44px target on touch devices visible focus and disabled reason business validation
Identity name, image, fallback, role loaded, missing, broken, free agent hero scale preserved on mobile meaningful adjacent text profile fetching
MetricGrid label, value, detail, trend neutral, positive, warning, critical 4 → 2 → 1 columns reading order matches visual order calculation
FeedbackState kind, title, detail, action loading, empty, offline, error, stale, success reserves intended layout status announced without repetition retry transport
DialogShell title, body, actions, close open, busy, error, success center desktop; top/center mobile focus trap, Escape, restoration workflow rules
DataFreshness validAt, refreshState, source current, refreshing, stale, failed compact copy on narrow widths time and state conveyed in text polling
Toast tone, message, undo/action enter, visible, paused, dismissed safe-area aware placement live region with controlled timeout durable history
WorkspaceTabs items, active id, badge default, active, focus, overflow hidden-scroll horizontal rail arrow keys and ARIA panels route data
✓Lineup UpdatedYour previous state remains available in activity history.