split-layout-technical

---
name: split-layout-technical
description: Create a technical split-screen design system with dual panels, fine frame lines, mono metadata, quiet editorial typography, and premium inset surfaces.
license: MIT
---

# Split Layout Technical Skill

## Use When
- Create a technical split-screen design system with dual panels, fine frame lines, mono metadata, quiet editorial typography, and premium inset surfaces.

## Workflow

## Scope
- Apply this as a full-page layout and design-system direction when the interface should be organized into two clear panels or halves.
- Use it for product pages, showcases, portfolios, editorial-tech layouts, or concept presentations that benefit from a disciplined split-screen structure.
- This is a layout system first: it should control framing, spacing, typography, metadata treatment, and panel behavior, not just add a vertical divider.

## Visual target
- Build the page around a strong split layout, usually two equal or near-equal vertical panels on desktop, with each side carrying a distinct role.
- One side should act as the hero or immersive focal panel, while the other side handles explanation, specs, metadata, supporting content, or navigation.
- Use thin frame lines, inset boundary rules, tiny corner markers, and precise spacing so each panel feels like a technical display surface.
- Pair quiet editorial typography with mono utility labeling so the system feels intelligent, architectural, and controlled.
- Keep the palette restrained, with neutral surfaces and one selective accent color derived from the design rather than a hardcoded hue.

## Implementation guidance
- Prefer `flex-row`, split columns, or a clear two-panel grid on desktop, then stack the panels vertically on smaller screens without losing the sense of separate zones.
- Give each panel its own internal framing: inset vertical rules, edge offsets, corner squares, thin borders, or measured padding that creates a contained shell.
- Use mono or utility text for top rails, metadata strips, labels, coordinates, system markers, specs, or status copy.
- Main headlines should remain clean and confident rather than loud; support them with controlled tracking, restrained hierarchy, and generous spacing.
- Feature one premium embedded surface inside at least one panel, such as a bordered media frame, canvas region, visualization area, or image window.
- Let one panel feel denser and more informational while the other feels more visual, spatial, or atmospheric to create useful contrast.

## Recommended patterns
- Left/right split hero: immersive artwork or media on one side, explanatory content and structured details on the other.
- Technical rails: slim top labels, footer metadata, coordinates, version markers, timestamps, or publisher-style microcopy in mono.
- Specification blocks: compact two-column facts, thin dividers, line-separated rows, and restrained tabular presentation.
- Framed surfaces: gradient-border wrappers, inset shadows, clipped media windows, or dark technical canvases placed inside a quiet outer shell.
- Panel asymmetry: keep the overall split balanced, but allow different content densities and vertical rhythms inside each half.

## Tuning knobs
- Split ratio: use 50/50 by default, but shift slightly when one side needs more dominance.
- Frame density: increase or reduce the number of inset rules, corner markers, and dividers depending on how technical the system should feel.
- Typography mood: steer more editorial with larger serif-like display moments, or more product-technical with cleaner sans and mono emphasis.
- Surface depth: tune border gradients, inset shadow strength, and internal panel contrast so embedded surfaces feel premium but not heavy.
- Accent restraint: use the accent for active details, system cues, or focal content, not as a blanket color wash.

## Avoid
- Generic two-column marketing layouts that lack structural framing and technical detail.
- Overcrowding both panels equally so the split loses hierarchy and purpose.
- Bright multi-color treatments that break the calm, technical tone.
- Rounded playful UI patterns that fight the precise architectural layout.
- Treating the split only as decoration instead of giving each half a distinct functional role.