IDE Split Pane
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