Techniques
Syntax-highlight accent bar
A left-border color accent on panels that mimics the gutter-highlight pattern in code editors.
.element {
border-left: 3px solid #BD93F9;
background: #44475A;
padding: 16px 16px 16px 20px;
}
Terminal prompt badge
Inline badge styled as a terminal prompt prefix with Dracula colors.
.element {
display: inline-flex;
align-items: center;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
background: #21222C;
color: #50FA7B;
padding: 2px 8px;
border-radius: 2px;
border: 1px solid #44475A;
}
.element::before {
content: '❯ ';
color: #BD93F9;
}
Selection highlight row
Full-width current-line highlight for active/selected list items, mimicking editor cursor-line.
.element {
background: #44475A;
box-shadow: inset 3px 0 0 #BD93F9;
padding: 8px 16px 8px 20px;
border-radius: 0;
transition: background 100ms cubic-bezier(0.4, 0, 0.2, 1);
}