<header>Control bar
Brand identity, symbol search, timeframe controls, and market-session status.
01
Semantic HTML5 landmarks
The outer structure is readable to browsers, assistive technology, and future developers.
<nav>Primary navigation
Trading areas such as watchlist, screener, portfolio, alerts, and research.
<main>Core workspace
The chart, story grid, responsive market cards, and comparison widgets live here.
<aside>Side rails
Left navigation and right context panels support the workspace without becoming the main content.
<footer>Status readout
Data freshness, secondary links, and final page-level status belong at the bottom of the frame.
02
Trading dashboard structural frame
Archetype A is the base, with Editorial and Curation features planned inside the workspace.
Market Command Header
Session overview · Watchlist scan · Risk context
Central market workspace
Reserved for the chart, asymmetric story grid, responsive card gallery, and comparison widgets.
03
Week 02 variables integrated into Week 03
The frame does not introduce a new visual language; it reuses the token foundation.
var(--space-md)Consistent layout gaps
Grid gaps, section padding, and panel spacing follow the same rem-based rhythm.
var(--color-surface)Themed panels
Header, rail, workspace, context drawer, and footer remain readable in both light and dark mode.
var(--size-heading-md)Fluid section titles
Important dashboard labels scale with the Week 02 clamp-based typography system.
minmax()Responsive boundaries
Side rails keep usable minimums while the central workspace receives the remaining room.
.dashboard-frame {
grid-template-columns: minmax(4.75rem, 6rem) minmax(0, 1fr) minmax(16rem, 22rem);
gap: var(--space-md);
background: var(--color-background);
}04
Week 03 verification
Manual checks required before the next milestone begins.
- No Div-Soup Test
Confirm the outer wrappers use semantic landmarks instead of generic nested divs. - Keyboard Focus Check
Press Tab and verify the navigation links receive high-contrast focus rings in a logical order. - Viewport Resiliency
Resize from 320px to 2560px and confirm the frame rearranges without horizontal overflow. - Token Preservation
Confirm Week 02 remains unchanged and Week 03 consumes the existing spacing and color variables.
Responsive frame rule
When the viewport narrows, the Grid moves from a three-column dashboard frame to a stacked frame. The side rails do not collapse to zero because their columns use minmax() constraints and the central workspace uses minmax(0, 1fr).