SIGNAL STATIC: playlist codes, batch 1

[gelateria]

Signal Static · batch 01

This first batch started as a playlist code after my good friend Jay asked me about driving playlists for characters and my character in The Diadem, then opened out into a broader set of music-tech clutter layouts.

The actual visual inspiration comes from the Diadem itself: retro-futurist roads, damaged little devices, borrowed cars, strange signals, old interfaces brushed metal, smoked plastic, cassette decks, portable players and display graphics.

This is batch 01: the first ten layouts in the series.

The live preview comes first, with the copyable HTML directly underneath each layout. They are also built to be mobile-compatible, with max-width: 100%, boxed layouts, and wrapping text so they shrink cleanly on smaller screens. The more detailed device-face variants still look best at tablet width and up, but nothing should spill out or break just because somebody is reading on their phone. The easiest things to customise are the title, summary, track names, times, section labels, and lyric text; colour edits are possible too, but those are baked directly into each code block rather than controlled through one quick variable swap. Please credit gelateria if used!

01. Amber Shift

AT-01 CTRL / MAIN BUS / 04:13

 

Signal A

 

Window

 

Warm Bias

 

Gold Tone

 

PLAY PAUSE CUE LOOP SAVE SEND

Channel 01

deck A / clean mix

ARM

01

Song title 01

Lyrics go here.

3:24 GO

02

Song title 02

2:58 GO

Channel 02

deck B / lamp glow

ARM

03

Song title 03

4:01 GO

04

Song title 04

4:13 GO

Signal Static batch 01

A bright, high-contrast layout with amber accents and a clean, fast feel.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:14px;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);display:flex;flex-direction:column;gap:8px"> <div style="box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:#1a2633;color:#f9fbfc;font-size:11px;font-family:"Courier New", monospace"> <div style="box-sizing:border-box;font-size:10px;font-family:"Courier New", monospace;letter-spacing:0.04em;color:rgba(255,255,255,0.85)">AT-01 CTRL / MAIN BUS / 04:13</div> <div style="box-sizing:border-box;display:flex;gap:4px"> <span style="box-sizing:border-box;width:6px;height:6px;border-radius:50%;background:#4a9fd4"></span> <span style="box-sizing:border-box;width:6px;height:6px;border-radius:50%;background:#2d7eb8"></span> <span style="box-sizing:border-box;width:6px;height:6px;border-radius:50%;background:#e4c95a"></span> <span style="box-sizing:border-box;width:6px;height:6px;border-radius:50%;background:#2a3744"></span> </div> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:repeat(4, 1fr);gap:6px"> <div style="box-sizing:border-box;padding:6px;background:white;border:1px solid rgba(58, 76, 92, 0.12);font-size:11px"> <div style="box-sizing:border-box;margin-bottom:4px;font-weight:600;color:#3d4f5e">Signal A</div> <div style="box-sizing:border-box;height:3px;background:rgba(58, 76, 92, 0.12)"> <span style="box-sizing:border-box;display:block;height:100%;width:60%;background:#4a7fa8"></span> </div> </div> <div style="box-sizing:border-box;padding:6px;background:white;border:1px solid rgba(58, 76, 92, 0.12);font-size:11px"> <div style="box-sizing:border-box;margin-bottom:4px;font-weight:600;color:#3d4f5e">Window</div> <div style="box-sizing:border-box;height:3px;background:rgba(58, 76, 92, 0.12)"> <span style="box-sizing:border-box;display:block;height:100%;width:60%;background:#4a7fa8"></span> </div> </div> <div style="box-sizing:border-box;padding:6px;background:white;border:1px solid rgba(58, 76, 92, 0.12);font-size:11px"> <div style="box-sizing:border-box;margin-bottom:4px;font-weight:600;color:#3d4f5e">Warm Bias</div> <div style="box-sizing:border-box;height:3px;background:rgba(58, 76, 92, 0.12)"> <span style="box-sizing:border-box;display:block;height:100%;width:60%;background:#c4a04a"></span> </div> </div> <div style="box-sizing:border-box;padding:6px;background:white;border:1px solid rgba(58, 76, 92, 0.12);font-size:11px"> <div style="box-sizing:border-box;margin-bottom:4px;font-weight:600;color:#3d4f5e">Gold Tone</div> <div style="box-sizing:border-box;height:3px;background:rgba(58, 76, 92, 0.12)"> <span style="box-sizing:border-box;display:block;height:100%;width:60%;background:#c4a04a"></span> </div> </div> </div> <div style="box-sizing:border-box;display:flex;gap:4px"> <span style="box-sizing:border-box;flex:1;padding:6px 8px;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;border:1px solid rgba(58, 76, 92, 0.12);background:#1a2633;color:white;border-color:#1a2633">PLAY</span> <span style="box-sizing:border-box;flex:1;padding:6px 8px;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;border:1px solid rgba(58, 76, 92, 0.12);background:white;color:#3d4f5e">PAUSE</span> <span style="box-sizing:border-box;flex:1;padding:6px 8px;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;border:1px solid rgba(58, 76, 92, 0.12);background:white;color:#3d4f5e">CUE</span> <span style="box-sizing:border-box;flex:1;padding:6px 8px;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;border:1px solid rgba(58, 76, 92, 0.12);background:white;color:#3d4f5e">LOOP</span> <span style="box-sizing:border-box;flex:1;padding:6px 8px;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;border:1px solid rgba(58, 76, 92, 0.12);background:white;color:#3d4f5e">SAVE</span> <span style="box-sizing:border-box;flex:1;padding:6px 8px;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;border:1px solid rgba(58, 76, 92, 0.12);background:white;color:#3d4f5e">SEND</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Channel 01</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">deck A / clean mix</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">ARM</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 01</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">GO</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 02</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">GO</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Channel 02</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">deck B / lamp glow</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">ARM</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 03</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">GO</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 04</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">4:13</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">GO</span> </div> </div> </div> </div>

A straightforward option if you want something bright and easy to read.

02. After Hours

One-off / hand dub

After Hours

Side A / 90 min

 

 

night tape mix

 

 

REW PLAY FF STOP EJECT

Side A

front fold / tape stack

ROLL

A1

Song title 05

Lyrics go here.

3:24 CUE

A2

Song title 06

4:01 CUE

Side B

reverse fold / back sleeve

ROLL

B1

Song title 07

3:16 CUE

B2

Song title 08

4:13 CUE

Signal Static batch 01

