Diletta design systemDesign system · mobile and web9 min read

A new brand in 3 days, without touching a component.

Two live apps and a web dashboard, each with its own brand, on one design system, and a written way to change that system

Client: Diletta Solutions
Period: 2021 to now
Role: System architecture and code
Scope: 2 live apps · web · 51 pieces

System in production. Product Designer at Diletta Solutions, a software company in Campinas, Brazil, from November 2021 to today, Senior since 2025.

Two products, one design systemOn the outside, the same product in light and dark mode. In the middle, another product under its own brand. The components are the same on all three screens. What changes is the list of colors each one declares.

2: live products with different brands on the same design system.A third is being built.
55: colors are all a new product declares to get its own brand.No component changes.
2: platforms on one source: mobile in Flutter and web in web components, with 51 pieces.
3 days: for Conta Bold to get its own brand on the system, in July 2026.It used to take about six weeks.

00 File


Product	The design system behind Diletta's apps
Products on it	CPF Seguro, which protects a person against fraud in their name and was the system's base, and Conta Bold, a digital bank · both live · and, since October, the Flash Enterprise web dashboard
Role	Product Designer, Senior since 2025 · Diletta Solutions · in Figma, the components were split among the designers; the idea, the architecture and the execution of the system were mine
Platform	Flutter, iOS and Android · web, as web components
Tools	Figma, Flutter, web components, Git, Python, Claude Code
Scope	everything beyond my share of the Figma components: specs and contracts, colors, code package, versions, catalog, checks and governance
State on 23 Sep 2026	version 1.0.2, with 302 published versions
Period	November 2021 to today

01 Summary

Problem. Apps with different brands, two live and a third on the way, and a small team. The usual path is to copy the component library into each one, and then a fix in one copy never reaches the others.

Role and team. In Figma, the components were split among the designers; the idea, the architecture and the execution of the system were mine. That covers contracts, colors, code package, versions, catalog, checks and governance. Each app has its own engineering team, which decides when to adopt a new version.

The decision. Take color out of the component. The brand became a list of 55 colors the product declares, and the component only knows its purpose: background, text, error.

Result. When Conta Bold joined the system, in July 2026, it took 3 days from the palette survey to the first build. On the old path, copying the library, my estimate was six weeks. In July one app was 176 versions behind. Today CPF Seguro is on the current version and Conta Bold is 5 behind.

Status. Live in both apps, version 1.0.2 on 23 Sep 2026. Since October it also runs on the web, in the Flash Enterprise dashboard.

02 Context

Diletta sells software to other businesses and runs its own products, with different names, brands and audiences, served by the same design and front-end team. The question was how to make each one look like its own company without keeping one library per product. The system was born from CPF Seguro. Conta Bold joined in July 2026 as the second product, and ciX, a government product and the third in line, is in progress.

The whole system, in blocks1760×1604The system on one page: the design system on top, the catalog and Figma in the middle, the products at the bottom, two live and ciX in progress. The versions in the figure are the ones from September 8, 2026.

03 Constraint

Small team. There weren't enough people to maintain one system per product, and no way to stop the products to rebuild the base.

The app decides when it updates. The system arrives as a versioned dependency. If upgrading breaks a screen, nobody upgrades. The consumer holds a veto, and I think that's healthy.

Real brands. Each product needs its own identity, and shifting the hue of the same blue doesn't cut it.

I ask and I judge. I own the system and I design inside one of the products that use it. Several decisions below move that judgment out of my memory and into a file.

04 The problem in numbers

Before, nobody could say whether a component was done. Done in code wasn't done in Figma, and neither matched the documentation.

The audit I ran in July measured the cost of that in one product: 176 versions published since the last one that app had adopted, with not one line written about what changed. Nobody updates a dependency without knowing what's inside. The system had stopped reaching the products because the record was missing.

05 What existed before

In 2022 I solved the same problem by hand in Diletta Pay, the white-label platform Diletta sells to banks: twelve palettes, which are twelve possible brand colors in an application example, and twenty-four screens drawn one by one.

