Framed Grid Layout

Use When

• A page needs a clean technical structure with visible section boundaries.
• Content should feel precise, organized, editorial, or system-like.
• The design calls for thin guide borders, L-shaped corner brackets, and consistent framed boxes.

Layout Rules

1. Define the parent grid first; make every section snap to the same columns and rows.
2. Use one border color, one corner bracket color, and one spacing scale across the page.
3. Keep frames rectangular and precise. Avoid floating cards, soft blobs, and uneven margins.
4. Use thin lines: 1px borders, low-contrast dividers, and subtle bracket marks.
5. Add diagonal background texture at very low opacity; it should read only as surface tension.
6. Align section padding, headings, controls, and media edges to the same grid rhythm.
7. Separate sections with consistent gaps, not random whitespace.

Base Tokens

Use neutral colors and tune contrast per theme.