A darker layout with cool tones, soft light and a calm after-hours finish.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:14px;border:1px solid rgba(58, 76, 92, 0.12);background:#2a2d32;color:white"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding:8px 10px;background:rgba(255, 255, 255, 0.9);color:#1a2633;border-left:3px solid #c4a04a"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:#3d4f5e">One-off / hand dub</div> <div style="box-sizing:border-box;font-size:14px;font-weight:700;margin-top:2px">After Hours</div> </div> <div style="box-sizing:border-box;font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:#3d4f5e">Side A / 90 min</div> </div> <div style="box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:10px;background:rgba(0, 0, 0, 0.5);border:1px solid rgba(255, 255, 255, 0.1)"> <div style="box-sizing:border-box;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle, #1a1c20 0%, #2a2d32 100%);border:1px solid rgba(255, 255, 255, 0.2);display:flex;align-items:center;justify-content:center"> <span style="box-sizing:border-box;width:10px;height:10px;border-radius:50%;background:#3a3d42"></span> </div> <div style="box-sizing:border-box;flex:1;text-align:center;font-size:10px;color:rgba(255, 255, 255, 0.7)"> <div style="box-sizing:border-box;height:2px;background:linear-gradient(90deg, #4a7fa8, #c4a04a);margin-bottom:4px"></div> <div style="box-sizing:border-box;font-size:9px;margin-top:3px">night tape mix</div> </div> <div style="box-sizing:border-box;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle, #1a1c20 0%, #2a2d32 100%);border:1px solid rgba(255, 255, 255, 0.2);display:flex;align-items:center;justify-content:center"> <span style="box-sizing:border-box;width:10px;height:10px;border-radius:50%;background:#3a3d42"></span> </div> </div> <div style="box-sizing:border-box;display:flex;gap:8px;padding:6px 10px"> <span style="box-sizing:border-box;width:4px;height:4px;background:rgba(255, 255, 255, 0.3);border-radius:1px"></span> <span style="box-sizing:border-box;height:4px;background:rgba(255, 255, 255, 0.3);border-radius:1px;width:12px"></span> <span style="box-sizing:border-box;width:4px;height:4px;background:rgba(255, 255, 255, 0.3);border-radius:1px"></span> </div> <div style="box-sizing:border-box;display:flex;gap:4px;padding:8px 10px 0"> <span style="box-sizing:border-box;flex:1;padding:6px 8px;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;border:1px solid rgba(58, 76, 92, 0.12);background:white;color:#3d4f5e">REW</span> <span style="box-sizing:border-box;flex:1;padding:6px 8px;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;border:1px solid rgba(58, 76, 92, 0.12);background:#1a2633;color:white;border-color:#1a2633">PLAY</span> <span style="box-sizing:border-box;flex:1;padding:6px 8px;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;border:1px solid rgba(58, 76, 92, 0.12);background:white;color:#3d4f5e">FF</span> <span style="box-sizing:border-box;flex:1;padding:6px 8px;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;border:1px solid rgba(58, 76, 92, 0.12);background:white;color:#3d4f5e">STOP</span> <span style="box-sizing:border-box;flex:1;padding:6px 8px;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;border:1px solid rgba(58, 76, 92, 0.12);background:white;color:#3d4f5e">EJECT</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Side A</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">front fold / tape stack</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">ROLL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">A1</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 05</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">CUE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">A2</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 06</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">CUE</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Side B</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">reverse fold / back sleeve</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">ROLL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">B1</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 07</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:16</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">CUE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">B2</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 08</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">4:13</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">CUE</span> </div> </div> </div> </div>

A good choice if you want a darker layout without losing warmth.

03. Silver Dial

compact disc digital audio

 

 

 

Orbit Mix 02

silver lid / anti-skip

TRK 02 / 04:09

line out / hold / bass

PLAY PAUSE NEXT MODE

PROG BASS OPEN HOLD

Disc 01

main programme tray

LOAD

01

Song title 01

Lyrics go here.

3:42 SEL

02

Song title 02

4:09 SEL

Bonus disc

late-lounge extras

LOAD

03

Song title 03

2:54 SEL

04

Song title 04

3:08 SEL

Signal Static batch 01

Metallic colour and rounded details give it a crisp, polished look.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:14px;border:1px solid rgba(58, 76, 92, 0.12);background:#e8eaed;display:flex;flex-direction:column;gap:10px"> <div style="box-sizing:border-box;padding:12px;background:linear-gradient(135deg, #c4cbd4 0%, #d8dfe6 100%);border:1px solid rgba(0, 0, 0, 0.08);position:relative"> <div style="box-sizing:border-box;font-size:8px;text-transform:uppercase;letter-spacing:0.08em;color:#3d4f5e;margin-bottom:8px">compact disc digital audio</div> <div style="box-sizing:border-box;width:100px;height:100px;margin:0 auto 10px;border-radius:50%;background:radial-gradient(circle, #3a4552 0%, #556575 35%, #8a9aa8 60%, #b4c0cd 100%);position:relative;box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.2);display:flex;align-items:center;justify-content:center"> <div style="box-sizing:border-box;position:absolute;border-radius:50%;border:1px solid rgba(255, 255, 255, 0.15);width:80%;height:80%"></div> <div style="box-sizing:border-box;position:absolute;border-radius:50%;border:1px solid rgba(255, 255, 255, 0.15);width:60%;height:60%"></div> <div style="box-sizing:border-box;width:20px;height:20px;border-radius:50%;background:#2a3744;border:1px solid rgba(0, 0, 0, 0.3);z-index:10"></div> </div> <div style="box-sizing:border-box;text-align:center;font-size:11px;color:#3d4f5e"> <div style="box-sizing:border-box;font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:#3d4f5e">Orbit Mix 02</div> <div style="box-sizing:border-box;font-size:13px;font-weight:600;color:#1a2633">silver lid / anti-skip</div> </div> </div> <div style="box-sizing:border-box;padding:10px;background:#2a3744;border:1px solid rgba(0, 0, 0, 0.2)"> <div style="box-sizing:border-box;padding:6px 8px;margin-bottom:8px;background:#4a6b5c;color:#c4e8d4;font:11px "Courier New", monospace;border:1px solid rgba(0, 0, 0, 0.3)"> <div style="box-sizing:border-box;font-weight:700;margin-bottom:2px">TRK 02 / 04:09</div> <div style="box-sizing:border-box;font-size:9px;opacity:0.7">line out / hold / bass</div> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:repeat(4, 1fr);gap:4px;margin-bottom:6px"> <span style="box-sizing:border-box;padding:5px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;border:1px solid rgba(0, 0, 0, 0.3);background:#4a7fa8;color:white">PLAY</span> <span style="box-sizing:border-box;padding:5px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:#3d4f5e;color:rgba(255, 255, 255, 0.7);border:1px solid rgba(0, 0, 0, 0.3)">PAUSE</span> <span style="box-sizing:border-box;padding:5px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:#3d4f5e;color:rgba(255, 255, 255, 0.7);border:1px solid rgba(0, 0, 0, 0.3)">NEXT</span> <span style="box-sizing:border-box;padding:5px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:#3d4f5e;color:rgba(255, 255, 255, 0.7);border:1px solid rgba(0, 0, 0, 0.3)">MODE</span> </div> <div style="box-sizing:border-box;display:flex;gap:3px"> <span style="box-sizing:border-box;flex:1;padding:3px 4px;text-align:center;font-size:7px;font-weight:700;text-transform:uppercase;border-radius:2px;background:#4a7fa8;color:white">PROG</span> <span style="box-sizing:border-box;flex:1;padding:3px 4px;text-align:center;font-size:7px;font-weight:700;text-transform:uppercase;border-radius:2px;background:#c4a04a;color:white">BASS</span> <span style="box-sizing:border-box;flex:1;padding:3px 4px;text-align:center;font-size:7px;font-weight:700;text-transform:uppercase;background:#1a2633;color:rgba(255, 255, 255, 0.4);border-radius:2px">OPEN</span> <span style="box-sizing:border-box;flex:1;padding:3px 4px;text-align:center;font-size:7px;font-weight:700;text-transform:uppercase;background:#1a2633;color:rgba(255, 255, 255, 0.4);border-radius:2px">HOLD</span> </div> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Disc 01</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">main programme tray</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">LOAD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 01</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:42</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SEL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 02</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">4:09</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SEL</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Bonus disc</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">late-lounge extras</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">LOAD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 03</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">2:54</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SEL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 04</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:08</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SEL</span> </div> </div> </div> </div>

Works well if you want something polished without feeling too glossy.

04. Blue Current

MIX FILES SIDE NOTES LATE SHIFTS

 

Sleeve 01

Signal Notes

 

blue / cool archive

 

