デザインシステムを取り入れている企業、組織は多いと思います。
私は、エンジニアとして、日々デザインシステムを活用しており、その中で特に重要だと感じた点について書きます。
最低限これらを遵守することで、より良いデザインシステムの活用につながると思います。

デザインシステムの詳細については、以下の記事などを参考にしてみてください。
参考
デザインシステムとは？基本概念とその重要性 - ajike

組織ごとにデザインシステムは異なります。各組織のルールに従ってご利用ください。

1. ガイドラインを必ず読む

ガイドラインは、デザインルール、使用ルール、目的などがまとめられた重要なドキュメントです。コンポーネントの見た目だけでなく、機能や目的についても理解し、適切なコンポーネントを選択することで、ユーザビリティの向上に繋がります。
ガイドラインを読んでもわからない、記載されていない場合はデザイナーに確認しています。

2. コンポーネントを直接オーバーライドしない

デザインによっては、複数のコンポーネントを組み合わせて利用する必要がある場合もあります。
その際、デフォルトのスタイルを変更したい場合は、コンポーネントのクラスを直接オーバーライドするのではなく、別途クラスを作成するか、コンポーネントをdivなどで囲んでスタイルを適用します。CSSの詳細度を上げたり、!importantは使わないようにしています。
特に、コンポーネントの構造に関わるCSSのプロパティ（display、positionなど）は、直接変更しないようにしています。
これらのプロパティを直接変更すると、コンポーネントの再利用性が損なわれ、将来的なメンテナンス性が低下します。

構造に関わるようなCSSの一例

display
position
float
flex, grid

/* NG */
.button {
  // 変更内容...
  position: absolute;
  right: 0;
}

// 詳細度をあげてオーバーライドするのもNGにしています。
.foo {
  & .button {
    // 変更内容...
    position: absolute;
    right: 0;
  }
}

/* OK */
// クラス名を用意する
.bar {
  // 変更内容...
  position: absolute;
  right: 0;
}

明らかにバグと判明していて、その認識がチームに共有されている場合は許可しています。

3. 他の役割を持たせない

クラス名、変数名に目的がわかるように命名するのは主流だと思います。
上記と似ていますが、その目的以外のスタイルを持たせるべきではありません。

/* NG */
// 例） paddingを調整するクラス
.pt-20 {
  padding-top: 20px;
}

// 他の役割を持たせる
.foo {
  & .pt-20 {
    color: red;
    padding-top: 20px;
  }
}

4. Utilityクラスのみでコンポーネントを作らない

ユーティリティクラスは便利ですが、それ自体でコンポーネントを作るモノではありません。あくまでコンポーネントやレイアウトを調整するために使います。
ユーティリティクラスだけでコンポーネントを作らず、別途クラスを命名しプロジェクト用のコンポーネントとするようにしています。

まとめ

今回書いた内容は、実際にこのような使われ方をして問題が発生したケースを参考にしています。様々なバックグラウンドを持つメンバーと協力する中で、デザインシステムの利用について、より深く理解を深めることができました。