Listen & capture
Recording, playback and sound controls.
DESIGN SYSTEM · v2.3 · 2026
One system. Two products.
Transkryptomat and TranscriptMate share one token set, one component library and one set of interaction rules. Only the wordmark, the locale and the plan differ.
PL · 17 zł / plik
19 języków
EN · $15 / mo
20+ languages
WHAT DEFINES THE LOOK
Six rules that decide every screen.
These are the reasons the system looks the way it does. If a new screen breaks one of them, the screen is wrong — not the rule.
The waveform is the identity
Both marks are bar waveforms. The same bar rhythm carries the player, the progress states and the section rhythm — it is the only decorative motif in the system.
Ink is a surface
The workspace, the press band and quote blocks sit on ink. One class, .on-ink, re-maps every nested component instead of hand-styling each one.
Numerals are ink, not accent
Prices, durations, timecodes and statistics are ink or mono. Electric blue is reserved for actions; it is not spent on data — it belongs to the action and the focus ring.
One accent per decision cluster
Any adjacent group of buttons contains at most one solid button. Everything else is secondary, ghost or a text link, and no two buttons repeat the same words.
Hover moves the surface
Hover, focus and active states change background, border or position. Foreground contrast never drops below the resting state — disabled is the only exception.
Bilingual by construction
PL and EN pages share one skeleton, one token set and one component library. Only the wordmark, the locale, the currency and the default plan change.
TOKENS · COLOUR
Seven literals. Everything else is derived.
The palette is closed. Every other tone in the product is a color-mix() of these seven, computed with OKLch or sRGB, so the two sites cannot drift apart.
--bg · cool white
--surface · pearl
--fg · ink blue
--muted · slate mist
--border · cool line
--accent · electric blue
--signature · violet
Palette contrast
| Pairing | Ratio | Verdict |
|---|---|---|
| ink on cool white | 17.12:1 | Body and display text |
| slate mist on cool white | 5.65:1 | Secondary text and labels |
| electric blue on white | 5.53:1 | Brand accent; primary controls use the darker derived tone |
| violet on white | 6.13:1 | Signature text; solid violet badges use white labels |
| light violet on ink | 7.20:1 | Dark-panel signature, waveform and focus ring |
| white on violet | 6.13:1 | Signature badge labels |
Derived tones
--accent-ink
A darker electric blue for text, primary buttons and focus rings.
color-mix(in oklch, accent 85%, fg)A darker electric blue for text, primary buttons and focus rings.
--accent-hover
Hover darkens the fill to increase contrast with its white label.
color-mix(in oklch, accent 70%, fg)Hover darkens the fill to increase contrast with its white label.
--accent-soft
Selected rows, chips, focus halos.
color-mix(in oklch, accent 12%, surface)Selected rows, chips, focus halos.
--alert-ink
There is no red in the palette. Errors and warnings are derived from the violet signature.
color-mix(in oklch, signature 60%, fg)There is no red in the palette. Errors and warnings are derived from the violet signature.
DARK SURFACES
Ink panels re-map themselves
Wrap any section in .on-ink and backgrounds, borders, muted text, chips and the waveform invert together. The signature becomes light violet on ink; badge labels switch to ink for contrast.
selected
Unlimited
signature = playhead
TOKENS · TYPOGRAPHY
Three stacks, one voice.
Söhne carries the display voice, the system sans carries the interface, and mono carries every number a user might compare.
DisplayZamień nagranie w tekst
Söhne · Avenir Next · system-ui. Headlines, prices, statistics — always negative tracking, never below 600 weight.
Söhne · Avenir Next · system-ui. Headlines, prices, statistics — always negative tracking, never below 600 weight.
Body / UIAutomatyczna transkrypcja z diaryzacją mówców i streszczeniem. ą ć ę ł ń ó ś ź ż
system sans. Full Polish diacritics, 1.55 line height for reading, 1.3 for UI labels.
system sans. Full Polish diacritics, 1.55 line height for reading, 1.3 for UI labels.
Mono00:14 · 42:18 · 246 zł · 17,00 zł · 730 h · SRT
ui-monospace. Timecodes, durations, prices, file formats, eyebrows. Always tabular.
ui-monospace. Timecodes, durations, prices, file formats, eyebrows. Always tabular.
| Role | Size | Weight / tracking | Use |
|---|---|---|---|
| Display 1 | clamp(40 → 66px) | 600 · −0.025em | One per page — the thesis sentence |
| Display 2 | clamp(30 → 44px) | 600 · −0.02em | Section headings |
| Display 3 | clamp(22 → 28px) | 600 · −0.015em | Panel headings, quote text |
| Lead | 19px | 400 · normal | Max 58 characters, two sentences |
| Body | 16px | 400 · normal | Paragraphs, form labels |
| Small | 14px | 400 · normal | Card copy, lists, footnotes |
| Meta / mono | 13px | 400 · 0.04em | Timecodes, captions, metadata |
| Eyebrow | 12px | 400 · 0.1em uppercase | The single accent text on a screen |
TOKENS · SPACE & STRUCTURE
Borders build the page, not shadows.
An 8px baseline with a 4px step inside dense toolbars. Shadow is spent only on layers that actually float above the page.
Scale
4812162432486496
Sections breathe at 56–96px; cards pad at 28px; dense toolbars step by 4px.
Radii & elevation
8 · dense
10 · controls
16 · cards
24 · panels
pill · actions
Every button is a pill; every input is 10px. Shadow appears only under dialogs, toasts and popovers.
COMPONENTS
Every state is designed, not defaulted.
Resting, hover, focus, active, selected and disabled are specified as foreground/background pairs. This section is live — click the controls.
Buttons
Primary · resting
Hover · same label contrast, darker fill
Secondary · resting
Hover · border and fill move, text does not
Focus · 2px accent ring
Disabled · the only state that lowers contrast
Rule: one solid button per adjacent group. A page may repeat the primary exactly once, at the closing CTA.
Fields & validation
Na ten adres wyślemy pliki z transkrypcją.
Podaj poprawny adres e-mail, żebyśmy mogli wysłać transkrypcję.
Status, chips & badges
W kolejce
Przetwarzanie
Gotowe
Błąd
Transkrypcja
SRT
Unlimited
Mówca 1
Mówca 2
Mówca 3
Speaker chips are the only place where three tints appear together — they encode identity, not hierarchy.
Tabs & segmented control
Tabs · active state carries the accent underline
Transkrypcja z podziałem na mówców, timecode przy każdej linii i eksport w pięciu formatach.
Streszczenie 1–2 strony: kontekst, wnioski, decyzje i rekomendacje.
Rozdziały generowane z nagrania, gotowe do wklejenia w opisie odcinka.
Segmented control · billing period
THE SIGNATURE COMPONENT
Player, waveform and transcript
Click a line to seek. The played portion of the waveform and the playhead use the light-violet signature; the active transcript line uses the accent.
00:00 / 00:44
00:00
Mówca 1
Zacznijmy od najważniejszego — jak wyglądał pierwszy rok pracy nad produktem?
00:12
Mówca 2
Pierwszy rok to przede wszystkim rozmowy z użytkownikami. Zbieraliśmy nagrania i szukaliśmy powtarzalnych problemów.
00:31
Mówca 1
I co się wtedy okazało?
00:36
Mówca 2
Że większość czasu zajmuje nie samo nagranie, a porządkowanie notatek po nim.
Comparison table
| Plan | Jednorazowo | Unlimited |
|---|---|---|
| Transkrypcja | 17 zł / plik | bez limitów |
| Diaryzacja mówców | +5 zł | w cenie |
| Treści AI | +5 zł / szablon | w cenie |
| Formaty | 5 | 5 |
Floating layers
Dialogs and toasts carry the only shadow in the system. Both are keyboard reachable, both dismiss on Esc.
LIBRARY / 01 · ICONOGRAPHY
Small marks. Clear meaning.
A 24px grid, a 1.75px stroke, rounded ends. One outlined family for files, voices and the actions between them.
24 of 24 icons
LIBRARY / 02 · ICON SETS & VARIANTS
A system of useful signs.
The same outlined family, grouped by the jobs it does. Every specimen reuses the editable symbols in the icon library above.
Find & organise
Places, files and navigation through a library.
Edit & share
Small actions around a working transcript.
Size variants
Keep the 24px drawing grid and stroke consistent; change the rendered size for context.
Colour variants
Use ink by default. Reserve electric blue for a selected action or active state.
LIBRARY / 03 · GRAPHIC LANGUAGE
A signal, with purpose.
Three treatments of the same idea: sound becomes something you can return to. Decorative specimens, not measured audio.
Sound / Identity
For a hero or brand moment. Keep its proportions and give the playhead room.
Download SVGSound / Transformation
An explanatory motif for upload and export journeys. Keep the reading direction clear.
Sound / Conversation
01
02
Use separate lanes to explain speaker turns. Numbers distinguish voices as well as color.
LIBRARY / 04 · PRODUCT COMPONENTS
Designed for the actual work.
Try the states below. These local specimens use example content; they do not upload audio, run transcription or change an account.
A wait you can understand.
conversation-sample.mp3Example file · Local demonstration
Ready0%
Start the sample to see progress and cancellation.
Keep the file name, state and progress together. Cancellation leaves a clear way to restart.
Put a name to a voice.
01
Speaker 01
Every conversation starts with listening.
A stable number anchors the speaker. Editing the label also updates the export sample.
The right format, ready.
Downloads a real file containing two example transcript lines. SRT always retains timing.
Small choices. Clear effects.
Speaker 01
Keep the thought. Come back to the words.
Change a preference to update this preview.
Labels describe the effect. Helper text stays visible before and after selection.
A useful place to begin.
No recordings yet
Your conversations will live here. Add an example to see how a file appears.
conversation-sample.mp3Example recording · Ready
Explain what belongs here, then give one next step. Reset affects only this example.
Details, when you need them.
00:00Start with listening
The opening thought introduces the conversation and makes room for the first speaker.
00:08Keep the thought
A short reflection on keeping the ideas you want to return to. Example chapter content.
00:16Take the next step
Choose an export format or edit the speaker label. The original recording remains the reference.
Native disclosures work with a keyboard. Keep the timestamp attached to its chapter title.
PATTERNS
Both sites run the same skeleton.
Consistency here is structural, not cosmetic: the same twelve blocks in the same order, filled with market-specific copy.
Navigation
Lockup, four product links, log-in, one primary action.
Hero + conversion card
Thesis sentence on the left, the working form or order panel on the right. Never a decorative image here — the product is the visual.
Trust band
Real marks only: press logos on ink for PL, client logos for EN.
How it works
Three steps for the pay-as-you-go market, four for the self-serve market.
Before / after
Two columns: the manual cost of the old workflow against the automated result.
Workspace preview on ink
Working player, waveform and transcript — the single demonstration of the product.
Feature set
Three capability cells, then three workflow cells. Bullets over paragraphs.
Metrics
Three published figures, ink numerals, one footnote line.
Pricing
Three plans for PL, two for EN. Exactly one solid button in the group.
Testimonials
The same four people on both sites, with their real portraits and localised quotes.
Security
Six identically named blocks: encryption, access, retention, hosting, GDPR, anonymisation.
Closing CTA + footer
One repeated primary, then a four-column footer.
Accent budget on a landing page
- Hero eyebrow — the only accent text above the fold.
- Hero primary action — the conversion path.
- Closing CTA — the sanctioned repeat.
Everything else — links, icons, numerals, prices — is ink or muted.
Micro-interactions
Play/pause swaps the glyph and advances the timecode. Transcript lines seek on click. Speaker rename propagates globally. Export reveals subtitle controls only for SRT and VTT. Motion is limited to an 8px fade-up and honours prefers-reduced-motion.
VOICE & TERMINOLOGY
One tone, two languages.
Calm, concrete, never hyped. Claims are tied to a number or an artefact; nothing is promised that the product cannot demonstrate today.
Do
- Lead with the outcome: hours saved, files delivered, formats exported.
- Name the artefact — streszczenie, rozdziały, napisy SRT.
- Say what happens next: “Pliki trafią na Twój e-mail”.
- Keep one idea per sentence; keep headings under fourteen words.
Don't
- No “revolutionary”, “game-changing”, “supercharge”.
- No promise of perfection: accuracy is stated with its measured figure (98%) and its context.
- No fear-based or deterministic claims about the user's data.
- No emoji as icons, no exclamation marks in headings.
| Concept | Transkryptomat (PL) | TranscriptMate (EN) |
|---|---|---|
| Product | Transkryptomat | TranscriptMate |
| Core service | transkrypcja audio i wideo | audio and video transcription |
| Speaker labels | diaryzacja, identyfikacja rozmówców | speaker diarization, speaker labels |
| Speaker | mówca | speaker |
| Summary | streszczenie | summary |
| Chapters | rozdziały | chapters |
| Generated assets | treści AI, szablony | AI content, templates |
| Pay-as-you-go | jednorazowo, 17 zł za plik | pay as you go |
| Subscription | plan Unlimited, 246 zł / mies. | Unlimited plan, $15 / mo annually |
| Invoice | faktura VAT | VAT invoice, B2B ready |
| Trial | wypróbuj bez ryzyka, zwrot pieniędzy | 15 minutes free, no account required |
| Subtitles | napisy SRT | SRT and VTT subtitles |
| Privacy posture | RODO, hosting w UE | GDPR compliant, EU hosting |
LOGOS & IMAGERY
Real marks, unmodified.
Both logotypes, every client mark and every testimonial portrait is the supplied or published file. Nothing is redrawn, recoloured or replaced with a look-alike.
Mark + live wordmark · UI chrome
Transkryptomat
TranscriptMate
Full lockup · footer and end cards
Transkryptomat
TranscriptMate
Logo walls · light surface
Logo walls · ink surface
Marks keep their own colours, size and clear space. Match each file to the surface it was drawn for — the light and dark variants are the same artwork, never a filter.
Portraits
Testimonial portraits are the published photographs of the four people named by both sites. Corrected attribution, real faces, 1:1 crop at 160×160, always paired with name and role.
OPEN ITEMS
What the two live sites currently disagree on.
These are content decisions, not design decisions. The redesign makes them visible; only the product owner can settle them.
Trust metrics contradict each other
transkryptomat.pl publishes 100 000+ minut and 2 000+ klientów; transcriptmate.com publishes 1,000,000+ minutes and 5,000+ clients. Both pages here keep their own published figure — pick one set.
English testimonials name the Polish brand
Two quotes published on transcriptmate.com say “Transkryptomat”. In this prototype they read “TranscriptMate”; the clients should approve the change.
One attribution, two different roles
Kasia Krogulec is “Redaktor prowadząca, MamStartup” on the Polish site and “Business editor, My Company Poland” in English.
The language lists differ
PL lists 19 languages including Serbian and Romanian; EN lists 18 including Bashkir. One canonical list, one order, both sites.
Different commercial models per market
PL leads with 17 zł per file and offers a Custom tier; EN has no pay-as-you-go and no API tier. Decide whether PL keeps Custom and whether EN advertises the free 15 minutes as a plan.
No error colour in the palette
Validation and failed-job states are derived from the violet signature. If a true red is required, it must be added as an eighth token — a deliberate palette decision, not a stray hex.
Placeholder copy in product samples
Sample transcripts and AI output on these pages are demonstration content and are labelled as such. Replace them with a real, consented recording before launch.
Year and contact addresses
Footers carry © 2026 and the addresses k[email protected] / [email protected]. Confirm both before publishing.
See the system doing real work.
The workspace prototype runs the shared components with live playback, speaker renaming and export.
Open the workspace