Layout Philosophy¶
NS-OG 2.0 emphasizes structure, clarity, and breathing room. Our layout philosophy creates visual hierarchy through deliberate spacing, responsive grids, and consistent component sizing—ensuring interfaces feel organized yet spacious across all screen sizes.
Core Principles¶
1. Hierarchical Structure¶
Every Nova Suite interface follows a clear information hierarchy:
┌─────────────────────────────────┐
│ App Header (Navigation) │ ← Global context
├─────────────────────────────────┤
│ ┌───────────┬───────────────┐ │
│ │ Sidebar │ Main Content │ │ ← Primary workspace
│ │ │ │ │
│ │ │ ┌─────────┐ │ │
│ │ │ │ Card │ │ │ ← Content containers
│ │ │ └─────────┘ │ │
│ └───────────┴───────────────┘ │
└─────────────────────────────────┘
Hierarchy levels: - Level 1: Application shell (header, sidebar) - Level 2: Content areas (main workspace, panels) - Level 3: Containers (cards, sections) - Level 4: Components (buttons, inputs, text)
2. Generous Spacing¶
Whitespace is not wasted space—it's a design element that improves comprehension and reduces cognitive load.
Spacing Scale:
| Size | Value | Use Case |
|---|---|---|
xs | 4px | Compact grouping, icon padding |
sm | 8px | Related items, form field groups |
md | 16px | Component margins, card padding |
lg | 24px | Section separation |
xl | 32px | Major section breaks |
2xl | 48px | Page sections |
3xl | 64px | Hero sections, landing pages |
Example usage:
/* Card internal spacing */
.nova-card {
padding: var(--space-md); /* 16px */
margin-bottom: var(--space-lg); /* 24px */
}
/* Section breaks */
.content-section {
margin-bottom: var(--space-2xl); /* 48px */
}
3. Breathing Room¶
Elements need space to breathe. Avoid edge-to-edge content:
Minimum margins: - Mobile: 16px - Tablet: 24px - Desktop: 32px
Grid System¶
12-Column Responsive Grid¶
Orbit uses a flexible 12-column grid that adapts to screen sizes:
<div class="nova-grid">
<div class="col-12 col-md-6 col-lg-4">
<!-- Full width mobile, half tablet, third desktop -->
</div>
<div class="col-12 col-md-6 col-lg-8">
<!-- Complementary column -->
</div>
</div>
Breakpoints:
| Name | Width | Columns | Gutter |
|---|---|---|---|
| Mobile | < 768px | 4 | 16px |
| Tablet | 768px - 1024px | 8 | 24px |
| Desktop | 1024px - 1440px | 12 | 32px |
| Wide | > 1440px | 12 | 40px |
Grid Examples¶
Dashboard Layout:
.dashboard {
display: grid;
grid-template-columns: 280px 1fr; /* Sidebar + Main */
gap: var(--space-lg);
}
.dashboard-main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-md);
}
Card Grid:
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-lg);
padding: var(--space-xl);
}
Container System¶
Container Types¶
1. Page Container
2. Content Container
.content-container {
max-width: 960px; /* Optimal reading width */
margin: 0 auto;
padding: var(--space-lg);
}
3. Card Container
.card-container {
background: var(--surface-elevated);
border-radius: var(--radius-lg);
padding: var(--space-md);
box-shadow: var(--shadow-sm);
}
Container Nesting¶
<div class="page-container">
<section class="content-section">
<div class="card-grid">
<div class="card-container">
<!-- Card content -->
</div>
</div>
</section>
</div>
Responsive Behavior¶
Mobile-First Approach¶
Start with mobile layout, progressively enhance for larger screens:
/* Base: Mobile */
.component {
display: block;
padding: var(--space-md);
}
/* Tablet */
@media (min-width: 768px) {
.component {
display: flex;
padding: var(--space-lg);
}
}
/* Desktop */
@media (min-width: 1024px) {
.component {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: var(--space-xl);
}
}
Responsive Patterns¶
Stack to Row:
.responsive-row {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
@media (min-width: 768px) {
.responsive-row {
flex-direction: row;
}
}
Hide on Mobile:
Alignment & Distribution¶
Flexbox Alignment¶
/* Center everything */
.center-all {
display: flex;
justify-content: center;
align-items: center;
}
/* Space between */
.space-between {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Vertical stack */
.stack {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
Grid Alignment¶
/* Center grid items */
.grid-center {
display: grid;
place-items: center;
}
/* Align to start */
.grid-start {
display: grid;
align-items: start;
justify-items: start;
}
Visual Rhythm¶
Consistent Sizing¶
Maintain visual rhythm through consistent component heights:
/* Input heights */
--input-sm: 32px;
--input-md: 40px;
--input-lg: 48px;
/* Button heights (match inputs) */
--button-sm: 32px;
--button-md: 40px;
--button-lg: 48px;
Vertical Rhythm¶
Use a consistent vertical spacing pattern:
h1 { margin-bottom: var(--space-xl); }
h2 { margin-bottom: var(--space-lg); }
h3 { margin-bottom: var(--space-md); }
p { margin-bottom: var(--space-md); }
p + p { margin-top: var(--space-sm); }
section { margin-bottom: var(--space-2xl); }
Z-Index Hierarchy¶
Maintain consistent layering:
/* Z-index scale */
--z-base: 0;
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-modal-backdrop: 400;
--z-modal: 500;
--z-popover: 600;
--z-tooltip: 700;
--z-toast: 800;
Usage:
.modal-backdrop {
z-index: var(--z-modal-backdrop);
}
.modal {
z-index: var(--z-modal);
}
.tooltip {
z-index: var(--z-tooltip);
}
Corner Radius¶
Rounded corners create friendly, modern interfaces:
/* Border radius scale */
--radius-sm: 4px; /* Small elements, badges */
--radius-md: 8px; /* Buttons, inputs, cards */
--radius-lg: 12px; /* Large cards, modals */
--radius-xl: 16px; /* Hero sections */
--radius-full: 9999px; /* Pills, avatars */
Consistent application:
.button { border-radius: var(--radius-md); }
.card { border-radius: var(--radius-lg); }
.avatar { border-radius: var(--radius-full); }
.modal { border-radius: var(--radius-lg); }
Glassmorphic Surfaces¶
Orbit 2.0 embraces glassmorphism for depth and visual interest:
.glass-surface {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
/* Dark mode variant */
[data-theme="dark"] .glass-surface {
background: rgba(30, 30, 30, 0.7);
border-color: rgba(255, 255, 255, 0.08);
}
Layout Best Practices¶
Do's ✅¶
- Maintain consistent spacing using design tokens
- Use the grid system for alignment
- Prioritize mobile layouts first
- Group related elements with whitespace
- Limit content width for readability (max 960px for text)
- Use semantic HTML for structure
- Test on real devices across breakpoints
Don'ts ❌¶
- Don't use arbitrary spacing values (use design tokens)
- Don't neglect mobile users (50%+ of traffic)
- Don't cram content edge-to-edge
- Don't mix layout systems (flex + grid in same container)
- Don't forget vertical rhythm (inconsistent spacing breaks flow)
- Don't ignore z-index hierarchy (causes overlay conflicts)
Component Spacing Examples¶
Card Layout¶
.nova-card {
padding: var(--space-md);
border-radius: var(--radius-lg);
margin-bottom: var(--space-lg);
}
.nova-card__header {
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--border-color);
}
.nova-card__content {
margin-bottom: var(--space-md);
}
.nova-card__footer {
display: flex;
justify-content: space-between;
padding-top: var(--space-sm);
border-top: 1px solid var(--border-color);
}
Form Layout¶
.form-group {
margin-bottom: var(--space-lg);
}
.form-label {
display: block;
margin-bottom: var(--space-xs);
font-weight: 500;
}
.form-input {
width: 100%;
height: var(--input-md);
padding: 0 var(--space-md);
border-radius: var(--radius-md);
}
.form-help {
margin-top: var(--space-xs);
font-size: 0.875rem;
color: var(--text-secondary);
}
Accessibility Considerations¶
Touch Targets¶
Minimum 44×44px for interactive elements:
.button,
.link,
.checkbox,
.radio {
min-width: 44px;
min-height: 44px;
/* Or use padding to reach minimum */
}
Focus Indicators¶
Clear visual focus states:
Reading Width¶
Limit line length for readability:
Layout is the foundation of great design. Follow these principles to create interfaces that feel organized, spacious, and delightful to use across all Nova Suite applications.