Foundations: Layouts — The Rhythm of Play+
Philosophy & Purpose
Layout is our invisible conductor—a silent rhythm that brings structure to interaction, movement to content, and clarity to every experience. In Play+, layout is not just a frame—it is the stage where adaptability meets intention.
Rooted in our Adaptive and Intuitive pillars, our layout system responds fluidly, guides effortlessly, and feels exactly right—across screens, flows, and user states. Our principles of rhythm, hierarchy, and harmony reduce cognitive overload and preserve focus. Layout breathes life into our Fluid soul and fuels our Metamorphic ambitions—interfaces that intelligently reflow and adapt without losing coherence.
Good layout should not be noticed. It should be felt.
Core Layout Principles
Our layout system is governed by five key principles:
| Principle | Design Guideline | Developer Implementation |
|---|---|---|
| Hierarchical | Establish a clear visual hierarchy; prominence reflects importance. | Use semantic HTML (<main>, <nav>, <aside>) and structure-defining components. |
| Consistent | Apply a single spacing/grid system everywhere; eliminate visual guesswork. | Use spacing tokens ($space-*), not magic numbers. Adhere to grid columns. |
| Adaptable | Design layouts that fluidly reflow across devices and contexts. | Use mobile-first, relative units (rem, %). Apply min-width media queries. |
| Efficient | Prioritize scan-ability and intent clarity. Avoid clutter and ambiguity. | Group related items, use white space to create breathing room and guide the eye. |
| Inclusive | Ensure navigable, logical, and accessible layouts for everyone. | Preserve logical DOM order, visible focus states, and avoid layout shifts on interaction. |
The Spacing System (8pt Grid)
We use an 8pt spacing system to create rhythm, balance, and harmony. All spacing, padding, and margins are multiples of 8px, ensuring a uniform cadence across devices and layouts.
| Token | Value (px) | Use Case |
|---|---|---|
$space-xxs | 4 | Fine-tuning within tight UI (e.g., icon+text, badges). |
$space-xs | 8 | Spacing between closely related elements (e.g., chips, tags). |
$space-sm | 16 | Internal padding for small containers (e.g., cards, buttons). |
$space-md | 24 | Gaps between medium components, inter-card spacing. |
$space-lg | 32 | Section spacing, larger paddings. |
$space-xl | 48 | Major group separation (e.g., sidebar vs content). |
$space-xxl | 64 | Hero spacing, visual anchoring for key moments. |
Note: Spacing transitions are animated subtly across screen size changes, making movement feel organic.
The 12-Column Grid System
Play+ uses a 12-column responsive grid to structure content across screens. It ensures adaptability without rigidity, and flexibility without chaos.
| Breakpoint | Screen Range | Columns | Gutter | Description |
|---|---|---|---|---|
| Extra Small (xs) | 0 - 599px | 4 | 16px | Compact stacking for handhelds |
| Small (sm) | 600 - 904px | 8 | 24px | Tablets, split views |
| Medium (md) | 905 - 1239px | 12 | 24px | Default web layout size |
| Large (lg) | 1240 - 1439px | 12 | 32px | Desktops, dashboard spaces |
| Extra Large (xl) | 1440px+ | 12 | 32px | High-res workspace, full-grid use |
Columns may be spanned, nested, or left empty to create breathing rhythm.
Structural Patterns & Best Practices
Common Page Layouts
- Focus Layout (1-Column)
- Ideal for forms, articles, sign-in pages.
- Centered, constrained width for readability.
- Split View (2-Column)
- Used for list-detail patterns (e.g., inbox, email).
- Primary: List pane. Secondary: Details pane.
- Hub & Spoke (3-Column)
- Ideal for dashboards or creative tools.
- Left: Navigation or tree. Center: Workspace. Right: Inspector panel or context info.
Persistent Elements
- Header: Sticky or fixed depending on priority. Use for navigation, actions.
- Footer: Static, housing meta content—not primary actions.
- Sidebar: Fixed for large viewports; collapsible on smaller screens. Hosts filters, navigation, or utility tools.
Scrolling Best Practices
| Type | When to Use |
|---|---|
| Vertical | Default behavior. Keep it unified and page-wide. |
| Inner/Nested | Use rarely, with clear affordances. Acceptable for dropdowns, tables, panes. |
| Horizontal | Avoid unless displaying uncollapsible tabular data. Provide scroll cues. |
Affordance Tip: Use fade shadows, scrollbars on hover, or peek visuals to suggest scrollability.
Future State: AI-Powered Adaptive Layouts
We envision a future where layout decisions are made dynamically—powered by user context, behavior, and goals.
Conceptual Use Cases:
- A power user on desktop sees a 3-column layout with a visible inspector.
- A new mobile user is guided by a simplified, single-column onboarding flow.
- A data-heavy dashboard increases density, while a text-focused page optimizes white space.
These intelligent adaptations will honor our design pillars, but demand explainability, override controls, and user trust.
Play+ is laying the groundwork today—using consistent structure—so that future interfaces can breathe and evolve naturally.
Guardrails
| ✅ Do | ❌ Don't |
|---|---|
| Use spacing tokens for margins and padding. | Use arbitrary pixel values or inline styles. |
| Align to the 12-column grid for major elements. | Break the grid for structural content. |
| Start with mobile-first responsive design. | Design for desktop and retrofit responsiveness. |
| Use layout components like Stack, Grid, and Container. | Use ad-hoc CSS positioning where system components exist. |
| Indicate scrollable containers clearly. | Hide content in scrollable areas without visual cues. |
| Maintain logical DOM order and navigability. | Reorder content visually without preserving accessibility order. |
Play+ layouts are not boxes—they are breath.