Design Tokens

Foundations

Guidelines

Design Patterns

design patterns

Overview

Guidance on composing pindoba components into whole screens and flows.

TODO This section is planned and not written yet. Tokens, foundations and components describe the parts; design patterns describe how to put them together into products. Below is what it will cover.

Principles

The values every pattern answers to. They settle trade-offs when two good options conflict, and every pattern cites the ones it serves.

  • Natural: interfaces follow how people already think and work, and keep the effort of using them low.
  • Certain: the same problem always gets the same solution, so behavior is predictable.
  • Meaningful: every element serves the user’s goal, and feedback says what happened and what to do next.
  • Growing: patterns scale from a single form to a full product without being rewritten.

Global rules

Product-wide conventions that sit above individual components: how the tokens and foundations combine into consistent screens.

  • Layout: page grids, regions and content width on the raster.
  • Color: when to use emphasis, tone and surface altitude.
  • Typography: hierarchy, measure and text roles on real pages.
  • Data formats: numbers, currency, dates, times and units.
  • Copywriting: voice, labels, button verbs and error messages.
  • Motion: when to animate, for how long, and when to stay still.
  • Icons: when an icon helps, when it needs a label, and how to size it.

Interaction patterns

Recurring product problems solved with pindoba components. Each pattern will be a problem, a recommended solution, live examples, and do/don’t pairs.

  • Navigation: app shells, sidebars, breadcrumbs and wayfinding.
  • Data entry: forms, validation, inline editing and multi-step flows.
  • Data display: tables, lists, cards, detail views and density.
  • Tone: confirmations, toasts, banners and destructive actions.
  • Messages: alerts, inline errors and system status.
  • Empty, loading and error states: what to show when there is nothing, nothing yet, or a failure.
  • Data visualization: choosing a chart, color by series, and readable axes.