Best For
split screen / split screen layout / split layout
Split Screen
分屏布局
C
65/100Fair
Symmetric or asymmetric split-screen layout creating visual tension through contrast and balance. Commonly used for product showcases, brand stories, and comparison pages.
split screensplit screen layoutsplit layoutside by side layouttwo column hero50/50 layoutcomparison pagedual panelasymmetric splitproduct showcaselanding page
Primary Move
Use CSS Grid or Flexbox for split screen grid grid-cols-2
Watch Out
Do not have identical content on both sides (pointless split)
AI Implementation
Copy the Hard Prompt first, then use the spec when needed
Use the Hard Prompt by default to generate UI. Use the Design Spec to understand, modify, and review the style. Use the Creative Brief for early exploration.
Hard Prompt
Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.
When to use
- When AI should generate UI directly
- When repeated outputs must stay consistent
- When style drift is the main risk
How to use
- Copy the full prompt
- Append the concrete requirement
- Review against forbidden rules and UI states
STYLEKIT_STYLE_REFERENCE
style_name: Split Screen
style_slug: split-screen
style_source: /styles/split-screen
# Hard Prompt
## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.
## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.
Strictly follow the style rules below and maintain consistency. No style drift allowed.
## Requirements
- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.
## Style Rules
You are a frontend expert specializing in Split Screen layout. All generated code must strictly follow these constraints:
## Absolute Prohibitions
- Do NOT keep split layout on mobile (too narrow)
- Do NOT have identical content on both sides
- Do NOT create visual imbalance between panels
- Do NOT ignore content reading order
- Do NOT use harsh divider lines
## Must Follow
- Use CSS Grid: grid grid-cols-1 lg:grid-cols-2
- Mobile: stack vertically (grid-cols-1)
- Desktop: side by side (lg:grid-cols-2)
- Each panel: min-h-[50vh] on mobile, min-h-screen on desktop
- Balance visual weight between panels
- One side visual, one side content
## Layout Patterns
50/50 Split:
- grid-cols-1 lg:grid-cols-2
- Both panels equal width
60/40 Split:
- grid-cols-1 lg:grid-cols-[60fr_40fr]
- Emphasize one side
Sticky Split:
- One panel sticky (position: sticky, top: 0)
- Other panel scrolls
## Panel Content
Visual Panel:
- Full background image/color/video
- Minimal text overlay
- Center-aligned content
Content Panel:
- Ample padding (p-8 lg:p-16)
- Left-aligned text
- Clear hierarchy
## Responsive
Mobile: Stack vertically, visual panel first
Tablet: May start splitting at md:
Desktop: Full split with proper ratios
## Animation & Interaction Rules
- Counter-Weight Focus: Hover one panel while the opposite panel gently desaturates or fades in prominence.
- Sharp Editorial Cuts: Button hover uses direct black-white inversion with short duration and no gradient easing tricks.
- Screen-Spanning Lines: Center divider or split seam can briefly intensify on focus change, but motion stays minimal.
- Static Text: Descriptive text blocks must stay position-stable; avoid translate or scale on body copy.
## Self-Check
After generating code, verify:
1. Mobile layout stacks properly
2. Panels have contrasting content
3. Visual balance maintained
4. Reading order makes sense
5. Transitions are smooth
## Absolute Bans (Match and Refuse)
If any of the following patterns appear, it is a style violation — rewrite without exception.
- have identical content on both sides (pointless split)
- keep split layout on mobile (too narrow)
- create severe visual weight imbalance between sides
- ignore content reading order
- make divider lines too harsh
## Self-Check (Verify Before Shipping)
If any item fails, the style has drifted — fix before shipping.
- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not have identical content on both sides (pointless split)
- [ ] do not keep split layout on mobile (too narrow)
- [ ] do not create severe visual weight imbalance between sides
- [ ] do not ignore content reading order
- [ ] do not make divider lines too harshComponent Templates
Component Preview
按钮
分屏布局中的对比按钮
Frontend Readiness
Dark Mode, States, Motion, and Accessibility
This layer tracks whether the style is ready for real websites: theme modes, state feedback, keyboard access, and performance constraints.
Overall
58%
Fallback
Dark Mode
35%
FallbackUI States
79%
PartialMotion
70%
PartialA11y
70%
PartialPerformance
35%
FallbackKey State Coverage
light / darkHoverFocus VisibleDisabledLoadingEmptyErrorSuccess
Button
Default / Hover / Focus Visible / Active / Disabled
Input
Default / Hover / Focus Visible / Disabled / Error
Card
Default / Hover / Focus Visible / Loading / Skeleton
Form
Default / Focus Visible / Disabled / Loading / Error
Implementation Notes
- This style contains dark-mode signals, but no curated dark token contract has been reviewed.
- Check contrast in both light and dark modes.
- Check heavy shadows, blur, large media, and scroll-linked effects manually.
- No style-specific performance cost profile has been curated yet.
FAQ
Split Screen — Frequently Asked Questions
- What is the Split Screen design style?
- Symmetric or asymmetric split-screen layout creating visual tension through contrast and balance. Commonly used for product showcases, brand stories, and comparison pages. Its core principle: Split Screen is a layout approach that divides the viewport into two or more regions, creating visual tension and narrative effect through contrast.
- What colors does Split Screen use?
- Split Screen uses #0f0f0f as its primary color and #ffffff as its secondary color, with accent colors #ff4757, #2ed573, #1e90ff, #ffa502. Every hex value can be copied from the palette on this page.
- How do I apply Split Screen correctly?
- Key practices: Use CSS Grid or Flexbox for split screen grid grid-cols-2. Large screens maintain split, small screens stack lg:grid-cols-2 grid-cols-1. Use contrasting or complementary content.
- What are common mistakes with Split Screen?
- Avoid: Do not have identical content on both sides (pointless split). Do not keep split layout on mobile (too narrow). Do not create severe visual weight imbalance between sides.
- How do I prompt AI to generate Split Screen UI?
- Copy the ready-made AI prompt on this page — it bundles the design tokens and component rules — and paste it into ChatGPT, Claude, Cursor, or v0. Effective prompts include the keywords: split screen, split screen layout, split layout, side by side layout.
Global Styles
Global CSS
css
/* Split Screen Global Styles */
/* Base split container */
.split-screen {
display: grid;
grid-template-columns: 1fr;
min-height: 100vh;
}
@media (min-width: 1024px) {
.split-screen {
grid-template-columns: 1fr 1fr;
}
}
/* Ratio variants */
.split-screen-60-40 {
grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
.split-screen-60-40 {
grid-template-columns: 60fr 40fr;
}
}
.split-screen-40-60 {
grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
.split-screen-40-60 {
grid-template-columns: 40fr 60fr;
}
}
/* Panel styles */
.split-panel {
display: flex;
flex-direction: column;
justify-content: center;
padding: 2rem;
}
@media (min-width: 1024px) {
.split-panel {
padding: 4rem;
}
}
/* Sticky scroll effect */
.split-sticky {
position: sticky;
top: 0;
height: 100vh;
}
/* Diagonal split */
.split-diagonal {
clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}
@media (min-width: 1024px) {
.split-diagonal {
clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}
}
/* Hover reveal effect */
.split-hover-left:hover ~ .split-hover-right {
flex: 0.3;
}
.split-hover-right:hover {
flex: 0.7;
}
.split-hover-left, .split-hover-right {
flex: 0.5;
transition: flex 0.5s ease;
}
/* Split Screen Design Tokens */
:root {
--split-screen-primary: #0f0f0f;
--split-screen-secondary: #ffffff;
--split-screen-accent: #ff4757;
--split-screen-glow: rgba(15, 15, 15, 0.3);
}
@keyframes split-screen-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes split-screen-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.split-screen-card {
position: relative;
overflow: hidden;
}
.split-screen-card::before {
content: "";
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
background: linear-gradient(135deg, rgba(15, 15, 15, 0.05), transparent);
pointer-events: none;
}
.split-screen-card:hover::before {
opacity: 1;
}
.split-screen-gradient {
background: linear-gradient(135deg, #0f0f0f, #ff4757);
}
.split-screen-gradient-text {
background: linear-gradient(135deg, #0f0f0f, #ff4757);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.split-screen-frosted {
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
background: rgba(15, 15, 15, 0.08);
}
.split-screen-animate-in {
animation: split-screen-fade-in 0.5s ease-out both;
}Compatible Visual Styles
Try Pairing
Split Screen is a layout pattern that can be paired with the following visual styles.
IDE Integration
IDE Configuration Export
Download configuration files for AI coding assistants to generate code in this style.
Style Pack
Export Style Pack
Get complete machine-readable style assets including design tokens, Tailwind presets, CSS variables, and shadcn/ui themes.
Metadata
Style metadata including version information
Design Tokens
Compatible with Figma / Style Dictionary / Tokens Studio
Tailwind Preset
Tailwind CSS theme preset, import directly in config
Global CSS
CSS variables and base styles
shadcn Theme
shadcn/ui theme configuration
CSS Variables
Pure CSS variables, works with any project
SKILL.md
Loadable skill pack for Cursor / Claude Code / VS Code
Design Philosophy
Split Screen is a layout approach that divides the viewport into two or more regions, creating visual tension and narrative effect through contrast.
Accessibility
Accessibility Score
WCAG 2.1 compliance analysis based on color contrast and typography readability.
65
Overall Score
Grade: C - Fair
Contrast Ratios
Score: 57/100Average Ratio: 7.79:1
AA FailAAA Fail
| Context | Colors | Ratio | AA | AAA |
|---|---|---|---|---|
| Text on background | /#ffffff / #000000 | 21:1 | ||
| Secondary text on background | /#18181b / #000000 | 1.19:1 | ||
| Text on secondary background | /#ffffff / #ffffff | 1:1 | ||
| Secondary text on secondary | /#18181b / #ffffff | 17.72:1 | ||
| Button primary | /#ffffff / #000000 | 21:1 | ||
| Text on accent 1 | /#ffffff / #ff4757 | 3.34:1 | ||
| Alt text on accent 1 | /#18181b / #ff4757 | 5.31:1 | ||
| Text on accent 2 | /#ffffff / #2ed573 | 1.93:1 | ||
| Alt text on accent 2 | /#18181b / #2ed573 | 9.18:1 | ||
| Text on accent 3 | /#ffffff / #1e90ff | 3.24:1 | ||
| Alt text on accent 3 | /#18181b / #1e90ff | 5.47:1 | ||
| Text on accent 4 | /#ffffff / #ffa502 | 1.97:1 | ||
| Alt text on accent 4 | /#18181b / #ffa502 | 8.97:1 |
Readability
Score
83/100
Font Size
text-base md:text-lg
Font Weight
font-bold tracking-tight
Line Height
default
Scoring is based on WCAG 2.1 standards. AA requires 4.5:1 contrast for normal text, 3:1 for large text; AAA requires 7:1 for normal text, 4.5:1 for large text.
Design Recipes
Recommended Combinations with Split Screen
These curated recipes combine this style with layouts and animations, optimized for specific use cases.