Hierarchy and intent
Primary, competitive, prestige, secondary, outline, ghost, and danger
Core Competitive / Component System 1.0
The isolated reference for reusable CoreComp interface patterns. Every specimen uses semantic design tokens, production-ready spacing, responsive behavior, and accessible interaction states.
02 / Containers
Cards express hierarchy through border, surface, and metadata—not gratuitous glow. Interactive, selected, live, locked, loading, and empty treatments remain structurally consistent.
32-team elimination bracket with ranked seeding.
The active selection has a persistent non-color indicator.
Best of five · Map 3 · Series tied 1–1
Unlocks after the current competitive stage ends.
Content-shaped skeleton preserves final geometry
Explains why content is missing and offers one recovery action
No saved competitions
Save an event to see it here.
03 / Structured data
Competitive data remains scannable, sortable, keyboard reachable, and useful on narrow screens. Status is always reinforced by text and iconography.
Selectable rows, fixed numeric alignment, state badges, loading, and empty-state pattern
| Rank | Team | Record | Rating | Streak | Status | Action |
|---|---|---|---|---|---|---|
| 01 | 18–2 | 1,842 | +7 | Qualified | ||
| 02 | 16–4 | 1,794 | +3 | Playing | ||
| 03 | 14–6 | 1,731 | −1 | Review | ||
| 04 | 13–7 | 1,688 | +2 | Locked |
04 / Context switching
Tabs preserve context, announce selection, and never hide destructive or primary actions. Underlines suit dense pages; contained tabs suit focused panels.
Route or major content region
Compact filters and subviews
Showing all matches.
05 / Refinement
Search, selects, segmented controls, and active-filter summaries work together. Applied criteria are visible and removable; Clear all appears only when useful.
Responsive search, dropdowns, and clear action
One selection from a compact set
Current value: 5v5
06 / Compact metadata
Chips summarize status, filters, and metadata. They stay short, preserve readable contrast, and pair color with a label, icon, or shape.
Status, selection, removable, and disabled examples
07 / Focused decisions
Modal dialogs are reserved for focused decisions, short forms, and high-risk confirmation. They identify impact, keep Escape behavior, and return an obvious cancel path.
Focused form or explanation
Requires explicit consequence copy
Delete team?
Never use a vague “Are you sure?”
Prevents duplicate submission
The action label stays visible while progress is announced.
08 / Data entry
Controls use persistent labels, 44px targets, clear instructions, and validation text. Error and success states never rely on border color alone.
Default, filled, success, error, read-only, and disabled
Checkboxes, radios, switch, file drop, and mixed states
09 / System feedback
Alerts explain what happened, its severity, and what the player can do next. Persistent banners are reserved for system-wide conditions.
Registration opens tomorrow
Score report verified
Roster verification incomplete
Score report disputed
Match reporting is live
Season updatePlacements now contribute to the Core rating.
11 / Quality gate
This matrix is the acceptance gate for future component work. A family cannot be considered complete until every applicable state is represented and tested.
| Family | Default | Hover | Focus | Active | Loading | Success | Warning | Error | Disabled | Empty |
|---|---|---|---|---|---|---|---|---|---|---|
| Buttons | — | |||||||||
| Cards | ||||||||||
| Tables | ||||||||||
| Tabs | — | — | — | — | ||||||
| Filters | — | — | ||||||||
| Chips | — | — | ||||||||
| Modals | — | |||||||||
| Form controls | — | |||||||||
| Alerts | — | — | — | |||||||
| Navigation | — | — | — | — |
InteractionHover, press, keyboard focus, selection, and disabled states.
Async feedbackLoading, success, warning, error, and retry behavior.
Content resilienceEmpty, long-copy, narrow-screen, and reduced-motion handling.