Atomic Designとは

要素をパーツやコンポーネント単位で分割して、定義するUIデザイン、設計手法のことです。

分割する単位

Atomic Designでは分割する単位は下記のように定義されています。

アイコンや配色、フォント、ボタン、テキストエリアなど、
これ以上分割できないもの。

atomを2つ以上のを組み合わせたもの。

atomsやmoleculesを組み合わせたもの。
汎用的に使用できるように組み合わせたorganismsにはmarginなどは指定しません。
atomsやmoleculesにスタイルを指定することはあります。

organismsを組み合わせたもの。
レイアウトやorganismsの横幅、スペースなどを指定します。

取得したデータを反映したり、ページ固有の情報をtemplateを渡すもの。
また、ページ固有のスタイルなどもこちらで指定します。

以上、僕のAtomic Designに関する解釈でした。

明確な答えがあるものではないと思っているのですが、
こうした方がいいのでは？？
自分はこうやって使っているなどあればお教えいただけますと幸いです。