Back

Talqui

A new platform with its own identity and a scalable design system.

  • Product Design
  • Design System
Talqui Platform case cover

Challenge

Rules to support the platform's growth.

The previous Talqui platform lacked shared design standards or documentation. This made it harder to maintain consistency, improve the interface and grow the product. My role was to create this shared foundation, from the design system to the platform screens.

Before

The interface before the design system.

The old support and settings screens show the starting point. They include navigation, conversation lists, forms and customer panels that needed shared standards. Usage guidelines were missing too.

1 / 3. Conversation queue and customer support. Image edited to hide personal data and messages.

How we solved it

Tokens, components, and documentation made to grow.

The design system was built from the ground up to grow. Variables, design tokens, components, and patterns were organized as a product foundation.

I created the design tokens with custom naming. This brings brand semantics, interface logic, and implementation closer together and reduces ambiguity for the team.

Developers created a dedicated repository for the design system. They keep it updated and sync the documentation with Storybook, making the project easier to expand and update.

Design System

From colors and type to components.

Color primitives as the starting point.

The Primitive collection groups colors into palettes. This frame shows the neutral scale, with numbered steps and hexadecimal values. The image comes from the project recording.

Semantic tokens linked to the palette.

The recording moves through the Theme collection's background groups, then opens Primitive. Semantic levels such as weakest and strongest reference palette variables, including talqui/color/blue/400. The video has no audio and lasts 9 seconds.

Type styles with defined properties.

Display, heading, label and body styles organize the type scale. The recording shows display styles to present family and weight variables, size and line height. The large display example uses 44/52 and semibold. The video has no audio and lasts 11 seconds.

Building a screen with the design system

A Figma demonstration creating a screen with the Talqui library. It shows sidebar navigation, cards and charts, using component variants and spacing variables. The video has no audio, is sped up four times and lasts about 26 seconds.
Coleções de variáveis no Figma com os grupos Theme, Style, Typography e Extensions organizam os tokens semânticos da plataforma Talqui.
Componente Base Badge está documentado no Figma com uma tabela de propriedades, variantes e exemplos de uso da plataforma Talqui.
Storybook do Talqui DS está em design-system.talqui.dev com variantes do componente Badge. Essas variantes incluem cores, contorno e ícones.
Tela de cadastro da plataforma Talqui. O componente t-base-button está em uso.

Foundations

Platform identity

The interface stopped feeling like a technical adaptation. It now has its own product language for Talqui.

Design tokens

Variables have names that follow their own logic to make use, maintenance, and connection to code easier.

Scalable components

Components made for different contexts, states, and updates without creating new patterns for every screen.

DS repository

The developers created their own base for the design system and keep it updated with the platform.

Storybook

Technical documentation is in sync with Storybook. This creates an updated reference for the team.

New screens

The team rebuilt the platform with new screens and flows using this visual and technical foundation.

Process

  1. 01

    I rebuilt the platform using an older version that was a fork of an interface created by the development team.

  2. 02

    Creation of a platform identity that follows the Talqui brand. This connects the product, experience, and visual language.

  3. 03

    Creation of the design system with variables, design tokens, and components made to grow and stay maintained.

  4. 04

    Defining a custom name for the tokens, bringing the meaning of design and implementation closer together.

Solution

New platform with its own language. It fits the brand better and is ready for future changes.

Versioned design system with its own repository, maintenance by the development team, and documentation kept up to date.

Tokens and components organized to avoid random decisions. This helps create new screens faster without losing consistency.

A foundation that is easier to expand with updates, new flows, new functions, and the evolution of the AI support product.

View Storybook

Next Case Study

Petrobras DS v2

Component library, design tokens and documentation

Copyright Eduardo Amaral © 2026