Style guide

Loopbox — dark system

Sharp edges, hairline rules, one warm accent. Every corner is square by rule, not by preference — border-radius: 0 is enforced globally.

Radius
0 px
Hairline
1 px
Grid
4 / 8 px
Container
1200 px

01 — Palette

Warm near-blacks, warm off-whites, one spice accent for action and one cold cyan reserved for anything the machine decided. Ratios are measured against the page ground.

Ground and rules

  • #0B0A08 void — page ground base
  • #121110 surface — panels, cards 1.05:1
  • #191714 raised — fields, active row 1.11:1
  • #2A2621 rule — hairline 1.32:1
  • #3E3830 rule-strong — control border 1.71:1

Ink

  • #F2EDE4 ink — primary text 16.97:1
  • #B5AB9C ink-2 — body, secondary 8.74:1
  • #8A8175 ink-3 — labels, metadata 5.16:1
  • #6E665C ink-4 — decoration, disabled 3.50:1

Accent and signal

  • #FF5A17 spice — action, brand 6.34:1
  • #FF7A45 spice-hi — hover 7.65:1
  • #4FC3D9 ibad — machine-detected 9.56:1
  • #5CBB78 ok — ready 8.33:1
  • #D9A441 warn — analysing 8.80:1
  • #F0604C danger — failed 6.11:1

Do

Ground on spice — 6.34:1. Every filled spice control takes near-black text.

Don't

Ink on spice — 2.68:1. Fails AA at every size. Never ship it.

Limit

ink-4 #6E665C is 3.50:1 — decoration, disabled states and rules only. Never body or label text.

02 — Typography

  • Ten thousand Display · Archivo 600 · wdth 125 · 68/1.0 · +.005em · uppercase · hero only
  • Section heading H2 · Archivo 600 · wdth 112 · 38/1.08 · +.01em · uppercase
  • Card heading H3 · Archivo 600 · wdth 112 · 15/1.3 · +.1em · uppercase
  • Body copy sets the reading rhythm. Body large · Archivo 400 · 17/1.62 · lead paragraphs
  • Secondary body copy. Body · Archivo 400 · 15/1.62 · default prose
  • INSTRUMENT Label · JetBrains Mono 500 · 11–12/1 · +.14em · uppercase · every panel header
  • kick_808_punch_124.wav Data · JetBrains Mono 400 · 12–13 · tabular · filenames, numbers, controls

03 — Components

Buttons · 44 / 36 / 30 px

Primary action Ghost Ghost · hover Destructive Disabled

Never white on spice. Focus ring is a 2 px spice outline at 2 px offset. The disabled row is the only legal use of ink-4 on text.

Fields

Search filename or tag… Cmin 124 punchy focus 16-bit▾
MONO STEREO
Bit crush 12 bit

Tags & status

kick techno keeper + add tag

Cyan square = detected by analysis. Grey square = added by the user. The two never share a colour.

Ready Analysing Uploading Failed

Status always pairs a colour with a word — colour alone never carries meaning.

Facet row · 30 px

kick 412 snare 288 hat 501

Nav item · 40 px

Library Upload

Waveform

Playing · spice

Idle · ink-4 · 2 px bars, 2 px gap · 3 px on marketing

Not analysed yet · rule-strong

Spacing scale

  • 4 icon gap
  • 8 chip gap
  • 12 control gap
  • 16 panel gap
  • 24 panel padding
  • 32 card padding
  • 56 block gap
  • 96 section padding

04 — Accessibility & motion

Contrast

All text tokens clear WCAG AA 4.5:1 on the page ground. ink-4 is capped at decoration. Filled spice controls carry near-black text at 6.34:1.

Targets

Mobile and marketing controls are 48–52 px. In-app controls are 24–44 px, at or above the 24 px WCAG 2.2 AA minimum; list rows are 60 px.

Not colour alone

Status pairs colour with a word. Detected tags pair cyan with a square mark. Selected facets add a border, not just a tint.

Motion

120 ms linear on hover and selection only. No easing curves, no entrance animation. Waveform playhead is the one moving element.