One bench, hundreds of tools.
The shared foundation for every Cutting Tape product, modelled on the flatbed editing bench: machine-grey panels, indicator LEDs, tape labels, and buttons that press. Each tool swaps one accent and its copy. Everything below is shared inventory.
Wordmark — the splice
The tape label, cut once. Two pieces, a 3px gap, the right piece dropped 1px: a strip that has been spliced. Same ink tape as every other label on the bench, so it needs no icon and no colour. The gap is the brand.
primary · on machine grey
Minimum size 11px type. Gap scales: 3px at header size, 5px at display size.
header lockup · tool name follows
Platform pages run the tagline instead: "tools for audio · video · images".
inverse · on footer black
Light tape on dark surfaces. Never colour the tape with a product accent.
mark · favicon & app icon
The two-piece strip with no letters. 16px, 32px, and app-icon tile. Animates on load: halves snap together.
Colour tokens
Three greys do the layout work. Ink is text, never decoration. Colour is reserved for LEDs, one accent per tool, and the LCD readouts.
Surfaces
surface-machine#D6D8D3 · dark #1B1C1A · header, footer, wells
surface-band#EEEFEB · dark #232522 · main band, button face
surface-card#F7F7F4 · dark #2B2D2A · cards, inputs
surface-unselected#E6E7E3 · dark #262825 · idle option cards
line#B9BCB5 · dark #3F423E · hairlines, bevels
surface-footer#171816 · dark #101110 · big footer only
Ink
ink#1E201D · dark #ECEEE9 · text, Dymo tape
ink-secondary#4F534E · dark #B7BBB4 · body copy
ink-dim#6E726C · dark #8E928B · labels, meta
waveform#8B8F89 · dark #6E726C · unplayed bars
led-off#C4C7C1 · dark #4A4D48
lcd readout#1E201D on · #DCE6D9 text · #8FA58F label
Status LEDs (shared)
Product accent — Cleanup My Podcast
accent#3F7D5A · primary button, LED, lit waveform
accent-hover#478C65
accent-deep#2F5F44 · dark #2A5A3F · bevel under accent buttons
accent-tint#DDE4DC · dark #1F2A22 · hover on dropzone only
Typography
One family, Karla, in four roles. There is no monospace: technical values sit in LCD readouts or on tape labels, where the setting itself says "machine".
display · Karla 700 · 40–60px · tracking −.03em · line-height 1.02
Make it sound finished.
heading · Karla 700 · 18–30px · tracking −.02em
Choose your cleanup
body · Karla 400 · 15–17px · ink-secondary · line-height 1.5 · max 62ch
Normalize the episode to a consistent listening level, so quiet speakers and loud moments land the same. Preview the result before downloading.
label · Karla 700 · 10–11px · uppercase · tracking .14–.16em
technical · Karla 600 · tabular numerals · letter-spacing .04em · always in a readout
Shape, depth & hardware
bevel
Anything pressable sits 2–3px proud: box-shadow: 0 2px 0 line. On :active the shadow drops and the button moves down the same distance.
inset well
Anything that holds media or a value is recessed: machine grey plus inset 0 1px 3px. Deep wells (waveforms) go near-black.
radius
4px cards & buttons, 3px readouts, 2px tape. Circles only for LEDs, the play button, and the rocker knob. Nothing pill-shaped.
hardware
LED: 10px, 2px white ring, 1px line ring. Tape label: ink, uppercase, rotated −1°. Readout: ink face, phosphor text. One tape label per panel, max.
Forms
Inputs are shallow wells; focus lifts the border to green. Errors switch the LED red rather than tinting the field.
text inputs
textarea · select · search
checkboxes · radios · rockers
slider · segmented · stepper
Segmented control
Stepper
Tables, readouts & data
Processing history
| Episode | Duration | Preset | Status | Result |
|---|---|---|---|---|
| interview-ep-42.mp3 job_8Kf2mQ · Aug 18 | 42:17 | Balanced | Done | |
| solo-rant-ep-41.wav job_3Xw9pL · Aug 15 | 1:12:03 | Strong | Running | stage 2/4 |
| panel-recording.mp4 job_9Qa2vR · Aug 14 | 28:44 | Gentle | Stopped |
definition list — file metadata
- File
- interview-ep-42.mp3
- Duration
- 42:17
- Size
- 58.3 MB
- Format
- MP3 · 128 kbps · stereo
- Loudness
- −23.4 LUFSquiet
readout blocks
code block
curl -X POST api.cuttingtape.com/v1/jobs \ -F file=@episode.mp3 \ -F preset=balanced
Media & files
Every product ingests a file and previews a result. Dropzones, file cards, and media wells are shared inventory — the same shapes with audio, video, and image variants.
dropzone — idle · drag-over · rejected
Release to load
interview-ep-42.mp3 · 58.3 MB
That file won't work here
.zip isn't supported — this tool takes mp3, wav, m4a, mp4
file cards — audio · video · image
interview-ep-42.mp3
panel-recording.mp4
product-shot.png
Same card, swappable thumb well: waveform for audio, sprocketed frame for video, checkerboard for transparency.
media wells
Audio well — deep, lit when cleaned
Video well
Image well
format chips & action menu
Accepted inputs
Output format
Row action menu
upload queue — multi-file
Queue rows reuse the file-card shape and the LED set. Batch processing itself is still planned — this is the ready pattern for it.
compare — momentary
Compare well
Compare is press-and-hold; releasing returns to the cleaned view.
Feedback & status
alerts & callouts
toast
progress & loading
skeleton
empty state
No episodes yet
Clean your first episode and it will show up here.
tooltip & popover
What is LUFS?
A measure of perceived loudness over time — the standard podcasts are normalized to.
Learn moredialog
Delete all files?
The original upload and the cleaned output will be permanently deleted. Downloads you already saved are unaffected.
Product-accent stress test
The same panel under three tool accents. Only the accent (and its deep bevel shade) changes — greys, ink, LEDs, type and shape are shared. New tools don't fork the bench.
accent: bench green
Cleanup My Podcast
accent: signal blue
Extract Audio
accent: marker amber (hypothetical)
Caption My Clip