IDE Split Pane

@claude-code
View live exhibit

Apply this design skill

$
Read the SKILL.md at https://joincommons.cc/api/items/ide-split-pane and apply its design language to my project

Designed by humans. Applied by agents.

Design Language
All colors use OKLCH. The palette is a cold blue-grey monochrome with syntax-highlighting accents.

### Surface tokens
| Token | Value | Usage |
|---|---|---|
| editor-bg | oklch(0.18 0.01 260) | Main editor background |
| sidebar-bg | oklch(0.15 0.01 260) | Sidebar, title bar, terminal tabs |
| tab-active | oklch(0.22 0.01 260) | Active tab, active tree item |
| tab-inactive | oklch(0.16 0.01 260) | Tab bar background |
| cursor-line | oklch(0.22 0.02 260) | Current line highlight |
| minimap-bg | oklch(0.16 0.005 260) | Minimap panel background |
| terminal-bg | oklch(0.13 0.008 260) | Terminal panel background |
| status-bar | oklch(0.30 0.12 260) | Status bar (most saturated surface) |
| selection-bg | oklch(0.30 0.08 260) | Text selection highlight |
| command-palette-overlay | oklch(0 0 0 / 0.5) | Command palette backdrop |

### Border tokens
| Token | Value | Usage |
|---|---|---|
| gutter-border | oklch(0.25 0.01 260) | All structural dividers, tab borders, sidebar edge |
| tab-border | oklch(0.25 0.01 260) | Tab right edges |
| scrollbar-thumb | oklch(0.30 0.02 260) | Scrollbar thumb |
| scrollbar-track | oklch(0.16 0.01 260) | Scrollbar track |

### Text tokens
| Token | Value | Usage |
|---|---|---|
| text-default | oklch(0.85 0.02 220) | Primary body text |
| breadcrumb | oklch(0.55 0.03 220) | Breadcrumb path, muted labels |
| syntax-comment | oklch(0.50 0.03 220) | Comments, inactive tabs, metadata |
| line-numbers | oklch(0.40 0.02 260) | Gutter line numbers |
| status-text | oklch(0.90 0.02 220) | Status bar text |

### Syntax highlight tokens
| Token | Value | Role |
|---|---|---|
| syntax-keyword | oklch(0.72 0.18 300) | Keywords, bullets, bold markers, active tab top accent |
| syntax-string | oklch(0.75 0.15 150) | Strings, terminal prompt |
| syntax-function | oklch(0.80 0.15 60) | Function names, headings |
| syntax-type | oklch(0.70 0.15 200) | Type names, module references |
| syntax-comment | oklch(0.50 0.03 220) | Comments, italic style |
| link-color | oklch(0.72 0.12 220) | Hyperlinks, underlined |
| search-highlight | oklch(0.55 0.18 85) | Search matches, star ratings |
| error-red | oklch(0.65 0.18 25) | HTML tags, error indicators |

### Bracket pair colors
| Token | Value |
|---|---|
| bracket-1 | oklch(0.65 0.15 60) |
| bracket-2 | oklch(0.65 0.15 300) |
| bracket-3 | oklch(0.65 0.15 150) |

### Git status colors
| Token | Value | Usage |
|---|---|---|
| git-added | oklch(0.70 0.15 150) | Added file indicator, branch check |
| git-modified | oklch(0.72 0.15 60) | Modified file indicator |

### Traffic light dots
| Color | Value |
|---|---|
| close | oklch(0.65 0.20 25) |
| minimize | oklch(0.75 0.15 85) |
| maximize | oklch(0.70 0.18 150) |

---
Agent instructions (SKILL.md)(advanced)
Design Skill
**Audience:** Software engineers, systems programmers, open-source contributors, DevRel professionals -- people who live inside code editors and want their portfolio to reflect that.

**Use cases:** Developer personal portfolio, engineering resume, open-source project showcase, technical blog, conference speaker page.

**Brand personality:** Technical precision, understated cleverness, functional minimalism. The portfolio does not describe a developer -- it IS a development environment. Personality emerges through terminal output and code comments, not marketing copy.

---

Reviews

Related styles
Git Log Resume
Git Log Resume@claude-code
Packet Sniffer Dev
Packet Sniffer Dev@claude-code
Nocturne Photo Portfolio
Nocturne Photo Portfolio@claude-code
Colophon Personal
Colophon Personal@claude-code
Code Mono Devtool
Code Mono Devtool@claude-code
API Docs Personal
API Docs Personal@claude-code