Sleeve 02

Relay Folders

 

gradient / mixed paper

 

Sleeve 03

Warm Stack

 

gold / warm stock

PULL PIN QUEUE FILE

File 01

scratch notes / early pass

OPEN

01

Song title 05

3:31 TAKE

02

Song title 06

Lyrics go here.

4:07 TAKE

Stack 02

warm stack / late pile

OPEN

03

Song title 07

3:12 TAKE

04

Song title 08

3:55 TAKE

Signal Static batch 01

Deep blue and warm gold give this layout energy while keeping it clean.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:14px;background:#e8e0d0;border:1px solid #c8bfa8"> <div style="box-sizing:border-box;display:flex;gap:3px;padding:0 8px;margin-bottom:0;position:relative;top:1px"> <span style="box-sizing:border-box;padding:4px 10px 6px;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;border:1px solid #b8afa0;border-bottom:none;background:#f0e8d8;color:#3a2e1e;border-color:#a89880">MIX FILES</span> <span style="box-sizing:border-box;padding:4px 10px 6px;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;background:#d8cfba;border:1px solid #b8afa0;border-bottom:none;color:#7a6e5e">SIDE NOTES</span> <span style="box-sizing:border-box;padding:4px 10px 6px;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;background:#d8cfba;border:1px solid #b8afa0;border-bottom:none;color:#7a6e5e">LATE SHIFTS</span> </div> <div style="box-sizing:border-box;background:#f0e8d8;border:1px solid #a89880;border-top:2px solid #8a7860;padding:10px 10px 6px"> <div style="box-sizing:border-box;display:flex;gap:0;margin-bottom:10px;position:relative"> <div style="box-sizing:border-box;flex:1;border:1px solid #c0b8a8;position:relative;padding:8px 8px 8px 10px;margin-right:-1px;box-shadow:2px 0 4px rgba(0,0,0,0.06);background:#f0f4f8"> <div style="box-sizing:border-box;position:absolute;left:0;top:0;bottom:0;width:6px;background:#4a7fa8"></div> <div style="box-sizing:border-box;text-transform:uppercase;letter-spacing:0.06em;font-size:8px;color:#8a7e6e;margin-bottom:3px">Sleeve 01</div> <div style="box-sizing:border-box;font-size:12px;font-weight:700;color:#1a2633;margin-bottom:4px">Signal Notes</div> <div style="box-sizing:border-box;height:1px;background:rgba(0,0,0,0.08);margin:5px 0"></div> <div style="box-sizing:border-box;font-size:9px;color:#8a7e6e">blue / cool archive</div> </div> <div style="box-sizing:border-box;flex:1;border:1px solid #c0b8a8;position:relative;padding:8px 8px 8px 10px;margin-right:-1px;box-shadow:2px 0 4px rgba(0,0,0,0.06);background:#f4f4f0"> <div style="box-sizing:border-box;position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg, #4a7fa8 0%, #c4a04a 100%)"></div> <div style="box-sizing:border-box;text-transform:uppercase;letter-spacing:0.06em;font-size:8px;color:#8a7e6e;margin-bottom:3px">Sleeve 02</div> <div style="box-sizing:border-box;font-size:12px;font-weight:700;color:#1a2633;margin-bottom:4px">Relay Folders</div> <div style="box-sizing:border-box;height:1px;background:rgba(0,0,0,0.08);margin:5px 0"></div> <div style="box-sizing:border-box;font-size:9px;color:#8a7e6e">gradient / mixed paper</div> </div> <div style="box-sizing:border-box;flex:1;border:1px solid #c0b8a8;position:relative;padding:8px 8px 8px 10px;margin-right:0;box-shadow:none;background:#faf4e8"> <div style="box-sizing:border-box;position:absolute;left:0;top:0;bottom:0;width:6px;background:#c4a04a"></div> <div style="box-sizing:border-box;text-transform:uppercase;letter-spacing:0.06em;font-size:8px;color:#8a7e6e;margin-bottom:3px">Sleeve 03</div> <div style="box-sizing:border-box;font-size:12px;font-weight:700;color:#1a2633;margin-bottom:4px">Warm Stack</div> <div style="box-sizing:border-box;height:1px;background:rgba(0,0,0,0.08);margin:5px 0"></div> <div style="box-sizing:border-box;font-size:9px;color:#8a7e6e">gold / warm stock</div> </div> </div> <div style="box-sizing:border-box;display:flex;gap:4px;padding-top:6px;border-top:1px solid #c0b4a0"> <span style="box-sizing:border-box;flex:1;padding:6px 8px;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;border:1px solid rgba(58, 76, 92, 0.12);background:#1a2633;color:white;border-color:#1a2633">PULL</span> <span style="box-sizing:border-box;flex:1;padding:6px 8px;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;border:1px solid rgba(58, 76, 92, 0.12);background:white;color:#3d4f5e">PIN</span> <span style="box-sizing:border-box;flex:1;padding:6px 8px;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;border:1px solid rgba(58, 76, 92, 0.12);background:white;color:#3d4f5e">QUEUE</span> <span style="box-sizing:border-box;flex:1;padding:6px 8px;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;border:1px solid rgba(58, 76, 92, 0.12);background:white;color:#3d4f5e">FILE</span> </div> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">File 01</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">scratch notes / early pass</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">OPEN</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 05</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:31</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">TAKE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 06</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">4:07</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">TAKE</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Stack 02</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">warm stack / late pile</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">OPEN</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 07</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">TAKE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 08</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:55</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">TAKE</span> </div> </div> </div> </div>

A cleaner, more energetic option with a little more colour.

05. Stereo Deck

STEREO DUB DECK / MKII

DOLBY B NR

0 0 0 0

DECK A -20 - -10 - -5 - 0 - +3

 

DECK B -20 - -10 - -5 - 0 - +3

 

DECK A dub bus / brass bias

 

 

deck queue

 

PITCH

+ 0 -

 

DECK B cool mix / blue bias

 

 

night side

 

REW PLAY FF PAUSE STOP REC

Deck A

warm mix / amber bias

ENGAGE

A1

Song title 01

Lyrics go here.

3:08 RUN

A2

Song title 02

3:49 RUN

Deck B

cool mix / blue bias

ENGAGE

B1

Song title 03

4:11 RUN

B2

Song title 04

4:28 RUN

Signal Static batch 01

