Design Aesthetic Reference

Split
Screen

Bold duality. Two panels in conversation. Light against dark, image against text, tension against resolution.

Explore System →
SPLIT
Typography -- Dark Panel
Bebas Neue -- Display
Two Halves,
One Story
Playfair Display -- Editorial
Elegant Contrast
Inter -- Body Text
The split layout speaks in dualities. Every design choice amplifies the tension between two opposing halves, creating a visual dialogue that draws the eye and holds attention.
Weight Range -- Inter
Aa
Light
Aa
Regular
Aa
Medium
Aa
Semi
Aa
Bold
Typography -- Light Panel
Bebas Neue -- Display
Contrast Is
The Engine
Playfair Display -- Editorial
Visual Tension
Inter -- Body Text
With each panel occupying only half the viewport, text columns are naturally narrow. This demands careful typographic sizing and generous line height to maintain readability and rhythm.
Uppercase Label Style
Primary Label / Coral Secondary Label / Teal Tertiary Label / Slate
Dark Panel Colors

Core Palette

Panel Dark #1A1A2E
Midnight Blue #0C2461
Graphite #2D3436
Pure Black #0D0D0D
Accent Coral #FF6B6B
Electric #4ECDC4
Dark
Warm
Cool
Light Panel Colors

Accents & Neutrals

Panel Light #F5F0EB
Pure White #FFFFFF
Mist Gray #DFE6E9
Slate Text #636E72
Lavender #A29BFE
Amber #F7B731
Coral-Lav
Amber-Coral
Teal

Create

From concept to pixel-perfect execution, we craft digital experiences that command attention through deliberate contrast.

→

Discover

Research-driven strategy that uncovers the tension between what users expect and what they truly need.

→
Components

Split Card Stack

Alternating image-text cards that maintain the split aesthetic. Each card reverses its panel order for visual rhythm.

Brand
Case Study 01

Identity & Contrast

A complete brand identity system built on the principle of duality. Every element exists in tension with its opposite, creating a visual language that is both cohesive and dynamic.

12 Weeks
48 Screens
3x Engagement
Web
Case Study 02

Immersive Experience

A full-viewport storytelling platform that uses scroll-triggered split reveals to guide users through a narrative. Each section presents a new duality.

8 Sections
2.4m Views
94% Scroll Depth
App
Case Study 03

Dual-Mode Interface

A mobile application that lets users toggle between two contrasting display modes. The split metaphor extends from layout to interaction pattern.

200k Users
4.8 Rating
62% Retention
Diagonal Division

Angled Energy

Replace the straight vertical cut with a diagonal slash. CSS clip-path creates dynamic angular separations that add movement and visual energy to the split.

50/50
Panel Ratio
8°
Skew Angle
100vh
Height
Layout Principles

Structure & Balance

Even with angled dividers, visual weight remains considered. The clip-path polygon creates overlap between panels, and the skewed accent stripe reinforces the dynamic axis.

View Technique
Before
VS
After
Design Principles

The Rules of Division

  • 01

    Embrace Duality

    The split is about two things in conversation

  • 02

    Contrast Is the Engine

    Every choice amplifies the difference between halves

  • 03

    Clear Panel Purpose

    One informs, the other entices. One shows, the other tells.

  • 04

    Sacred Center Line

    The divider is the spine of the composition

Metrics

Layout Performance

80%
Engagement
90%
Readability
70%
Conversion
95%
Responsive
Effects & Interactions

Sliding Reveals

Hover to reveal content. The split grid uses interactive overlays that reward exploration with hidden detail.

01

Hover Expand

Panels grow on hover while siblings shrink, creating a tug-of-war interaction that embodies the split metaphor.

02

Diagonal Clip

CSS clip-path polygons create angled boundaries between panels, replacing static vertical lines with dynamic energy.

03

Parallax Depth

Left and right panels scroll at different rates, adding dimensional depth to the horizontal split.

04

Sticky Scroll

One panel remains fixed while the other scrolls through content blocks, creating a guided storytelling effect.

Get Started

Ready to Divide?

The split layout is more than a technique. It is a design philosophy built on the belief that contrast creates clarity and duality drives engagement.

Start Building

Two Panels. One Vision.

Every great design emerges from the tension between opposing forces.

View Examples