DESIGN STRUCTURE BRIEF
Answer these questions precisely so I understand exactly what you want.
1. HEADER
1.1 — Header width:
Full viewport width (stretches edge to edge)
Constrained to the RED BOX width (centered, max-width 1100px)
Is the header full-width or does it match the content box below?
1.2 — Header position relative to RED BOX:
OUTSIDE (above the red box)
INSIDE (top of the red box)
Does the red box start below the header, or does the header sit inside it?
1.3 — Header height (pixels):
How tall is the header?
2. RED BOX (Content Boundary)
2.1 — Red box max-width (pixels):
What is the maximum width of the entire content area (the red box)?
2.2 — Red box positioning:
Centered on the page (margin: 0 auto)
Is the red box centered or left-aligned?
2.3 — Red box contains:
Header
Left rail
Main content (700px)
Right rail
Savebar
Which elements are INSIDE the red box boundary?
3. LEFT RAIL (Filter/Categories)
3.1 — Left rail position:
INSIDE red box, on the left (takes up space)
FLOAT in the left margin (negative margin, outside content)
OFF-CANVAS DRAWER (hidden until toggled, slides in from left)
Where does the left rail sit at WIDE viewports?
3.2 — Left rail width at WIDE (pixels):
3.3 — Left rail width at NARROW (pixels):
3.4 — Left handle position:
At viewport LEFT EDGE (left: 0)
At RED BOX LEFT EDGE (inset from viewport)
Where does the left handle stick out from?
4. MAIN CONTENT
4.1 — Main content width (pixels):
4.2 — Main content positioning:
Centered (margin: 0 auto)
5. RIGHT RAIL (Preview/Actions)
5.1 — Right rail position:
INSIDE red box, on the right (takes up space)
FLOAT in the right margin (negative margin, outside content)
OFF-CANVAS DRAWER (hidden until toggled, slides in from right)
Where does the right rail sit at WIDE viewports?
5.2 — Right rail width at WIDE (pixels):
5.3 — Right rail width at NARROW (pixels):
5.4 — Right handle position:
At viewport RIGHT EDGE (right: 0)
At RED BOX RIGHT EDGE (inset from viewport)
Where does the right handle stick out from?
6. SAVEBAR (Bottom)
6.1 — Savebar width:
Full viewport width (stretches edge to edge)
Constrained to RED BOX width (centered, max-width 1100px)
Does the savebar stretch full-width or match the content box?
6.2 — Savebar position:
Fixed (stays at bottom of viewport as you scroll)
Absolute (below the red box, scrolls with content)
7. RESPONSIVE BREAKPOINT
7.1 — Breakpoint (pixel width where layout changes):
At what viewport width do the rails become drawers?
SUBMIT DESIGN BRIEF