Warm, tactile and slightly studio-led, with the feel of classic audio hardware.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:14px;background:#b8bfc8;border:1px solid #9aa3ae;color:#1a2633"> <div style="box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#3a4552;color:rgba(255,255,255,0.85);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;border-bottom:2px solid #2a3744"> <span style="box-sizing:border-box">STEREO DUB DECK / MKII</span> <div style="box-sizing:border-box;display:flex;align-items:center;gap:8px"> <span style="box-sizing:border-box;font-size:7px;padding:2px 5px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.7)">DOLBY B NR</span> <div style="box-sizing:border-box;padding:3px 7px;font:700 12px "Courier New", monospace;background:#1a1f14;color:#c8e040;border:1px solid rgba(0,0,0,0.4);letter-spacing:0.06em">0 0 0 0</div> </div> </div> <div style="box-sizing:border-box;display:flex;gap:0;background:#2a2e34;border-bottom:1px solid #1a1e22"> <div style="box-sizing:border-box;flex:1;padding:6px 8px;border-right:1px solid rgba(255,255,255,0.06)"> <div style="box-sizing:border-box;font-size:8px;margin-bottom:4px;color:rgba(255, 255, 255, 0.5);font-family:"Courier New", monospace">DECK A -20 - -10 - -5 - 0 - +3</div> <div style="box-sizing:border-box;height:5px;background:rgba(0, 0, 0, 0.5);position:relative"> <span style="box-sizing:border-box;display:block;height:100%;width:65%;background:linear-gradient(90deg, #2a8a44 0%, #60c840 70%, #e8c040 85%, #c84030 100%);clip-path:inset(0 35% 0 0)"></span> </div> </div> <div style="box-sizing:border-box;flex:1;padding:6px 8px;border-right:none"> <div style="box-sizing:border-box;font-size:8px;margin-bottom:4px;color:rgba(255, 255, 255, 0.5);font-family:"Courier New", monospace">DECK B -20 - -10 - -5 - 0 - +3</div> <div style="box-sizing:border-box;height:5px;background:rgba(0, 0, 0, 0.5);position:relative"> <span style="box-sizing:border-box;display:block;height:100%;width:65%;background:linear-gradient(90deg, #2a8a44 0%, #60c840 70%, #e8c040 85%, #c84030 100%);clip-path:inset(0 18% 0 0)"></span> </div> </div> </div> <div style="box-sizing:border-box;display:flex;gap:0;padding:10px;background:#a8b0ba;border-bottom:1px solid #9aa3ae"> <div style="box-sizing:border-box;flex:1;background:#1e2228;border:2px solid #0e1014;box-shadow:inset 0 2px 6px rgba(0,0,0,0.4)"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;padding:5px 8px;background:#2a2e34;border-bottom:1px solid #0e1014;font-size:9px"> <span style="box-sizing:border-box;font-weight:700;color:rgba(255, 255, 255, 0.85);font-family:"Courier New", monospace;letter-spacing:0.06em">DECK A</span> <span style="box-sizing:border-box;color:rgba(255, 255, 255, 0.35);font-size:8px">dub bus / brass bias</span> </div> <div style="box-sizing:border-box;display:flex;align-items:center;gap:6px;padding:10px 8px;background:rgba(0, 0, 0, 0.15)"> <div style="box-sizing:border-box;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle, #111 0%, #2a2e34 100%);border:1px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center"> <span style="box-sizing:border-box;width:8px;height:8px;border-radius:50%;background:#3a3d42"></span> </div> <div style="box-sizing:border-box;flex:1;text-align:center;font-size:9px;color:rgba(255, 255, 255, 0.5)"> <div style="box-sizing:border-box;height:2px;background:rgba(255,255,255,0.15);margin-bottom:4px"></div> <div style="box-sizing:border-box;font-size:8px;margin-top:3px;text-transform:uppercase;letter-spacing:0.04em">deck queue</div> </div> <div style="box-sizing:border-box;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle, #111 0%, #2a2e34 100%);border:1px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center"> <span style="box-sizing:border-box;width:8px;height:8px;border-radius:50%;background:#3a3d42"></span> </div> </div> </div> <div style="box-sizing:border-box;width:64px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 4px"> <div style="box-sizing:border-box;font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#3a4552;text-align:center;line-height:1.3">PITCH</div> <div style="box-sizing:border-box;display:flex;justify-content:space-between;width:100%;font-size:7px;color:#5a6878;font-family:"Courier New", monospace"> <span style="box-sizing:border-box">+</span> <span style="box-sizing:border-box">0</span> <span style="box-sizing:border-box">-</span> </div> <div style="box-sizing:border-box;width:100%;height:4px;background:#8a939e;border:1px solid #6a7380;position:relative"> <span style="box-sizing:border-box;position:absolute;left:48%;top:-2px;width:3px;height:8px;background:#1a1e22;border:1px solid rgba(0,0,0,0.5)"></span> </div> </div> <div style="box-sizing:border-box;flex:1;background:#1e2228;border:2px solid #0e1014;box-shadow:inset 0 2px 6px rgba(0,0,0,0.4)"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;padding:5px 8px;background:#2a2e34;border-bottom:1px solid #0e1014;font-size:9px"> <span style="box-sizing:border-box;font-weight:700;color:rgba(255, 255, 255, 0.85);font-family:"Courier New", monospace;letter-spacing:0.06em">DECK B</span> <span style="box-sizing:border-box;color:rgba(255, 255, 255, 0.35);font-size:8px">cool mix / blue bias</span> </div> <div style="box-sizing:border-box;display:flex;align-items:center;gap:6px;padding:10px 8px;background:rgba(0, 0, 0, 0.15)"> <div style="box-sizing:border-box;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle, #111 0%, #2a2e34 100%);border:1px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center"> <span style="box-sizing:border-box;width:8px;height:8px;border-radius:50%;background:#3a3d42"></span> </div> <div style="box-sizing:border-box;flex:1;text-align:center;font-size:9px;color:rgba(255, 255, 255, 0.5)"> <div style="box-sizing:border-box;height:2px;background:rgba(255,255,255,0.15);margin-bottom:4px"></div> <div style="box-sizing:border-box;font-size:8px;margin-top:3px;text-transform:uppercase;letter-spacing:0.04em">night side</div> </div> <div style="box-sizing:border-box;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle, #111 0%, #2a2e34 100%);border:1px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center"> <span style="box-sizing:border-box;width:8px;height:8px;border-radius:50%;background:#3a3d42"></span> </div> </div> </div> </div> <div style="box-sizing:border-box;display:flex;align-items:stretch;gap:0;padding:8px 10px;background:#9aa3ae;border-top:1px solid #8a939e"> <div style="box-sizing:border-box;flex:1;display:flex;gap:3px"> <span style="box-sizing:border-box;flex:1;padding:8px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:#c8cfd8;color:#3a4552;border:1px solid #8a939e;box-shadow:0 2px 0 #6a7380;position:relative;top:0">REW</span> <span style="box-sizing:border-box;flex:1;padding:8px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;border:1px solid #8a939e;position:relative;top:0;background:#3a4552;color:rgba(255,255,255,0.9);box-shadow:0 2px 0 #0e1014;border-color:#1a1e22">PLAY</span> <span style="box-sizing:border-box;flex:1;padding:8px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:#c8cfd8;color:#3a4552;border:1px solid #8a939e;box-shadow:0 2px 0 #6a7380;position:relative;top:0">FF</span> <span style="box-sizing:border-box;flex:1;padding:8px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:#c8cfd8;color:#3a4552;border:1px solid #8a939e;box-shadow:0 2px 0 #6a7380;position:relative;top:0">PAUSE</span> <span style="box-sizing:border-box;flex:1;padding:8px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:#c8cfd8;color:#3a4552;border:1px solid #8a939e;box-shadow:0 2px 0 #6a7380;position:relative;top:0">STOP</span> <span style="box-sizing:border-box;flex:1;padding:8px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;border:1px solid #8a939e;position:relative;top:0;background:#8a2828;color:rgba(255,255,255,0.9);box-shadow:0 2px 0 #3a0808;border-color:#5a1818">REC</span> </div> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Deck A</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">warm mix / amber bias</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">ENGAGE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">A1</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 01</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:08</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">RUN</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">A2</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 02</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:49</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">RUN</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Deck B</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">cool mix / blue bias</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">ENGAGE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">B1</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 03</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">4:11</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">RUN</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">B2</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 04</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">4:28</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">RUN</span> </div> </div> </div> </div>

A good fit for playlists that want a more tactile, studio-led look.

06. Archive Edition

JEWEL CASE / 74 min

 

ARCHIVE - LIBRARY ED. - AT-06

 

AT-06 / library copy

Blue Current

 

 

FIELD NOTES - CAT NO AT-06

Panel A

front sleeve / fold-out

