Nelogica Design System | Marco Vinicius

01

Project at a glance

The problem: The white-label product needed to support different brands while remaining consistent. Scattered references and interface inconsistencies made it harder to establish a shared foundation.
My contribution: Design system development, component maintenance, optimization, and documentation in collaboration with designers and engineers.
What I delivered: Foundations, brand tokens and component guidelines, brought together in a manual with a white-label customization workflow.

02

My role and project context

Company: Nelogica
Role: Product Designer · UX/UI
Collaboration: Worked with developers, the product owner, and UX leadership to define and evolve the system.
Product context: A new crypto asset management product under development during the project.

03

The challenge

While a crypto asset management product was being developed, I identified interface inconsistencies and an opportunity to establish a design system from the ground up.

I worked with developers, the product owner, and UX leadership to establish a shared direction. We aimed to organize existing references and improve communication between design and engineering, building on the guides and code already in place.

04

Design decisions

Audit existing assets before defining new ones

Why it mattered: Designers and developers were already reusing style guides and UI elements, but there was no shared standard.
What I did: I mapped colors, typography, spacing, buttons and modals to inform the new product’s foundation. Simplicity and responsive behavior guided the documentation.

Explore colors before finalizing the palette

Why it mattered: The interface needed to work in light and dark themes while clearly communicating buy and sell actions and changes in asset values.
What I did: I compared color alternatives in both themes and reviewed visibility issues, including yellow. The study documents the exploration behind those visual decisions.

Color palette study tested across light and dark themes — Exploratory color study in light and dark themes. Alternatives compared to identify visibility issues before consolidating the palette.
View larger image

Separate the shared foundation from brand identity

Why it mattered: The white-label model required customization without changing the product’s structural rules.
What I did: I organized definitions into Foundation and Brand: spacing, radii and breakpoints in the shared foundation; typography and colors in the brand layer, within the customization options agreed with each client.

Turn decisions into usage guidance

Why it mattered: Designers and developers needed to know how to apply and maintain the system.
What I did: I documented rules, examples, and usage guidance in Notion and reviewed them with the team. The manual also guides brand customization in Figma and handoff to development.

Alignment meeting between design and development — Design and development discussions were part of the system’s evolution.
View larger image

05

Design system documentation

The HB Crypto manual brings together visual foundations, usage guidelines, and customization. It explains both how the system is structured and how to apply it to the product.

Foundation: Typography, spacing, radii, opacity, shadows, breakpoints and buy/sell colors.
Brand: Fonts, weights, brand colors, neutrals, gradients and states for the client company’s identity.
Components: States and usage guidelines for foundational components, plus guidance for combining them into trading tools such as order tickets and order lists.
White-label customization: Guidance for studying a brand, updating tokens and libraries in Figma and preparing development handoff.

Design System documentation organized in Notion — HB Crypto manual: foundations, brand, components and customization guidance for design and development.
View larger image

Guidance for practical use

States beyond appearance

Buttons have documented default, hover, focus, active and disabled states. The focus state supports keyboard navigation.

Colors with meaning

Colors for buy and sell actions and changes in asset values have defined uses across asset lists, orders, and the order book.

Customization through handoff

The client proposal workflow covers gathering brand assets, updating the library, and handing off screens, prototypes, and tokens to engineering.

Explore the original HB Crypto manual (Portuguese) ↗

06

Deliverables and evidence

A foundation for different brands

Separating Foundation and Brand clarifies what stays consistent and what can be customized for each client.

Guidelines for implementation and review

Usage guidelines make visual decisions available for reference when implementing and reviewing components.

Connecting design, engineering and business

The client proposal guide connects a prospective client’s brand identity to a customized design proposal and the materials needed for implementation.

07

Lessons learned

Governance is part of the system

Component development went hand in hand with documentation and regular reviews with engineering.

Considering accessibility in visual design

Reviewing colors in both themes helped surface legibility issues when defining the visual foundation.

Documentation as a deliverable

The shared reference needed to remain accessible and evolve alongside the product.