The usual way to handle brand is theming: the component knows the colors and the values swap through configuration. It works while the brands look alike. Once they drift apart, someone copies the component to change it, and the copy never comes back. So I changed the question to "how do I make the component never need to know the color".

06 Decisions

D1 · The brand is a list of colors, and that's all

The product declares 55 required colors and 7 optional ones. From them the system derives 59 purpose colors, in both modes: background, text, error, success, raised surface. No component knows a specific color, only what it is for.

Why: while the color lives in the component, every new brand touches the component. With the color outside, a new brand means filling in a form.

Measured: between one product and another, those 55 colors change. No change in components or in tests.

Conta Bold, light mode — The same Conta Bold screen in both modes. Each purpose color has one value per mode, so dark mode shipped without a single new line of component code.

Conta Bold, dark mode — The same Conta Bold screen in both modes. Each purpose color has one value per mode, so dark mode shipped without a single new line of component code.

The color page, the top1800×984The top of the color page, generated from code. Above, the same surface in light and in dark. Below, the first five roles, each with its value in both modes and the measured contrast. This list is what a new product fills in.

The brand is a list of colors, and nothing else movesEvery switch of client or mode recolors the screen, and not one component is rewritten. Recorded with the real components of the system's web version.

D2 · Three layers, and each one declares only what is its own

Two layers were enough for two products: the design system on top, the product below. The third appeared when Conta Bold became the base of a family of products. The neutral base and Conta Bold's identity lived in the same package, so every new product in the family was born looking like Conta Bold.

The middle layer declares structure and composition. It never declares a value only the brand decides, such as a color, a text size, an image or a font. The first check I wrote for this rule searched the code for the brand's name and came back at zero, with thirteen Conta Bold text sizes sitting inside the base. A text size is a number and carries no name. Now the check looks for both.

What I gave up: a simpler design. Two layers were easier to explain, and the third exists because the business asked for it.

The three tiers, and who declares what1760×1663The three layers, with what each one declares and what it never declares. That split is what makes a new product cost three days instead of six weeks.

D3 · What the product forgets to declare, a report shows

If a product doesn't declare a color, it inherits the system's. The screen ends up wrong and nobody notices. So a report lists, per product, what was declared and what was inherited without being declared.

Why: the model is only safe if the omission shows up before someone opens the wrong screen.

D4 · Open components instead of configuration options

When a product needs a component the system doesn't have, it builds it from the system's parts, which are public. A surface splits into top, content and base, and each part can be used alone.

Why: hidden configuration is a contract nobody reads.

What I gave up: control over each product's final result. In return, nobody copies the system to change it anymore.

D5 · Done is measured in six places

A component is only done when it matches in six places: the written specification, the code, the catalog the team uses, the Figma file, the color it actually shows in each mode, and the comparison with the product's own drawing. The check returns a number.

Measured: CPF Seguro uses 85 components from the system, and all 85 pass. Of those, 38 were compared against the product's drawing. For the other 47 one of the places doesn't apply, with the reason written down.

The specification at the center1800×1666The specification is the only place written by hand, and the other five are measured against it. At the bottom is the state in CPF Seguro. I keep the 38 compared against a drawing apart from the 47 where a place doesn't apply, because adding them together gives a green that proves nothing.

D6 · A product's request becomes a file with a written answer

When a product needs something the system doesn't have, it writes a request in a fixed format. The request goes into a register with the answer, the reason and the version it shipped in. It holds 196 lines today.

A variant only moves into the system on the second request. Two teams asking for the same thing means the system is missing something. One team asking means that team's product is missing something.

Why: without a record of the first request, the second-request rule never fires.

What I gave up: speed. Writing the answer takes longer than replying in chat.

Two lines of the request register1800×1468Two lines of the register, with the usual columns. In the top one, a product proves I had announced a validation that did not exist. In the bottom one, the first request for an account switcher is logged and waits for a second.

D7 · The same change works on any platform