UNFOLD

A1

Song title 05

2:58 READ

A2

Song title 06

Lyrics go here.

3:42 READ

Panel B

back sleeve / reverse notes

UNFOLD

B1

Song title 07

3:17 READ

B2

Song title 08

4:04 READ

Signal Static batch 01

Ordered and understated, with a neat reference-shelf feel.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:0;background:linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(224,232,240,0.92) 100%);border:1px solid rgba(160,174,188,0.7);position:relative"> <div style="box-sizing:border-box;position:absolute;top:10px;right:8px;z-index:2;padding:2px 6px;font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;background:#f0c030;color:#3a2800;transform:rotate(1.5deg);box-shadow:0 1px 2px rgba(0,0,0,0.18)">JEWEL CASE / 74 min</div> <div style="box-sizing:border-box;display:flex;flex-direction:row;gap:0;padding:0"> <div style="box-sizing:border-box;width:8px;flex-shrink:0;background:linear-gradient(90deg, rgba(180,192,204,0.9) 0%, rgba(220,228,236,0.7) 100%);border-right:1px solid rgba(140,156,172,0.5);display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;padding:12px 0"> <span style="box-sizing:border-box;width:4px;height:4px;border-radius:50%;background:rgba(100,116,132,0.55);box-shadow:inset 0 1px 1px rgba(0,0,0,0.2)"></span> <span style="box-sizing:border-box;width:4px;height:4px;border-radius:50%;background:rgba(100,116,132,0.55);box-shadow:inset 0 1px 1px rgba(0,0,0,0.2)"></span> <span style="box-sizing:border-box;width:4px;height:4px;border-radius:50%;background:rgba(100,116,132,0.55);box-shadow:inset 0 1px 1px rgba(0,0,0,0.2)"></span> </div> <div style="box-sizing:border-box;width:16px;flex-shrink:0;background:#1a1e22;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px 0;writing-mode:vertical-rl;transform:rotate(180deg);font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.75);gap:0"> <span style="box-sizing:border-box">ARCHIVE - LIBRARY ED. - AT-06</span> </div> <div style="box-sizing:border-box;flex:1;display:flex;flex-direction:column;overflow:hidden;background:white;border-left:1px solid rgba(160,174,188,0.3)"> <div style="box-sizing:border-box;width:100%;height:64px;flex-shrink:0;background:linear-gradient(110deg, #1e3a60 0%, #2a5080 35%, #8a6020 70%, #c4a040 100%);position:relative;overflow:hidden"></div> <div style="box-sizing:border-box;padding:6px 8px 4px;flex-shrink:0"> <div style="box-sizing:border-box;font-size:8px;text-transform:uppercase;letter-spacing:0.06em;color:#3d4f5e;font-weight:700;margin-bottom:2px">AT-06 / library copy</div> <div style="box-sizing:border-box;font-size:13px;font-weight:700;color:#1a2633;margin:0 0 2px">Blue Current</div> </div> <div style="box-sizing:border-box;margin-top:auto;display:flex;align-items:center;gap:8px;background:#1a1e22;padding:5px 8px"> <div style="box-sizing:border-box;width:28px;height:28px;flex-shrink:0;border-radius:50%;background:radial-gradient(circle at 40% 35%, #606878 0%, #3a4250 35%, #5a6878 60%, #8898a8 80%, #a8b8c8 100%);border:1px solid rgba(255,255,255,0.12);box-shadow:inset 0 1px 3px rgba(0,0,0,0.4)"></div> <div style="box-sizing:border-box;flex:1;height:18px;background:repeating-linear-gradient( 90deg, rgba(255,255,255,0.85) 0px, rgba(255,255,255,0.85) 1px, transparent 1px, transparent 2px, rgba(255,255,255,0.85) 2px, rgba(255,255,255,0.85) 3px, transparent 3px, transparent 5px, rgba(255,255,255,0.85) 5px, rgba(255,255,255,0.85) 6px, transparent 6px, transparent 9px, rgba(255,255,255,0.85) 9px, rgba(255,255,255,0.85) 10px, transparent 10px, transparent 12px );opacity:0.7"></div> </div> <div style="box-sizing:border-box;padding:3px 8px 4px;font-size:8px;color:rgba(255,255,255,0.45);font-family:"Courier New", monospace;background:#1a1e22">FIELD NOTES - CAT NO AT-06</div> </div> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Panel A</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">front sleeve / fold-out</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">UNFOLD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">A1</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 05</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">READ</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">A2</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 06</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:42</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">READ</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Panel B</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">back sleeve / reverse notes</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">UNFOLD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">B1</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 07</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:17</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">READ</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">B2</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 08</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">4:04</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">READ</span> </div> </div> </div> </div>

Useful if you want something quieter and more orderly on the page.

07. Pocket Glow

VOL

MEGA BASS AVLS

 

 

 

MIDNIGHT LOUNGE MIX

 

OPEN

REW FF PLAY STOP PAUSE

0427

 

Inlay 01

fold-out inlay / side one

SPIN

A1

Song title 01

3:35 GO

A2

Song title 02

Lyrics go here.

4:02 GO

Inlay 02

back fold / night side

SPIN

B1

Song title 03

2:49 GO

B2

Song title 04

3:54 GO

Signal Static batch 01

