Skip to content
Hugh Berryman

Tribal Credit / Design system

Centro: a shared language for Tribal

Centro's Figma library: primary, secondary, and ghost buttons, with shared anatomy, sizes, and interaction states.
Centro's Figma library: primary, secondary, and ghost buttons, with shared anatomy, sizes, and interaction states.Open full-size image

As Tribal's product and engineering teams grew, their interfaces needed a more consistent foundation. I developed Centro with the design team to bring reusable components, a unified color palette, and UI guidance into one shared system.

Result

Established a common design language that supported more consistent product work and reduced the need to resolve the same interface decisions across projects.

Year
2020–23
My scope
I conceptualized and implemented Centro during my time at Tribal, leading the design team in defining shared components, colors, and interface guidelines.

Exploring the Centro documentation

The original walkthrough of Centro's design-system documentation, preserved from the project archive.

Open demo video

Giving a growing team a common foundation

Different design practices were producing inconsistent interfaces and slowing development. The challenge was to support a growing team with varied backgrounds while keeping the product experience coherent.

Centro provided a shared reference for decisions that otherwise had to be made separately in each project.

Turning repeated decisions into reusable patterns

I led the design team in formalizing components, a unified color palette, and clear UI guidelines. The system was shaped around Tribal's product needs so it could support the work already happening across design and engineering.

The resulting library made the design language explicit and reusable, helping teams carry consistent patterns into new product work.

Artifacts

  • A closer view of Centro's button specifications, reusable base elements, and documentation layouts alongside the component-library navigation.
    A closer view of Centro's button specifications, reusable base elements, and documentation layouts alongside the component-library navigation.Open full-size image
  • Centro's foundation files organize brand assets, cover templates, light and dark color palettes, elevation, icons, and typography.
    Centro's foundation files organize brand assets, cover templates, light and dark color palettes, elevation, icons, and typography.Open full-size image