기존 레포에서는 컴포넌트의 수에 비례하여 가독성과 복잡성이 높아진 문제가 있었습니다. 이를 보완하고자 효율적인 컴포넌트 관리를 위해 아토믹 디자인 패턴을 사용했습니다.
원자는 버튼, 제목, 입력 또는 이벤트 컬러 팔레트, 애니메이션 및 글꼴과 같은 가능한 가장 작은 구성 요소입니다. 이들은 버튼의 예와 같이 비활성화, 호버, 상이한 크기 등과 같은 많은 상태를 갖는 것 외에도 임의의 컨텍스트, 전역 또는 다른 구성 요소 및 템플릿 내에서 적용될 수 있습니다.
분자들은 원자를 구성하는 하나 또는 그 이상의 구성요소를 구성하는 역할을 합니다. 이를 통해 우리는 복잡한 구성요소들을 구성하고 그 구성요소들 중 일부를 재사용하기 시작합니다. 분자는 그 자체로 어떠한 기능이나 작용도 없는 원자를 사용함으로써 고유한 특성을 가질 수 있고 기능성을 만들 수 있습니다.
유기체는 더 정교한 인터페이스를 구성하는 원자 또는 함께 작동하는 분자의 조합입니다. 이 수준에서 구성 요소는 최종 모양을 갖추기 시작하지만 여전히 독립적이고 휴대 가능하며 어떤 콘텐츠에서도 재사용할 수 있을 만큼 충분히 재사용할 수 있습니다.