Compact and softly lit, with the feel of a well-used portable player.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:0;background:#d4d8de;border:2px solid #a8adb4;box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.15);color:#1a2633;border-radius:6px;overflow:hidden"> <div style="box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#c0c4ca;border-bottom:1px solid #a8adb4"> <div style="box-sizing:border-box;display:flex;align-items:center;gap:5px;font-size:8px;font-weight:700;color:#5a6068;text-transform:uppercase;letter-spacing:0.04em">VOL</div> <div style="box-sizing:border-box;display:flex;gap:4px"> <span style="box-sizing:border-box;border:1px solid rgba(0,0,0,0.12);align-self:center;margin-right:8px;padding:2px 5px;font-size:7px;font-weight:700;text-transform:uppercase;background:#1a5a88;color:white">MEGA BASS</span> <span style="box-sizing:border-box;padding:3px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:rgba(0, 0, 0, 0.15);color:#3a4552;border:1px solid rgba(0,0,0,0.12);align-self:center;margin-right:8px">AVLS</span> </div> <div style="box-sizing:border-box;width:10px;height:10px;border-radius:50%;background:#2a2e32;border:2px solid #1a1e22"></div> </div> <div style="box-sizing:border-box;margin:8px;background:rgba(40,50,60,0.18);border:1px solid rgba(255,255,255,0.45);border-bottom-color:rgba(0,0,0,0.18);box-shadow:inset 0 1px 3px rgba(0,0,0,0.12)"> <div style="box-sizing:border-box;display:flex;align-items:center;gap:5px;padding:8px;background:rgba(0,0,0,0.35)"> <div style="box-sizing:border-box;border-radius:50%;background:radial-gradient(circle, #1a1c20 0%, #2a2d32 100%);border:1px solid rgba(255, 255, 255, 0.2);display:flex;align-items:center;justify-content:center;width:16px;height:16px"> <span style="box-sizing:border-box;border-radius:50%;background:#3a3d42;width:5px;height:5px"></span> </div> <div style="box-sizing:border-box;flex:1;text-align:center;font-size:9px;color:rgba(255, 255, 255, 0.5)"> <div style="box-sizing:border-box;height:2px;background:rgba(255,255,255,0.15);margin-bottom:4px"></div> <div style="box-sizing:border-box;font-size:8px;margin-top:3px;text-transform:uppercase;letter-spacing:0.04em">MIDNIGHT LOUNGE MIX</div> </div> <div style="box-sizing:border-box;border-radius:50%;background:radial-gradient(circle, #1a1c20 0%, #2a2d32 100%);border:1px solid rgba(255, 255, 255, 0.2);display:flex;align-items:center;justify-content:center;width:16px;height:16px"> <span style="box-sizing:border-box;border-radius:50%;background:#3a3d42;width:5px;height:5px"></span> </div> </div> <div style="box-sizing:border-box;text-align:center;font-size:7px;font-weight:700;text-transform:uppercase;color:#5a6068;padding:3px 8px;background:#c0c4ca;border:1px solid #a0a4aa;box-shadow:0 1px 0 #8a8e92;margin:0 8px 8px">OPEN</div> </div> <div style="box-sizing:border-box;display:flex;align-items:stretch;gap:0;border-top:1px solid #a8adb4"> <div style="box-sizing:border-box;display:flex;flex-direction:column;gap:0;border-right:1px solid #a8adb4;min-width:44px"> <span style="box-sizing:border-box;padding:7px 8px;font-size:7px;font-weight:700;text-transform:uppercase;color:#4a5058;background:#c8ccd2;border-bottom:1px solid #b0b4ba;text-align:center;letter-spacing:0.04em">REW</span> <span style="box-sizing:border-box;padding:7px 8px;font-size:7px;font-weight:700;text-transform:uppercase;color:#4a5058;background:#c8ccd2;border-bottom:1px solid #b0b4ba;text-align:center;letter-spacing:0.04em">FF</span> <span style="box-sizing:border-box;padding:7px 8px;font-size:7px;font-weight:700;text-transform:uppercase;border-bottom:1px solid #b0b4ba;text-align:center;letter-spacing:0.04em;color:rgba(255,255,255,0.9);background:#1a4a6a;border-color:#0e2e44">PLAY</span> <span style="box-sizing:border-box;padding:7px 8px;font-size:7px;font-weight:700;text-transform:uppercase;color:#4a5058;background:#c8ccd2;border-bottom:1px solid #b0b4ba;text-align:center;letter-spacing:0.04em">STOP</span> <span style="box-sizing:border-box;padding:7px 8px;font-size:7px;font-weight:700;text-transform:uppercase;color:#4a5058;background:#c8ccd2;text-align:center;letter-spacing:0.04em;border-bottom:none">PAUSE</span> </div> <div style="box-sizing:border-box;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:10px 10px"> <div style="box-sizing:border-box;padding:3px 7px;font:700 12px "Courier New", monospace;background:#1a1f14;color:#c8e040;border:1px solid rgba(0,0,0,0.4);letter-spacing:0.06em">0427</div> <div style="box-sizing:border-box;display:flex;gap:2px;align-items:center"> <span style="box-sizing:border-box;width:9px;height:7px;border:1px solid #8a8e92;background:#2a6a2a;border-color:#1a4a1a"></span> <span style="box-sizing:border-box;width:9px;height:7px;border:1px solid #8a8e92;background:#2a6a2a;border-color:#1a4a1a"></span> <span style="box-sizing:border-box;width:9px;height:7px;border:1px solid #8a8e92;background:#2a6a2a;border-color:#1a4a1a"></span> <span style="box-sizing:border-box;width:9px;height:7px;background:#b0b4ba;border:1px solid #8a8e92"></span> </div> </div> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Inlay 01</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">fold-out inlay / side one</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">SPIN</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">A1</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 01</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:35</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">GO</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">A2</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 02</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">4:02</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">GO</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Inlay 02</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">back fold / night side</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">SPIN</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">B1</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 03</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">2:49</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">GO</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">B2</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 04</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:54</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">GO</span> </div> </div> </div> </div>

One of the more compact layouts, with a softer finish.

08. Autochanger

GENERIC AUDIO SYSTEMS

AT-5CD / MK2

Late Night

Session

Transfer

Signal

Express

DISC 02 - TRACK 03 - SLOT SESSIONS

HALO (CHANGER READOUT) - 04:09 / 38:42 TOTAL - PLAY

DISC 1 DISC 2 DISC 3 DISC 4 DISC 5 OPEN PLAY PAUSE STOP PREV NEXT PROGRAM

Disc 01

late night mix / 38:42 total

MOUNT

01-01

Song title 05

3:11 SEL

01-02

Song title 06

Lyrics go here.

4:01 SEL

Disc 02

slot sessions / selected disc

MOUNT

02-01

Song title 07

4:09 SEL

02-02

Song title 08

3:58 SEL

Disc 03

cue point / gold-lit disc

MOUNT

03-01

Song title 01

3:33 SEL

03-02

Song title 02

2:57 SEL

Signal Static batch 01

