Built for the league

The Variant A visual system: PFFL red, Barlow type, rounded panels and one set of shared states.

PFFL at the centre

PFFL red
#E71B24
Black
#000000
Cool gray
#BFBFBF
White
#FFFFFF

The shield is the approved full-colour mark. No secondary Steel or Iron marks. Derived neutral surfaces and dark red text support readable UI.

Condensed, with purpose

Know the rules.
Make the call.

Barlow Condensed for headings; Barlow for forms and reading. 16px body, 14px metadata, generous spacing.

Actions and states

PendingCompleted on timeOverdueNeeds attentionDraft

Status words carry meaning. Scores have no pass/fail colour.

Assignment completed lateSubmitted Sep 6. Your deadline was Sep 4 at 11:59 p.m. Eastern Time.

Visible field label

A hint sits between the label and the control.

Interaction principles

44px minimum targets. Visible keyboard focus. Single-column mobile flows. Matching supports drag, taps and keyboard.

One primary action at each decision. Every destructive action explains its effect. No timer, autosave or answer reveal.

Shared states

Loading, empty, unavailable and error states. Route files map these to Next.js loading.tsx and error.tsx.

Interactive examples load with JavaScript.

Loading

Loading your assignments…

You’re all caught up

When your league assigns a quiz, it will appear here.

Explore the quiz bank

We couldn’t load this page

Your records haven’t changed. Try again when your connection is available.

No retry yet.

You don’t have access to this

This area is limited to league administrators.

This invitation has expired

Ask your league administrator to send a new one.

Validation

Every control has a visible label. Hints and errors are linked with aria-describedby, invalid controls set aria-invalid, and a summary announces all problems at once. Submit the form empty to see it.

Dialog

Destructive actions confirm in a dialog that explains the effect. Focus moves into the dialog, stays there while it is open, and returns to the button that opened it.

No decision yet.

Table

A real table with column headers at every width. Below 768px each row stacks into label/value pairs, so nothing scrolls the page sideways.

Quizzes (fictional example)
Quiz	Organization	Version / status	Questions	Actions
Field positioning basics	Youth Positioning · Rookie	Published · v2	8	Edit, Field positioning basics Assign, Field positioning basics
Youth rules refresher	Youth General rules · Rookie	Published · v1	12	Edit, Youth rules refresher Assign, Youth rules refresher
Adult game management	Adult General rules · Head Official	Published · v1	15	Edit, Adult game management Assign, Adult game management
Division rules	Youth Division specific rules · Rookie	Draft	6	Edit, Division rules