# Making Reedapt feel like one product What we chose to keep familiar, from the first page to a crowded editing timeline. By Ibiang Emmanuel ยท Published 2026-11-08 Source: https://reedapt.com/blog/making-reedapt-feel-like-one-product There is a point where a product starts asking you to learn the same thing twice. You know what a selected control looks like on one page. On the next, the same colour means something else. A dialog opens one way in the editor and another way in Live. You switch to dark mode, move to a different part of the product, and find yourself back in light. Each screen can look reasonable on its own. The disagreement only becomes obvious when you move between them. That is the problem we wanted our design system to address. Reedapt has a public site, a dubbing workspace and a live viewing experience. We needed them to belong together without making them do the same job. ## We chose a starting point We chose a Geist-based foundation rather than giving each part of Reedapt its own visual direction. The decision gave us a concrete reference for typography, surfaces and controls. It also gave us somewhere to return when a new screen started to drift. But choosing a reference doesn't make the product designed. We still had to decide what deserved emphasis, what a colour meant, and which behaviours should follow you from one place to another. An editor needs room for a transcript, a timeline and the picture being edited. A live viewer needs room for the broadcast. A public page needs to introduce a subject before it asks you to do anything. Their layouts should respond to those jobs. The familiar part sits underneath: the character of the text, the relationship between surfaces, the weight of a boundary, the way a control announces that it is selected. ## A colour needs a job Our shared palette has names for roles: ground, surface, raised surface, ink, muted text and hairline. Those names are more useful than a collection of greys. The editor calls its panel background `--editor-surface`. That points to `--rd-surface`, the shared role. Live and the public site have their own local names for the same foundation. A panel doesn't need to know which hex value currently makes it a panel. This matters when the theme changes. In light mode, a surface can be white with almost-black text. In dark mode, both need to move. Changing the background and leaving the text alone isn't a theme; it's a legibility problem. **Same roles, different theme** *Illustrative workspace using a snapshot of Reedapt's theme tokens. Changing this theme affects only the specimen, not your site preference or production settings.* Synthetic English speech and a generated four-note music pattern. Compare aligned reference audio with adjustable voice delay, rate drift, music level and energy-based ducking. Resampling also changes pitch. Transcript: A small delay can change how a conversation feels. Keep the voice clear, and let the music sit behind it. This is not Reedapt output. [Interactive example](https://reedapt.com/blog/making-reedapt-feel-like-one-product) The specimen uses the palette values from our actual token files. The small workspace is illustrative, not a screenshot of a shipped screen. Switching themes lets you inspect how the roles change together. Colour also carries meaning beyond a theme. In the editor, blue marks things such as selection, focus and the playhead. It doesn't fill every button. A warning has its own status treatment, including a text colour intended for its soft background. The wordmark's blue is a separate identity decision. Sharing a colour family doesn't make a logo, a selected line and a confirming action interchangeable. There is another useful way to see that foundation: make one change and follow where it goes. **One decision, three places** *Three simplified layouts, not shipped screens. Aliases are re-declared locally. Sample colours are not redesign proposals or a contrast guarantee; dark text is deliberately unchanged.* Synthetic English speech and a generated four-note music pattern. Compare aligned reference audio with adjustable voice delay, rate drift, music level and energy-based ducking. Resampling also changes pitch. Transcript: A small delay can change how a conversation feels. Keep the voice clear, and let the music sit behind it. This is not Reedapt output. [Interactive example](https://reedapt.com/blog/making-reedapt-feel-like-one-product) These three simplified layouts share one surface value through different local names. Changing it moves all three backgrounds, while their arrangements stay different. The example re-declares those aliases in its own scope so the change remains inside the illustration. The sample colours aren't proposals for a redesign. A shared token makes a change easier to carry through; it doesn't make the change a good one. If you choose a dark surface here, the unchanged dark text is a useful reminder that surfaces and text need to be considered together. ## Not everything can be the main action The editor has plenty of things you can do. That doesn't mean every action should arrive at the same visual volume. Our working rule is one solid primary action per screen. In a light editor, Export gets that solid-ink treatment. Secondary actions can use a boundary or sit quietly against the surface. In dark mode, ink changes with the theme, so this is a hierarchy rule rather than an instruction to keep a black button on a dark background. The comparison below keeps the words and arrangement the same. Only their emphasis changes. Neither side is a historical before-and-after, and it isn't a measured usability test. **Keep the task. Change the emphasis.** *Constructed emphasis comparison, not a historical before-and-after or measured usability test. Sample product commands are inactive; line and state controls operate the illustration.* Synthetic English speech and a generated four-note music pattern. Compare aligned reference audio with adjustable voice delay, rate drift, music level and energy-based ducking. Resampling also changes pitch. Transcript: A small delay can change how a conversation feels. Keep the voice clear, and let the music sit behind it. This is not Reedapt output. [Interactive example](https://reedapt.com/blog/making-reedapt-feel-like-one-product) Giving everything equal weight doesn't remove the need to choose. It leaves the reader to establish the hierarchy themselves. That doesn't mean a screen must be colourless. A selected line should be recognisable. An issue that needs attention should be distinguishable from a completed task. We want that emphasis to follow the state of the work, not whichever component happened to be built most recently. ## The type system doesn't end at English Geist is the main interface face. Geist Mono has a place for figures and technical labels, where the shape and alignment of numbers matter. The wordmark has its own type treatment; it isn't a template for every heading. But one Latin typeface can't carry every language in Reedapt. The font configuration includes script-specific support. Arabic leads with IBM Plex Sans Arabic; other scripts have their own configured faces. Those choices belong to the typography system, not a list of exceptions added after the design is finished. A font is only part of the problem. A translated label can need more room. Reading direction can change. A filename still needs to remain legible inside a right-to-left layout. **A label still needs room** *Existing message-file labels and production font roles. Not a translation certification or shipped form. Sample product commands are inactive; requested width is capped by the reading column.* Synthetic English speech and a generated four-note music pattern. Compare aligned reference audio with adjustable voice delay, rate drift, music level and energy-based ducking. Resampling also changes pitch. Transcript: A small delay can change how a conversation feels. Keep the voice clear, and let the music sit behind it. This is not Reedapt output. [Interactive example](https://reedapt.com/blog/making-reedapt-feel-like-one-product) These are existing labels from our English, German, Arabic and Urdu message files. The specimen uses the corresponding font assets from the local production build. It doesn't certify those translations or replace review by people who read the languages. The width control is deliberately ordinary. It makes a constraint visible: text has to share space with other text and controls. A shorter English label fitting neatly isn't evidence that the component is finished. ## Familiar doesn't mean fixed in place We also had to decide what should happen when there isn't enough space for a desktop arrangement. Our shared modal component has a desktop dialog and a phone drawer. The caller describes the task and its actions; the component chooses the presentation. On a phone, the actions stack and the content can scroll inside the available space. That is a design-system decision as much as the colour of a border. It puts the responsibility for the arrangement in one place instead of asking every feature to invent its own answer. **The task stays. The arrangement changes.** *Layout specimen only, not the production modal, a device emulator or a software keyboard simulation. No focus, swipe or screen-reader conformance claim. Sample commands are inactive.* Synthetic English speech and a generated four-note music pattern. Compare aligned reference audio with adjustable voice delay, rate drift, music level and energy-based ducking. Resampling also changes pitch. Transcript: A small delay can change how a conversation feels. Keep the voice clear, and let the music sit behind it. This is not Reedapt output. [Interactive example](https://reedapt.com/blog/making-reedapt-feel-like-one-product) This is a layout specimen, not the actual modal component or a phone emulator. Changing its available height shows the relationship between the heading, scrolling body and actions. It doesn't simulate a software keyboard or prove focus, swipe or screen-reader behaviour. Those behaviours still need checking in the real component. Matching corners isn't enough to establish that two dialogs work the same way. ## Keeping the agreement The useful part of a system is what happens after the first set of screens. We keep the palette in a shared place, give product surfaces meaningful aliases, and centralise the font configuration. Editor and dashboard lint rules reject raw colour utilities that would bypass that foundation. Dialogs have a shared implementation rather than a new overlay for every feature. There are deliberate boundaries too. The public site has a more open, editorial arrangement; the editor has denser working surfaces. The current theme provider holds the CMS studio and embeds in light mode. Sharing a foundation doesn't require pretending those differences have disappeared. None of this proves every older surface is consistent. A token file can't tell us whether a label is clipped or an important action is hard to find. We still have to look at the screens, use them, and correct what doesn't hold up. What changes is where a correction can live. If the same decision belongs to several places, we have a way to make it once and carry it through. That is what we want someone to feel when they move through Reedapt: the work changes, but the product hasn't started over.