Layout & Space
The spatial bedrock of Elementa: structured on an uncompromising 4px geometric cadence, harmonic 60-base composite grid, and large-first responsive ergonomics for complex software.
Harmonic 60-Base Grid
4px Atomic Cadence
Large-First Ergonomics
Subpixel Defense
4K Workstation Scale
The "Large-First" Responsive Philosophy
Traditional web applications dogmatically design for a 375px viewport first and struggle to backport complex data into desktop displays. Elementa inverts this doctrine: we design master systems at full desktop scale (1920px – 2560px+) where complete spatial hierarchies are visible, then translate that master system into mobile through disciplined, atomic card reflow.
Master Systems Start at Scale
Enterprise platforms live on workstations. Designing large-first exposes the master spatial hierarchy without artificial mobile compression.
Atomic Card Containment
Cards act as self-sustaining capsules that package KPIs, telemetry, and actions together, preserving Gestalt unity across all viewports.
Disciplined Realignment
Mobile is never an afterthought. It is a prioritized translation: multi-pane grids stack into vertical touch streams and sidebars become bottom docks.
Mathematical Spatial Cadence
High data density succeeds through the 4px atomic rhythm and harmonic 60-division grid, guaranteeing effortless scanning without visual clutter.
Workstation Master to Mobile Companion
Experience the master 1920px desktop workstation screen translating into an authentic mobile device screen with live components and fluid spring animations.
elementa.deriva.xyz/workspace
Deriva Console
Quick search (⌘K)...
Navigation Rail
Cluster Fleet Performance
48 Nodes In Sync
Telemetry
Compute Throughput
4.82 PFLOPS
+14.2% peak
Infrastructure
Cluster Utilization
91.8%
Optimal load
Latency
Token Roundtrip
18.4 ms
-4.6 ms delta
Security
Zero-Trust Gateways
48/48 Active
100% verified
Live Compute Telemetry Pipeline
P99 Latency SLA
14.2 ms
Buffer Occupancy
38.4%
Ingress Reliability
99.998%
9:41
Deriva Mobile
Cluster Fleet Performance
48 Nodes In Sync
Telemetry
Compute Throughput
4.82 PFLOPS
+14.2% peak
Infrastructure
Cluster Utilization
91.8%
Optimal load
Latency
Token Roundtrip
18.4 ms
-4.6 ms delta
Security
Zero-Trust Gateways
48/48 Active
100% verified
Live Compute Telemetry Pipeline
P99 Latency SLA
14.2 ms
Buffer Occupancy
38.4%
Ingress Reliability
99.998%
Anatomical Screen Zones
Every Elementa interface is partitioned into strict anatomical zones. Rather than improvising layouts per view, elements inhabit defined spatial envelopes with fixed ergonomics across viewports. Click or hover any zone below to inspect its architectural specifications.
Click on a zone to see details.
Mathematical Foundation
elementa's Harmonic Grid
The 60-Base Harmonic Grid System (LCM(3, 4, 5) = 60) eliminates the fatal fractional rounding flaws of legacy 12-column grids, guaranteeing clean integer pixel coordinates for all multi-pane enterprise layouts.
Why 60-Base Over Legacy Grids
The mathematical advantages designed to eliminate fractional layout distortion and unlock seamless enterprise UI density.
Subpixel Benchmark
1024px ÷ 5 ItemsLegacy 12-Column Grid
2.4 cols (Fractional)
204.8px [±0.8px Jitter]
Blurry Seam ❌
Elementa 60-Base Grid
12 Units (Integer)
204.0px [0.0px Error]
Crisp Snap ✅
LCM(3,4,5) = 60 Tracks
Zero Interpolation Drift
Integer Coordinate Precision
Legacy 12-column grids fail when dividing into 5 items, producing 2.4 columns and subpixel rounding blur. Elementa’s 60-base grid maps all common fractions to whole physical pixel coordinates.
5-Day Trading Week
60 ÷ 5 = 12u EachMON
$4.2M
12u
TUE
$5.8M
12u
WED
$6.1M
12u
THU
$5.4M
12u
FRI
$7.9M
12u
5 Equal Columns
100% Balanced Parity
Native 5-Part Enterprise Parity
Financial software and developer workflows rely on 5-column rhythms (Mon–Fri markets, 5-stage pipelines, 5 KPI summaries). 60-base grids accommodate quintary splits natively with zero margin hacks.
Multi-Pane Studio Layout
Σ = 60 Units10u
14u
Canvas 24u
12u
10u + 14u + 24u + 12u
= 60 Units (100%)
Harmonic Multi-Pane Orchestration
Complex IDE and telemetry suites require concurrent sidebar, master list, canvas, and inspector panes. 60-base allows heterogeneous zone sizing to assemble harmoniously into a complete 100% viewport.
Interactive 60-Base Grid Workbench
Select item counts below to watch how elements snap onto the underlying 60-column tracks.
2 Items
3 Items
4 Items
5 Items
Key
6 Items
10 Items
Key
12 Items
Card 01
20.0%
12 Units
Zero fractional blur
Track 1 → 12
Card 02
20.0%
12 Units
Zero fractional blur
Track 13 → 24
Card 03
20.0%
12 Units
Zero fractional blur
Track 25 → 36
Card 04
20.0%
12 Units
Zero fractional blur
Track 37 → 48
Card 05
20.0%
12 Units
Zero fractional blur
Track 49 → 60
| Partition | Legacy 12-Column Grid | Elementa 60-Base Grid | Architectural Advantage |
|---|---|---|---|
| 2 Columns | 6 cols (Integer) | 30 units (Integer) | Perfect 50/50 dual split |
| 3 Columns | 4 cols (Integer) | 20 units (Integer) | Tri-column telemetry cards |
| 4 Columns | 3 cols (Integer) | 15 units (Integer) | Quarter quadrant split |
| 5 Columns | 2.4 cols (Fractional Error) | 12 units (Integer) | 5-Day trading week, 5 KPI cards without subpixel jitter |
| 6 Columns | 2 cols (Integer) | 10 units (Integer) | Hex-card metric ribbons |
| 10 Columns | 1.2 cols (Fractional Error) | 6 units (Integer) | Decile metric breakdowns |
| 12 Columns | 1 col (Integer) | 5 units (Integer) | Legacy standard compatibility |
| 15 Columns | 0.8 cols (Fractional Error) | 4 units (Integer) | Micro-column data feeds |
| 20 Columns | 0.6 cols (Fractional Error) | 3 units (Integer) | Ultra-fine density timeline tracks |
| 30 Columns | 0.4 cols (Fractional Error) | 2 units (Integer) | Day-of-month calendar cells |
| 60 Columns | 0.2 cols (Fractional Error) | 1 unit (Integer) | Second-by-second telemetry ticks |
4px Atomic Spacing System
Spacing in Elementa is not arbitrary padding—it is the structural pulse of the interface. All spatial increments originate from the 4px atomic base (space-1). By prohibiting arbitrary pixel values, elements naturally align to a coherent baseline grid, establishing Gestalt proximity without cognitive load.
Atom: 4px (space-1)
Base Content: 16px (space-4)
Ratio: 1rem = 16px
| Token Name | Value (rem · px) | Scaled Spacer | Architectural Usage |
|---|---|---|---|
space-px | 0.0625rem—1px | 1px | Hairline rules, borders, optical subpixel nudges |
space-0.5 | 0.125rem—2px | 2px | Micro badges, status dot rings, tight tag padding |
space-1 Key | 0.25rem—4px | 4px | Base Atom: Icon-to-label gaps, compact chips, badge margins |
space-1.5 | 0.375rem—6px | 6px | Dense list items, compact button padding, breadcrumb separators |
space-2 | 0.5rem—8px | 8px | Standard button padding, avatar group overlap, input icon offset |
space-2.5 | 0.625rem—10px | 10px | Form field internal vertical padding, table cell padding |
space-3 | 0.75rem—12px | 12px | Card inner padding, dropdown menu container margins |
space-4 Key | 1rem—16px | 16px | Base Content Unit: Standard card padding, mobile viewport edge margins |
space-5 | 1.25rem—20px | 20px | Modal header gaps, intermediate metric card gap |
space-6 | 1.5rem—24px | 24px | Standard layout grid gutter, tablet canvas outer margins |
space-8 | 2rem—32px | 32px | Modal dialog padding, desktop canvas margins, drawer padding |
space-10 | 2.5rem—40px | 40px | Major structural module separation, section hero subtitle gaps |
space-12 | 3rem—48px | 48px | Page section vertical breaks, wide canvas margins |
space-16 | 4rem—64px | 64px | Major landmark dividers, hero section vertical separation |
space-20 | 5rem—80px | 80px | Large monitor canvas margins, massive hero banner padding |
space-24 | 6rem—96px | 96px | Expansive feature section separation on ultra-wide screens |
space-32 | 8rem—128px | 128px | Monumental chapter separation, spatial breaks |
Responsive Breakpoints (Up to 4K / 2560px+)
Elementa partitions responsive tiers strictly into harmonic divisors of 60 (4 → 6 → 10 → 12 → 15 → 20 → 30 → 60 columns). As viewport hardware expands from compact mobile (360px) to ultra-wide 4K workstations (2560px+), column density scales progressively while preserving integer sub-track math. Drag the timeline scrubber or click any region below to inspect each tier.
XS
Compact Mobile
SM
Mobile Landscape
MD
Tablet
LG
Compact Laptop
XL
Standard Workstation
2XL
FHD Desktop Monitors
3XL
QHD 1440p
4XL
Ultra-Wide & 4K Workstations
Drag the timeline scrubber or click any region to inspect breakpoint parameters.
| Tier | Breakpoint | Columns | Margin | Gutter | Hardware Target |
|---|---|---|---|---|---|
| XS | 360px | 4 | 16px | 12px | iPhone SE, Pixel compact |
| SM | 640px | 6 | 16px | 12px | iPhone Pro Max, Galaxy Ultra |
| MD | 768px | 10 | 24px | 16px | iPad mini, iPad Air portrait |
| LG | 1024px | 12 | 32px | 20px | MacBook Air 13", iPad Pro 12.9" |
| XL | 1280px | 15 | 40px | 24px | MacBook Pro 14"/16", Laptop 1080p |
| 2XL | 1536px | 20 | 48px | 24px | 24" & 27" 1080p Desktop Displays |
| 3XL | 1920px | 30 | 64px | 32px | Apple Studio Display, 27" 1440p Monitor |
| 4XL | 2560px | 60 | 80px | 32px | Pro Display XDR, 34" Curved, 4K Panels |