Diletta also has an operations panel and an internet banking site, both on the web. A change to a system component has to be adoptable in any product, on any platform, the same way.

Measured: the 93 base colors already ship to web as 162 CSS variables. The 59 purpose colors still only exist in Flutter, and that gap is written into the decision.

How I sized the step: I counted the operations panel before proposing a timeline. There are 3,746 components in Figma, 2,689 visible, counted by component identifier. By layer name the number inflated by almost 30%.

D8 · The machine gathers and measures, and I decide

In August someone suggested splitting the checks across AI agents to go faster. I timed it first: the fourteen checks that block a release take 15.2 seconds. The time was in the judgment, and every divergence I read changes the question for the next one.

I split by the right to write. One agent gathers facts and concludes nothing. Another measures, and only goes into use after it turns red in front of a planted defect. Publishing, bumping a version and adopting it in the app are still a person's call.

What I gave up: the promised speed. The full check still takes five minutes, and I wrote that in the document.

Measured: in four days, 11 of 88 code deliveries (12.5%) were fixing a wrong measurement of mine. I caught none of them by re-reading.

What each one has the right to write1800×1737Who can write what. The four actions with no undo sit at the bottom, and none of them is automatic.

07 Craft

The catalog · the values tab1800×1369The catalog the team uses, running in the browser. Every purpose color shows in both modes, with its measured contrast and where the value comes from.

loading the system's own pieces…

Screen

Brand color

Mode

what the brand declared

--cps-primary: #003BE0
data-theme:    light
tela:          app

Declaration, liveTwo real screens, rebuilt from the Figma measurements with the components of the system's web version, at version 0.180.0. Switching the brand color changes the primary and the eight colors derived from it. The illustration does not follow, because brand artwork belongs to the product.

Button · type by state1800×1312Three of the eight types, at the large size, with the four states and the error version. The whole button has four axes and 192 combinations, all colored by the system. The heights are 32, 40 and 56, and the radius is always half the height.

At version 0.175.0 the system had 128 written contracts, one per component or component part. CPF Seguro uses 85 of them. Every screen has a test that compares its image pixel by pixel against the approved version.

The screen the test keeps393×852CPF Seguro's My profile screen, as the test keeps it. It is built from the screen's written specification. If a new system version changes one pixel of it, the test fails.

08 Result

A new product in 3 days. I counted it when Conta Bold joined the system, in July 2026: 3 days from the palette survey to the first build. One session to survey the palette, one to declare the colors and check contrast, one for the build. The old path took six weeks, by my reading of the history. The 4 days in Diletta Pay are a different thing: in 2022, a new brand on the old platform.

The update nobody saw. The system jumped thirteen versions at once, touching 1,022 files. In the app, the 24 screenshots stayed identical and the 2,062 tests passed.

Circulation. 302 versions published by 23 Sep 2026, each with a changelog. In July one app was 176 versions behind. Today CPF Seguro is on the current version and Conta Bold is 5 behind. Conta Bold chooses when to upgrade, so that number moves from one day to the next. I'd still rather show that distance than count 128 contracts, because the distance is what tells you whether the system is being used.

The web. In October the system got a second output: the same colors, type and components published as web components, now 51 pieces. The Flash Enterprise dashboard swapped Ant Design for them in one week. A defect fixed in the system reaches the app and the dashboard in the same release.

The check. Comparing CPF Seguro's drawing against the system, 33 color pairs match and 29 diverge. For 22 of those you can read which color should be there and which one is.

09 What I would do differently

I'd test the meter before publishing the measurement. The program counting done components silently skipped whatever it couldn't classify. The first total I published looked good and was wrong.

I'd test the right question. I have twenty recorded cases of a check that got it wrong: green over a defect, or red with no defect. In the first, it looked at the color declared in the component when the question was the color of the pixel. Blue at 18% opacity is not solid blue. Now I write the failing case before the check.

I'd write the changelog before I needed it. The 176 versions with no explanation were the reason the system had stopped reaching the products.

Next case

N26 · Research and Rules