Skip to content
Philipe Bastos®DESIGN SYSTEMS / WORKING STUDIES
← PRODUCT / SELECTED PRACTICE

Design systems · Component architecture · AI-assisted production

Designing Systems.
Not Just Screens.

Exploring the intersection of brand identity, reusable components, and AI-assisted design production.

Collection
Two product systems. One method.
Evidence
Source audit → portable tokens → working components
Status
Documentation studies · v0.1.0
Production foundations, explicitly scoped demonstrations.

THE SHARED QUESTION

What survives
beyond a screen?

A brand needs more than a palette. It needs decisions that hold across modes, components, usage contexts and implementation. These studies make those decisions inspectable.

Primitive

A concrete brand value.

color.blue = #002fa7
Semantic

A role with a stable name.

color.action → {color.blue}
Component

A contract that stays the same.

Button / variant="primary"Save changes →

This collection separates what already exists in each product from the architecture consolidated for the portfolio. No published Figma library or complete product migration is claimed.

THE COLLECTION

Two products.
One method.

Product-specific patterns share token and component contracts without erasing their identities. Each chapter links back to the product case rather than retelling it.

  1. 01

    PB.fit
    Design System

    Workout continuity / light & dark

    From a JavaScript PWA’s existing variables and catalogue to portable aliases, React demonstrations and composed training patterns.

    ↗
  2. 02

    Corpus
    Design System

    Scheduling / multiple usage contexts

    Preserving olive, paper and professional identity while documenting the contracts behind forms, capacity and scheduling.

    ↗

THE ARCHITECTURE

Share the contract.
Keep the character.

The reusable layer is deliberately small: token resolution, component properties, accessibility behavior and documentation. Product patterns remain close to their tasks.

Foundations

JSON primitives, semantic modes and component aliases compile to scoped CSS variables. Missing references and cycles fail validation.

Inspect PB.fit tokens ↗

Components

Fourteen documented components per system. Shared primitives compose into workout, exercise and scheduling patterns with real local interactions.

Read the React source ↗

Production judgment

Documented boundaries, usage examples and an incremental adoption path. AI proposes; deterministic checks and human review decide what enters the system.

Read architecture & handoff ↗