Next Element Under ReviewPlanned
Reserved top slot
When a new primitive is being reviewed, add it here first so it appears at the top of the sandbox.
Style Sandbox
CSS Testing Grounds
This page is the review surface for canonical UI primitives. New or revised showcase items should be inserted at the top of the page while they are under review, then retained or reorganized into their long-term section after approval.
Review Queue
Always place the active approval target here first.
Page Shells And Headers
6. Page Archetypes9.1 Page Shells10.1 Page Shell
Use this group to validate page-level hierarchy, header bands, subheaders, metadata rows, and section spacing before moving deeper into component primitives.
Dashboard shell
Draft Dashboard Layout
6.1 Dashboard Pages6.3 Bento-Box Pages9.1 Page Shells
Compact title stack, metadata row, and a bento workspace with a clear primary panel.
12-teamSnakeLive mock
SettingsCompact controls
FormatHead-to-Head
Rounds16
Primary workspaceEmphasized center panel
Queue4 players
Pick1.07
Timer00:31
Supporting railRecommendations
Best valueSkater A
NeedsLW, D
Data page shell
Underlying Stats Surface
6.2 Data Pages9.1 Page Shells10.1 Page Shell
Softer header treatment, tighter filters, and flatter panels for analytics-first pages.
2025-26Skaters
Section Header
Standard pattern for sub-sections inside data and dashboard pages.
Dashboard shellApproved
Page shell
Approved canonical dashboard page shell drawn from DraftDashboard spacing, hierarchy, and multi-panel workspace structure.
Data-page shellApproved
Page shell
Approved softer analytics shell validated against the restyled underlying-stats production pages.
Panels, Cards, And States
7. Token System9.2 Panels9.3 Cards
Use this group for standard panels, softened panels, spotlight cards, empty states, loading blocks, and alert/status surfaces.
Standard PanelDefault shell
9.2 Panels10.2 Standard Panel
Use this for most dashboard and table containers.
Rows48
Updated2 min ago
Softened Data PanelFlatter analytics shell
7.6 Data-Page Softened Treatment9.2 Panels10.3 Softened Data Panel
Use this when the data should carry the emphasis instead of the chrome.
Filters4 active
Left-Accent CardSpotlight / recommendation
9.3 Cards9.12 Recommendation Rails10.4 Left-Accent Card
Use the flat accent strip for recommendation rails and insight cards. Do not replace it with a full-card gradient.
RecommendationPrioritize PP1 exposure
Empty StateIn-panel messaging
9.2 Panels10.10 Empty State
No matching players
Adjust your filters or search term. Keep empty states inside the parent shell.
Loading BannerTransient page state
9.2 Panels12. Implementation Checklist For Codex
Refreshing player summary rows
Standard panelApproved
Panel
Approved default shell for dashboard and table surfaces using the shared panel primitive.
Left-accent cardApproved
Card
Approved spotlight-card pattern based on SuggestedPicks and other left-accent production cards.
Empty stateApproved
State block
Approved in-panel empty/loading/state treatment. Page-level empty-state canon remains a separate deferred family.
Controls And Inputs
9.4 Buttons9.5 Segmented Toggles9.6 Inputs And Selects9.7 Filter Bars And Control Rows
Use this group for buttons, segmented toggles, search inputs, selects, dropdown triggers, steppers, and compact filter rows.
ButtonsGameGrid date/action controls
9.4 Buttons10.5 Primary Button
Segmented ToggleOne grouped control
9.5 Segmented Toggles10.6 Segmented Toggle
Search / InputsCompact filter row
9.6 Inputs And Selects9.7 Filter Bars And Control Rows10.7 Input / Select
12
Button setApproved
Controls
Approved against GameGrid dense controls and aligned compact dashboard utility buttons.
Segmented toggleApproved
Controls
Approved against the GameGrid mode toggle pattern with grouped active, hover, focus, and disabled behavior.
Search and filter rowApproved
Controls
Approved against ProjectionsTable, MyRoster, and PlayerStatsFilters for input density, select behavior, and dropdown positioning.
Tables And Charts
6.4 Table-Heavy Pages6.5 Chart Pages9.9 Tables9.10 Chart Containers
Use this group for sticky-header tables, compact stat tables, chart frames, legends, and toolbar treatments.
Analytics TableSticky header, compact rows
6.4 Table-Heavy Pages9.9 Tables10.8 Table Shell
| Player | Team | xGF/60 | Shots/60 | IPP |
|---|---|---|---|---|
| Connor McDavid | EDM | 3.48 | 10.7 | 81.2% |
| Nikita Kucherov | TBL | 3.19 | 9.8 | 78.6% |
| Cale Makar | COL | 2.44 | 8.4 | 69.3% |
Chart FrameToolbar + legend + notes
6.5 Chart Pages9.10 Chart Containers10.9 Chart Frame
Current sampleBaseline range
Chart notes belong inside the frame block, below the visualization.
Analytics tableApproved
Table
Approved sticky-header analytics table pattern aligned to ProjectionsTable, DraftBoard, and production underlying-stats tables.
Chart frameDeferred
Chart
Deferred until a stronger chart-first production page is documented and reviewed against the sandbox.