Design System – Boto

Here are some of the key technical decisions that were made :

Compound component

Compound component provided more flexibility to the developer when needed and offered better separation of concerns for improved maintainability.

<Modal>
  <Modal.Header>
    <Modal.Close onClick={closeModal} />
    <h2>Modal title</h2>
    <Article
      variant="regular"
      size={100}
      className="text-grey-75 mt-1 d-inline-block"
    >
      Subtitle clearly readable
    </Article>
  </Modal.Header>
  <Modal.Body>
    <span>Hello, it's me</span>
  </Modal.Body>
  <Modal.Footer className="d-flex justify-content-end gap-3">
    <Button variant="secondary-basic">Something</Button>
    <Button variant="primary">Save</Button>
  </Modal.Footer>
</Modal>

CSS-in-JS

We chose a CSS-in-JS solution because it provides scoped and modular styles, preventing global namespace pollution and ensuring that styles are tightly coupled with their respective components. This approach also allows for dynamic styling based on component state or props.

Accesibility

We had a strong focus on accesibility to make sure that all components are usable by as many people as possible, including individuals with disabilities. To achieve this, we follow best practices such as adhering to the W3C best practices. Each component is designed to support keyboard navigation, providing clear focus states for interactive elements. Semantic HTML tags are used to ensure that screen readers can correctly interpret the content. Additionally, we incorporate ARIA attributes where necessary to enhance assistive technology support.

Theming with css variables

We use CSS variables for tokens and theming, allowing us to maintain a consistent design system across the application while making it simple to switch themes and adjust styles dynamically.

:root {
  --brand-primary: #00a0ff;
  --brand-primary-light: #f2faff;
  --brand-primary-medium: #c3e9ff;
  --brand-primary-dark: #0080cc;
  /* etc... */

  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  /* etc... */

  --font-family-primary: "Inter-regular";
  --font-family-secondary: "Graphik-regular";
  --font-family-tertiary: "Graphik-regular";
  /* etc... */

  --text-25: calc(1 / 16 * 10rem);
  --text-50: calc(1 / 16 * 12rem);
  --text-75: calc(1 / 16 * 14rem);
  /* etc... */

  --h1-size: var(--text-200);
  --h2-size: var(--text-175);
  --h3-size: var(--text-150);
  /* etc... */
}

Documentation

We created documentation that determines the proptypes using an AST parser, and we also developed a Storybook version to test the component in isolation. I helped in distribute technical documentation, planning the release cycles, communications with the designers, and in gathering feedbacks from developers.