Layout in Couldja defines how content is structured, aligned, and scaled across screen sizes. This system is derived from Brainly Pencil’s layout principles and focuses on clarity, consistency, and responsive behavior.
Containers
Max width: 960px. Used for reading-focused content and primary flows.
Max width: 1200px. Used for dashboards, dense layouts, and data views.
Grid System
The Couldja grid uses 12 columns with a 24px gutter. Columns collapse responsively on smaller screens.
Vertical Layout & Flow
Vertical spacing is handled using consistent spacing tokens. Avoid stacking arbitrary margins.
Guidelines
• Use containers to control line length and readability.
• Prefer the grid for horizontal alignment instead of manual widths.
• Keep layouts flexible and content-driven.
• Spacing communicates hierarchy more effectively than borders.
• Design mobile-first; enhance layouts for larger screens.