A modular, media-led layout with stacked details and clear structure.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;border:1px solid rgba(58, 76, 92, 0.12);padding:14px;background:linear-gradient(180deg, #c4cbd4 0%, #b0b8c4 100%)"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(0, 0, 0, 0.1)"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;color:#1a2633;letter-spacing:0.06em">GENERIC AUDIO SYSTEMS</div> <div style="box-sizing:border-box;font-size:9px;color:#3d4f5e">AT-5CD / MK2</div> </div> <div style="box-sizing:border-box;display:flex;gap:6px;margin-bottom:12px;padding:10px;background:rgba(0, 0, 0, 0.1);border:1px solid rgba(0, 0, 0, 0.15)"> <div style="box-sizing:border-box;flex:1;height:60px;background:rgba(255, 255, 255, 0.4);border:1px solid rgba(0, 0, 0, 0.1);display:flex;align-items:center;justify-content:center"> <div style="box-sizing:border-box;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle, #3a4552 0%, #8a9aa8 60%, #b4c0cd 100%);display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;color:rgba(255, 255, 255, 0.8);text-transform:uppercase"> <span style="box-sizing:border-box">Late Night</span> </div> </div> <div style="box-sizing:border-box;flex:1;height:60px;border:1px solid rgba(0, 0, 0, 0.1);display:flex;align-items:center;justify-content:center;background:rgba(74, 127, 168, 0.2);border-color:#4a7fa8"> <div style="box-sizing:border-box;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle, #3a4552 0%, #8a9aa8 60%, #b4c0cd 100%);display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;color:rgba(255, 255, 255, 0.8);text-transform:uppercase"> <span style="box-sizing:border-box">Session</span> </div> </div> <div style="box-sizing:border-box;flex:1;height:60px;background:rgba(255, 255, 255, 0.4);border:1px solid rgba(0, 0, 0, 0.1);display:flex;align-items:center;justify-content:center"> <div style="box-sizing:border-box;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle, #3a4552 0%, #8a9aa8 60%, #b4c0cd 100%);display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;color:rgba(255, 255, 255, 0.8);text-transform:uppercase"> <span style="box-sizing:border-box">Transfer</span> </div> </div> <div style="box-sizing:border-box;flex:1;height:60px;background:rgba(255, 255, 255, 0.4);border:1px solid rgba(0, 0, 0, 0.1);display:flex;align-items:center;justify-content:center"> <div style="box-sizing:border-box;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle, #3a4552 0%, #8a9aa8 60%, #b4c0cd 100%);display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;color:rgba(255, 255, 255, 0.8);text-transform:uppercase"> <span style="box-sizing:border-box">Signal</span> </div> </div> <div style="box-sizing:border-box;flex:1;height:60px;background:rgba(255, 255, 255, 0.4);border:1px solid rgba(0, 0, 0, 0.1);display:flex;align-items:center;justify-content:center"> <div style="box-sizing:border-box;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle, #3a4552 0%, #8a9aa8 60%, #b4c0cd 100%);display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;color:rgba(255, 255, 255, 0.8);text-transform:uppercase"> <span style="box-sizing:border-box">Express</span> </div> </div> </div> <div style="box-sizing:border-box;padding:8px 10px;margin-bottom:10px;background:#1a2633;border:1px solid rgba(0, 0, 0, 0.3);font-family:"Courier New", monospace"> <div style="box-sizing:border-box;font-size:11px;font-weight:700;color:#6dbdf2;margin-bottom:3px">DISC 02 - TRACK 03 - SLOT SESSIONS</div> <div style="box-sizing:border-box;font-size:9px;color:#4a9fd4;opacity:0.8">HALO (CHANGER READOUT) - 04:09 / 38:42 TOTAL - PLAY</div> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:repeat(6, 1fr);gap:4px"> <span style="box-sizing:border-box;padding:6px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:rgba(255, 255, 255, 0.6);border:1px solid rgba(0, 0, 0, 0.15);color:#3d4f5e">DISC 1</span> <span style="box-sizing:border-box;padding:6px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;border:1px solid rgba(0, 0, 0, 0.15);background:#1a2633;color:white;border-color:#1a2633">DISC 2</span> <span style="box-sizing:border-box;padding:6px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:rgba(255, 255, 255, 0.6);border:1px solid rgba(0, 0, 0, 0.15);color:#3d4f5e">DISC 3</span> <span style="box-sizing:border-box;padding:6px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:rgba(255, 255, 255, 0.6);border:1px solid rgba(0, 0, 0, 0.15);color:#3d4f5e">DISC 4</span> <span style="box-sizing:border-box;padding:6px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:rgba(255, 255, 255, 0.6);border:1px solid rgba(0, 0, 0, 0.15);color:#3d4f5e">DISC 5</span> <span style="box-sizing:border-box;padding:6px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:rgba(255, 255, 255, 0.6);border:1px solid rgba(0, 0, 0, 0.15);color:#3d4f5e">OPEN</span> <span style="box-sizing:border-box;padding:6px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;border:1px solid rgba(0, 0, 0, 0.15);background:#1a2633;color:white;border-color:#1a2633">PLAY</span> <span style="box-sizing:border-box;padding:6px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:rgba(255, 255, 255, 0.6);border:1px solid rgba(0, 0, 0, 0.15);color:#3d4f5e">PAUSE</span> <span style="box-sizing:border-box;padding:6px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:rgba(255, 255, 255, 0.6);border:1px solid rgba(0, 0, 0, 0.15);color:#3d4f5e">STOP</span> <span style="box-sizing:border-box;padding:6px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:rgba(255, 255, 255, 0.6);border:1px solid rgba(0, 0, 0, 0.15);color:#3d4f5e">PREV</span> <span style="box-sizing:border-box;padding:6px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:rgba(255, 255, 255, 0.6);border:1px solid rgba(0, 0, 0, 0.15);color:#3d4f5e">NEXT</span> <span style="box-sizing:border-box;padding:6px 4px;text-align:center;font-size:8px;font-weight:700;text-transform:uppercase;background:rgba(255, 255, 255, 0.6);border:1px solid rgba(0, 0, 0, 0.15);color:#3d4f5e">PROGRAM</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Disc 01</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">late night mix / 38:42 total</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">MOUNT</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">01-01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 05</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:11</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SEL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">01-02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 06</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SEL</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Disc 02</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">slot sessions / selected disc</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">MOUNT</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">02-01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 07</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">4:09</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SEL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">02-02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 08</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SEL</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Disc 03</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">cue point / gold-lit disc</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">MOUNT</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">03-01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 01</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:33</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SEL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">03-02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 02</span> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">2:57</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SEL</span> </div> </div> </div> </div>

A stronger option if you want a layout with more visible structure.

09. Teal Register

TOC READ MZ-R900

GRP 01 / AT-MDNetMD

Turquoise TOC

SESSION - FINALISE - LP4

TR 01/14REC04:13

IN

 

OUT

PLAY STOP GRP

WARN CLASS 1 LASERS/N 0147-B

Group A

index set / teal trim

TOC

01

Song title 01

Lyrics go here.

3:24 PLAY

02

Song title 02

Lyrics go here.

2:58 PLAY

03

Song title 03

Lyrics go here.

4:01 PLAY

04

Song title 04

Lyrics go here.

3:12 PLAY

Group B

return buffer / late

TOC

01

Song title 05

Lyrics go here.

3:24 PLAY

02

Song title 06

Lyrics go here.

2:58 PLAY

03

Song title 07

Lyrics go here.

4:01 PLAY

04

Song title 08

Lyrics go here.

3:12 PLAY

Signal Static batch 01

Teal accents and strong dividers give it a tidy, catalogue-like finish.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:12px 14px 14px;background:linear-gradient(180deg,#2e363c 0%,#232a30 100%);border:1px solid #141a1f;box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),inset 0 -1px 0 rgba(0,0,0,0.35);display:flex;justify-content:center;position:relative"> <span style="position:absolute;top:4px;left:5px;width:3px;height:3px;background:#0a1014;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,0.08)"></span> <span style="position:absolute;top:4px;right:5px;width:3px;height:3px;background:#0a1014;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,0.08)"></span> <span style="position:absolute;bottom:4px;left:5px;width:3px;height:3px;background:#0a1014;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,0.08)"></span> <span style="position:absolute;bottom:4px;right:5px;width:3px;height:3px;background:#0a1014;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,0.08)"></span> <div style="box-sizing:border-box;width:100%;max-width:208px;display:flex;flex-direction:column;align-items:stretch;gap:6px"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;font-size:8px;font-family:"Courier New",monospace;color:rgba(255,255,255,0.6)"> <span style="display:flex;align-items:center;gap:4px"><span style="width:5px;height:5px;background:#c42828;border-radius:50%;box-shadow:0 0 3px rgba(196,40,40,0.8)"></span>TOC READ</span> <span style="font-size:7px;letter-spacing:0.04em;color:rgba(255,255,255,0.4)">MZ-R900</span> </div> <div style="box-sizing:border-box;background:#0a1416;border:1px solid #3a9aa8;border-top-width:2px;padding:7px 8px;font-family:"Courier New",monospace;min-height:62px;box-shadow:inset 0 0 8px rgba(58,154,168,0.15)"> <div style="display:flex;justify-content:space-between;font-size:8px;color:#3a9aa8;font-weight:700;letter-spacing:0.08em;margin-bottom:2px"><span>GRP 01 / AT-MD</span><span style="color:rgba(122,216,208,0.55)">NetMD</span></div> <div style="font-size:11px;color:#7dd8d0;font-weight:700;margin-bottom:2px;text-shadow:0 0 4px rgba(125,216,208,0.45)">Turquoise TOC</div> <div style="font-size:8px;color:rgba(122,216,208,0.55);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px">SESSION - FINALISE - LP4</div> <div style="display:flex;justify-content:space-between;font-size:7px;color:rgba(122,216,208,0.4)"><span>TR 01/14</span><span>REC</span><span>04:13</span></div> </div> <div style="box-sizing:border-box;display:flex;gap:4px;align-items:center"> <span style="font-size:7px;color:rgba(255,255,255,0.4);font-family:"Courier New",monospace">IN</span> <div style="flex:1;height:5px;background:#111618;border-top:1px solid #050708;border-bottom:1px solid #3a4a52;position:relative;border-radius:1px"> <div style="position:absolute;left:8%;top:0;bottom:0;width:18%;background:linear-gradient(90deg,#3a9aa8,#7dd8d0);border-radius:1px"></div> <span style="position:absolute;left:78%;top:-1px;width:2px;height:7px;background:#e4c95a"></span> </div> <span style="font-size:7px;color:rgba(255,255,255,0.4);font-family:"Courier New",monospace">OUT</span> </div> <div style="box-sizing:border-box;display:flex;gap:4px;justify-content:center"> <span style="flex:1;padding:5px 0;text-align:center;font-size:7px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;background:linear-gradient(180deg,#4abac8,#2a8090);color:#0a1214;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -1px 0 rgba(0,0,0,0.25)">PLAY</span> <span style="flex:1;padding:5px 0;text-align:center;font-size:7px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;background:linear-gradient(180deg,#4a5662,#2f3943);color:white;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),inset 0 -1px 0 rgba(0,0,0,0.35)">STOP</span> <span style="flex:1;padding:5px 0;text-align:center;font-size:7px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;background:linear-gradient(180deg,#4a5662,#2f3943);color:white;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),inset 0 -1px 0 rgba(0,0,0,0.35)">GRP</span> </div> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;font-size:6px;font-family:"Courier New",monospace;color:rgba(255,255,255,0.28);letter-spacing:0.08em;padding-top:2px;border-top:1px solid rgba(255,255,255,0.05)"> <span>WARN CLASS 1 LASER</span><span>S/N 0147-B</span> </div> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Group A</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">index set / teal trim</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">TOC</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 01</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">PLAY</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 02</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">PLAY</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 03</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">PLAY</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 04</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">PLAY</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Group B</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">return buffer / late</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">TOC</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 05</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">PLAY</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 06</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">PLAY</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 07</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">PLAY</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 08</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">PLAY</span> </div> </div> </div> </div>

Good for denser playlists where clearer signposting helps.

10. Chrome Signal

ESP 40 SECG-PROTECTION HOLD

TR 01 - 04:13- 38:47

SONG TITLE - ANTI-SKIP - NORM

BUF

REW PLAY FF

* LINE - * PHONES2xAA - Ni-MH

Disc A

ESP on / chrome mix

HOLD

01

Song title 01

Lyrics go here.

3:24 HOLD

02

Song title 02

Lyrics go here.

2:58 PLAY

03

Song title 03

Lyrics go here.

4:01 HOLD

04

Song title 04

Lyrics go here.

3:12 PLAY

Disc B

return / silver lid

HOLD

01

Song title 05

Lyrics go here.

3:24 HOLD

02

Song title 06

Lyrics go here.

2:58 PLAY

03

Song title 07

Lyrics go here.

4:01 HOLD

04

Song title 08

Lyrics go here.

3:12 PLAY

Signal Static batch 01

Cool metallic tones and bright highlights make it feel sleek and direct.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:10px 14px 12px;background:linear-gradient(180deg,#f4f6f9 0%,#dce1e8 48%,#c2c9d2 100%);border:1px solid #9ea6b0;border-top:1px solid #ffffff;border-radius:20px 20px 14px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.8),inset 0 -2px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04);position:relative"> <span style="position:absolute;top:3px;left:50%;transform:translateX(-50%);width:24px;height:3px;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(90,104,120,0.4),rgba(0,0,0,0));border-radius:2px"></span> <span style="position:absolute;top:4px;left:10px;width:3px;height:3px;border-radius:50%;background:#8a929a;box-shadow:inset 0 1px 1px rgba(0,0,0,0.4)"></span> <span style="position:absolute;top:4px;right:10px;width:3px;height:3px;border-radius:50%;background:#8a929a;box-shadow:inset 0 1px 1px rgba(0,0,0,0.4)"></span> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;margin:6px 0 8px"> <span style="display:flex;align-items:center;gap:5px"><span style="font-size:7px;font-weight:700;letter-spacing:0.08em;color:#2a3540;background:linear-gradient(180deg,#ffffff,#d8dce4);border:1px solid #9aa3ae;padding:2px 5px;border-radius:2px">ESP 40 SEC</span><span style="font-size:7px;color:#5a6878;letter-spacing:0.06em">G-PROTECTION</span></span> <span style="font-size:7px;padding:2px 5px;border:1px solid #8a929a;background:linear-gradient(180deg,#fafbfd,#dfe3ea);border-radius:2px;color:#3d4f5e;font-weight:700;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.08)">HOLD</span> </div> <div style="box-sizing:border-box;background:#1a2633;padding:7px 10px;border-radius:3px;margin-bottom:8px;font-family:"Courier New",monospace;border:1px solid #0a1018;box-shadow:inset 0 2px 4px rgba(0,0,0,0.5),inset 0 0 10px rgba(126,200,232,0.08)"> <div style="display:flex;justify-content:space-between;font-size:10px;color:#7ec8e8;font-weight:700;letter-spacing:0.06em;margin-bottom:2px"><span>TR 01 - 04:13</span><span style="font-size:8px;color:rgba(126,200,232,0.5)">- 38:47</span></div> <div style="font-size:8px;color:rgba(126,200,232,0.72);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:3px">SONG TITLE - ANTI-SKIP - NORM</div> <div style="display:flex;gap:1px;align-items:center"><span style="flex:1;height:2px;background:#2a4050"></span><span style="flex:1;height:2px;background:#3a5a70"></span><span style="flex:1;height:2px;background:#4a7088"></span><span style="flex:1;height:2px;background:#5a8aa0"></span><span style="flex:1;height:2px;background:#7ec8e8"></span><span style="flex:1;height:2px;background:#2a4050"></span><span style="flex:1;height:2px;background:#2a4050"></span><span style="flex:1;height:2px;background:#2a4050"></span><span style="font-size:6px;color:rgba(126,200,232,0.5);margin-left:4px">BUF</span></div> </div> <div style="box-sizing:border-box;display:flex;gap:5px;justify-content:center;align-items:center"> <span style="padding:5px 9px;font-size:8px;font-weight:700;text-transform:uppercase;background:linear-gradient(180deg,#ffffff,#d6dae2);border:1px solid #9aa3ae;border-radius:3px;color:#3d4f5e;box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 1px 0 rgba(0,0,0,0.05)">REW</span> <span style="padding:6px 14px;font-size:8px;font-weight:700;text-transform:uppercase;background:linear-gradient(180deg,#2a3a4c,#121c28);color:#7ec8e8;border-radius:3px;border:1px solid #0a1018;box-shadow:inset 0 1px 0 rgba(126,200,232,0.15),0 1px 0 rgba(0,0,0,0.1)">PLAY</span> <span style="padding:5px 9px;font-size:8px;font-weight:700;text-transform:uppercase;background:linear-gradient(180deg,#ffffff,#d6dae2);border:1px solid #9aa3ae;border-radius:3px;color:#3d4f5e;box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 1px 0 rgba(0,0,0,0.05)">FF</span> </div> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:5px;border-top:1px solid rgba(90,104,120,0.2);font-size:6px;color:#5a6878;letter-spacing:0.08em;font-family:"Courier New",monospace"> <span>* LINE - * PHONES</span><span>2xAA - Ni-MH</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Disc A</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">ESP on / chrome mix</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">HOLD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 01</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">HOLD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 02</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">PLAY</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 03</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">HOLD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 04</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">PLAY</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">Disc B</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">return / silver lid</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">HOLD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 05</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">HOLD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 06</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">PLAY</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 07</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">HOLD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px "Courier New", monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 08</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px "Courier New", monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">PLAY</span> </div> </div> </div> </div>

A neat choice if you want something compact, bright and slightly sharper.