Le classi CSS del design system seguono la convenzione BEM per la semantica di blocchi, elementi e modificatori, con il prefisso rtds- su ogni classe — sia quelle dei componenti sia le utility generate da Tailwind.
Le classi BEM identificano il componente e le sue parti (atomi, molecole, organismi, oltre agli stili base ricorrenti di pulsanti, link, card e tipografia); gli stili corrispondenti sono definiti nel CSS del componente, dove le utility Tailwind possono essere composte con @apply. Le stesse classi sono anche il riferimento usato dal JavaScript, sia come hook di inizializzazione sia per gli stati applicati a runtime.
rtds-, per evitare conflitti con altri stili o framework presenti nella paginartds-[nome-componente]rtds-btn, rtds-card, rtds-category--rtds-btn--primary, rtds-category--overline__rtds-cta-banner__content, rtds-cta-banner__ctartds-, per coerenza con le classi componente e per evitare conflitti con altri frameworkrtds-p-6, rtds-flex, rtds-gridrtds-is-open, is-selected, has-dialogrtds-lg:rtds-grid-cols-12, md:rtds-py-8