Braip design system — from library to system

Turning a drifting component library into a system with tokens, motion and documentation an engineering team can actually consume.

UI/UX Designer — Design System (token track, within a design team)Design SystemDesign TokensFigma VariablesAccessibilityDocumentation

Read the case See the work

Cover of the Braip Foundations file — "Design System · Foundations & Design Tokens" over the Braip monogram in a purple gradient.

I'm Isaque Valle. I work at the seam between design system and product, turning interface decisions into components, tokens and flows that survive handoff.

About me

Selected work

From the problem to the design decision.

················································································································································································································································································································································································································

Checkout credit card block — the card filled in real time with number, holder and network, above the form fields.

Checkout — the whole flow, and the card motion

Rebuilding a single-page checkout on the new design system, and fixing its most fragile stretch — the fifteen seconds someone spends typing a card number.

Product UI/UX Designer (rebuild on Braip's V2 design system)ProductFlowStatesMotionDesign System

Read the case study

Hair Glow landing page hero — a smiling model holding the 5-in-1 fluid bottle against a soft green and purple background.

Hair Glow — product launch landing page

A sales page built as a sequence of objections answered one at a time, across desktop and mobile.

UI and prototype (desktop and mobile)Landing pageUIPrototypeResponsive designBeauty

Read the case study

Hero of the SOS Beleza Absoluta landing page — a smiling model with her hand in her hair beside the headline "Recupere sua autoestima e beleza natural", on a light beige background.

SOS Beleza Absoluta — a style guide under stress

Building a project-specific style system on top of Braip Foundations, then using a fourteen-section landing page across three breakpoints as its stress test.

Style guide and variables library · UI and responsive design · art direction and product compositionsDesign SystemLanding pageResponsive designFigma VariablesArt directionBeauty

Read the case study

See all work

How I work

Design systems: Tokens, components and documentation that shorten the distance between Figma and code.
Product design: Flows, states and edge cases — the part usually missing from the pretty screen.
Applied research: Benchmarks, interviews and usability testing scoped to the team's real deadline.
Handoff: Specs an engineer can read without having to ask me.

================================================================================================================================================================================================================================================================================================================================================================================================================

Got a product to design?

I reply within one business day.

Get in touch