デザインシステムのクラスは、必要に応じて細かくすることができます。最も小さなレベルは、単一のプロパティに値を指定するために定義するクラスです。ただし、このようなクラスは、抽象化という目的を果たさないため、あまり有用ではありません。
たとえば、テキストの中央揃えにのみ使用するクラスがあるとします:

 .TextCentered 
{
       text-align: center;
 }

この場合、暗い色の背景上のメインタイトル用の H1_Negative クラスは、このプロパティを含めず、指定なしのまま定義します:

 .H1_Negative {
       color: rgb(255,255,255);
       font-family: AbhayaLibre-Bold;
       font-size: 95px;
       font-weight: bold;
       letter-spacing: -1.72px;
       line-height: 75px;
       text-align: center;
 }

次に、両方のクラスを組み合わせてテキスト ブロック コントロールに割り当てます:

クラスは、必要なレベルまで細分化しておくことで、後で組み合わせて使用することができます。
また、この組み合わせを多数のコントロールに広範囲で使用する場合は、両クラスを含む新しいクラスを定義し、抽象化のレベルを高めることができます:

.H1_Negative_centered
{
      @include H1_Negative TextCentered

 }

新しいクラスでは、組み合わせるだけでなく、別のプロパティを指定することもできます:

.H1_Negative_uppercase_centered
{
      @include H1_Negative TextCentered
      text-transform: uppercase;
}

一般に、アプリケーションのデザインシステムに関連する抽象化の知識があるのはデザイナーです。このクラスアーキテクチャの構築には複数のデザイン手法があり、それぞれ細分化の程度が異なります。抽象化と個別の使用の間で常に妥協が伴います。

使用可能バージョン

GeneXus 17 Upgrade 6 以降。