<div class="rtds-py-6 rtds-space-y-8">
<div class="rtds-px-6">
<h1 class="rtds-text-2xl rtds-font-bold">Colors</h1>
<p>Base color scheme.</p>
</div>
<div class="rtds-p-6 rtds-grid rtds-grid-cols-2 rtds-gap-10">
<div class="">
<h2 class="rtds-text-xl rtds-mb-2"><strong>Base and Transparency</strong></h2>
<div class="rtds-grid rtds-gap-8">
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>white</strong></h3>
<p><strong></strong></p>
<p>
bg class: <strong>rtds-bg-white</strong>
</p>
<p>
text class: <strong>rtds-text-white</strong>
</p>
<p>
border class: <strong>rtds-border-white</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-white rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>white/50</strong></h3>
<p><strong></strong></p>
<p>
bg class: <strong>rtds-bg-white/50</strong>
</p>
<p>
text class: <strong></strong>
</p>
<p>
border class: <strong></strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-white/50 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>white/25</strong></h3>
<p><strong></strong></p>
<p>
bg class: <strong>rtds-bg-white/25</strong>
</p>
<p>
text class: <strong></strong>
</p>
<p>
border class: <strong></strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-white/25 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>black</strong></h3>
<p><strong></strong></p>
<p>
bg class: <strong>rtds-bg-black</strong>
</p>
<p>
text class: <strong></strong>
</p>
<p>
border class: <strong></strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-black rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>black/50</strong></h3>
<p><strong></strong></p>
<p>
bg class: <strong>rtds-bg-black/50</strong>
</p>
<p>
text class: <strong></strong>
</p>
<p>
border class: <strong></strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-black/50 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>black/25</strong></h3>
<p><strong></strong></p>
<p>
bg class: <strong>rtds-bg-black/25</strong>
</p>
<p>
text class: <strong></strong>
</p>
<p>
border class: <strong></strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-black/25 rtds-flex-1"></div>
</div>
</div>
</div>
<div class="">
<h2 class="rtds-text-xl rtds-mb-2"><strong>Brand</strong></h2>
<div class="rtds-grid rtds-gap-8">
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>brand-00</strong></h3>
<p><strong>#D0131A</strong></p>
<p>
bg class: <strong>rtds-bg-brand-00</strong>
</p>
<p>
text class: <strong>rtds-text-brand-00</strong>
</p>
<p>
border class: <strong>rtds-border-brand-00</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-brand-00 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>brand-01</strong></h3>
<p><strong>#2B2B2B</strong></p>
<p>
bg class: <strong>rtds-bg-brand-01</strong>
</p>
<p>
text class: <strong>rtds-text-brand-01</strong>
</p>
<p>
border class: <strong>rtds-border-brand-01</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-brand-01 rtds-flex-1"></div>
</div>
</div>
</div>
<div class="">
<h2 class="rtds-text-xl rtds-mb-2"><strong>Primary</strong></h2>
<div class="rtds-grid rtds-gap-8">
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>primary-50</strong></h3>
<p><strong>#FEDBDD</strong></p>
<p>
bg class: <strong>rtds-bg-primary-50</strong>
</p>
<p>
text class: <strong>rtds-text-primary-50</strong>
</p>
<p>
border class: <strong>rtds-border-primary-50</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-primary-50 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>primary-100</strong></h3>
<p><strong>#F5B9BB</strong></p>
<p>
bg class: <strong>rtds-bg-primary-100</strong>
</p>
<p>
text class: <strong>rtds-text-primary-100</strong>
</p>
<p>
border class: <strong>rtds-border-primary-100</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-primary-100 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>primary-200</strong></h3>
<p><strong>#E7898C</strong></p>
<p>
bg class: <strong>rtds-bg-primary-200</strong>
</p>
<p>
text class: <strong>rtds-text-primary-200</strong>
</p>
<p>
border class: <strong>rtds-border-primary-200</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-primary-200 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>primary-300</strong></h3>
<p><strong>#E06266</strong></p>
<p>
bg class: <strong>rtds-bg-primary-300</strong>
</p>
<p>
text class: <strong>rtds-text-primary-300</strong>
</p>
<p>
border class: <strong>rtds-border-primary-300</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-primary-300 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>primary-400</strong></h3>
<p><strong>#D83A40</strong></p>
<p>
bg class: <strong>rtds-bg-primary-400</strong>
</p>
<p>
text class: <strong>rtds-text-primary-400</strong>
</p>
<p>
border class: <strong>rtds-border-primary-400</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-primary-400 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>primary-500</strong></h3>
<p><strong>#D0131A</strong></p>
<p>
bg class: <strong>rtds-bg-primary-500</strong>
</p>
<p>
text class: <strong>rtds-text-primary-500</strong>
</p>
<p>
border class: <strong>rtds-border-primary-500</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-primary-500 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>primary-600</strong></h3>
<p><strong>#AD1016</strong></p>
<p>
bg class: <strong>rtds-bg-primary-600</strong>
</p>
<p>
text class: <strong>rtds-text-primary-600</strong>
</p>
<p>
border class: <strong>rtds-border-primary-600</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-primary-600 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>primary-700</strong></h3>
<p><strong>#8B0D11</strong></p>
<p>
bg class: <strong>rtds-bg-primary-700</strong>
</p>
<p>
text class: <strong>rtds-text-primary-700</strong>
</p>
<p>
border class: <strong>rtds-border-primary-700</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-primary-700 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>primary-800</strong></h3>
<p><strong>#680A0D</strong></p>
<p>
bg class: <strong>rtds-bg-primary-800</strong>
</p>
<p>
text class: <strong>rtds-text-primary-800</strong>
</p>
<p>
border class: <strong>rtds-border-primary-800</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-primary-800 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>primary-900</strong></h3>
<p><strong>#450609</strong></p>
<p>
bg class: <strong>rtds-bg-primary-900</strong>
</p>
<p>
text class: <strong>rtds-text-primary-900</strong>
</p>
<p>
border class: <strong>rtds-border-primary-900</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-primary-900 rtds-flex-1"></div>
</div>
</div>
</div>
<div class="">
<h2 class="rtds-text-xl rtds-mb-2"><strong>Secondary</strong></h2>
<div class="rtds-grid rtds-gap-8">
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>secondary-50</strong></h3>
<p><strong>#D6DFEC</strong></p>
<p>
bg class: <strong>rtds-bg-secondary-50</strong>
</p>
<p>
text class: <strong>rtds-text-secondary-50</strong>
</p>
<p>
border class: <strong>rtds-border-secondary-50</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-secondary-50 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>secondary-100</strong></h3>
<p><strong>#BAC9DF</strong></p>
<p>
bg class: <strong>rtds-bg-secondary-100</strong>
</p>
<p>
text class: <strong>rtds-text-secondary-100</strong>
</p>
<p>
border class: <strong>rtds-border-secondary-100</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-secondary-100 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>secondary-200</strong></h3>
<p><strong>#97AECF</strong></p>
<p>
bg class: <strong>rtds-bg-secondary-200</strong>
</p>
<p>
text class: <strong>rtds-text-secondary-200</strong>
</p>
<p>
border class: <strong>rtds-border-secondary-200</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-secondary-200 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>secondary-300</strong></h3>
<p><strong>#7593BF</strong></p>
<p>
bg class: <strong>rtds-bg-secondary-300</strong>
</p>
<p>
text class: <strong>rtds-text-secondary-300</strong>
</p>
<p>
border class: <strong>rtds-border-secondary-300</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-secondary-300 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>secondary-400</strong></h3>
<p><strong>#5378AF</strong></p>
<p>
bg class: <strong>rtds-bg-secondary-400</strong>
</p>
<p>
text class: <strong>rtds-text-secondary-400</strong>
</p>
<p>
border class: <strong>rtds-border-secondary-400</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-secondary-400 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>secondary-500</strong></h3>
<p><strong>#305D9F</strong></p>
<p>
bg class: <strong>rtds-bg-secondary-500</strong>
</p>
<p>
text class: <strong>rtds-text-secondary-500</strong>
</p>
<p>
border class: <strong>rtds-border-secondary-500</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-secondary-500 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>secondary-600</strong></h3>
<p><strong>#284E84</strong></p>
<p>
bg class: <strong>rtds-bg-secondary-600</strong>
</p>
<p>
text class: <strong>rtds-text-secondary-600</strong>
</p>
<p>
border class: <strong>rtds-border-secondary-600</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-secondary-600 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>secondary-700</strong></h3>
<p><strong>#203E6A</strong></p>
<p>
bg class: <strong>rtds-bg-secondary-700</strong>
</p>
<p>
text class: <strong>rtds-text-secondary-700</strong>
</p>
<p>
border class: <strong>rtds-border-secondary-700</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-secondary-700 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>secondary-800</strong></h3>
<p><strong>#182F50</strong></p>
<p>
bg class: <strong>rtds-bg-secondary-800</strong>
</p>
<p>
text class: <strong>rtds-text-secondary-800</strong>
</p>
<p>
border class: <strong>rtds-border-secondary-800</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-secondary-800 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>secondary-900</strong></h3>
<p><strong>#101F35</strong></p>
<p>
bg class: <strong>rtds-bg-secondary-900</strong>
</p>
<p>
text class: <strong>rtds-text-secondary-900</strong>
</p>
<p>
border class: <strong>rtds-border-secondary-900</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-secondary-900 rtds-flex-1"></div>
</div>
</div>
</div>
<div class="">
<h2 class="rtds-text-xl rtds-mb-2"><strong>Neutral</strong></h2>
<div class="rtds-grid rtds-gap-8">
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>neutral-50</strong></h3>
<p><strong>#F7F9FB</strong></p>
<p>
bg class: <strong>rtds-bg-neutral-50</strong>
</p>
<p>
text class: <strong>rtds-text-neutral-50</strong>
</p>
<p>
border class: <strong>rtds-border-neutral-50</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-neutral-50 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>neutral-100</strong></h3>
<p><strong>#F1F4F9</strong></p>
<p>
bg class: <strong>rtds-bg-neutral-100</strong>
</p>
<p>
text class: <strong>rtds-text-neutral-100</strong>
</p>
<p>
border class: <strong>rtds-border-neutral-100</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-neutral-100 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>neutral-200</strong></h3>
<p><strong>#EAEFF5</strong></p>
<p>
bg class: <strong>rtds-bg-neutral-200</strong>
</p>
<p>
text class: <strong>rtds-text-neutral-200</strong>
</p>
<p>
border class: <strong>rtds-border-neutral-200</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-neutral-200 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>neutral-300</strong></h3>
<p><strong>#E4EAF2</strong></p>
<p>
bg class: <strong>rtds-bg-neutral-300</strong>
</p>
<p>
text class: <strong>rtds-text-neutral-300</strong>
</p>
<p>
border class: <strong>rtds-border-neutral-300</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-neutral-300 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>neutral-400</strong></h3>
<p><strong>#DDE4EF</strong></p>
<p>
bg class: <strong>rtds-bg-neutral-400</strong>
</p>
<p>
text class: <strong>rtds-text-neutral-400</strong>
</p>
<p>
border class: <strong>rtds-border-neutral-400</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-neutral-400 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>neutral-500</strong></h3>
<p><strong>#D6DFEC</strong></p>
<p>
bg class: <strong>rtds-bg-neutral-500</strong>
</p>
<p>
text class: <strong>rtds-text-neutral-500</strong>
</p>
<p>
border class: <strong>rtds-border-neutral-500</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-neutral-500 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>neutral-600</strong></h3>
<p><strong>#B2BAC5</strong></p>
<p>
bg class: <strong>rtds-bg-neutral-600</strong>
</p>
<p>
text class: <strong>rtds-text-neutral-600</strong>
</p>
<p>
border class: <strong>rtds-border-neutral-600</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-neutral-600 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>neutral-700</strong></h3>
<p><strong>#737B84</strong></p>
<p>
bg class: <strong>rtds-bg-neutral-700</strong>
</p>
<p>
text class: <strong>rtds-text-neutral-700</strong>
</p>
<p>
border class: <strong>rtds-border-neutral-700</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-neutral-700 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>neutral-800</strong></h3>
<p><strong>#474A4F</strong></p>
<p>
bg class: <strong>rtds-bg-neutral-800</strong>
</p>
<p>
text class: <strong>rtds-text-neutral-800</strong>
</p>
<p>
border class: <strong>rtds-border-neutral-800</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-neutral-800 rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>neutral-900</strong></h3>
<p><strong>#2B2D2F</strong></p>
<p>
bg class: <strong>rtds-bg-neutral-900</strong>
</p>
<p>
text class: <strong>rtds-text-neutral-900</strong>
</p>
<p>
border class: <strong>rtds-border-neutral-900</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-neutral-900 rtds-flex-1"></div>
</div>
</div>
</div>
<div class="">
<h2 class="rtds-text-xl rtds-mb-2"><strong>Support</strong></h2>
<div class="rtds-grid rtds-gap-8">
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>success-dark</strong></h3>
<p><strong>#166534</strong></p>
<p>
bg class: <strong>rtds-bg-success-dark</strong>
</p>
<p>
text class: <strong>rtds-text-success-dark</strong>
</p>
<p>
border class: <strong>rtds-border-success-dark</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-success-dark rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>success</strong></h3>
<p><strong>#16a34a</strong></p>
<p>
bg class: <strong>rtds-bg-success</strong>
</p>
<p>
text class: <strong>rtds-text-success</strong>
</p>
<p>
border class: <strong>rtds-border-success</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-success rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>success-light</strong></h3>
<p><strong>#bbf7d0</strong></p>
<p>
bg class: <strong>rtds-bg-success-light</strong>
</p>
<p>
text class: <strong>rtds-text-success-light</strong>
</p>
<p>
border class: <strong>rtds-border-success-light</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-success-light rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>error-dark</strong></h3>
<p><strong>#991b1b</strong></p>
<p>
bg class: <strong>rtds-bg-error-dark</strong>
</p>
<p>
text class: <strong>rtds-text-error-dark</strong>
</p>
<p>
border class: <strong>rtds-border-error-dark</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-error-dark rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>error</strong></h3>
<p><strong>#ef4444</strong></p>
<p>
bg class: <strong>rtds-bg-error</strong>
</p>
<p>
text class: <strong>rtds-text-error</strong>
</p>
<p>
border class: <strong>rtds-border-error</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-error rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>error-light</strong></h3>
<p><strong>#fecaca</strong></p>
<p>
bg class: <strong>rtds-bg-error-light</strong>
</p>
<p>
text class: <strong>rtds-text-error-light</strong>
</p>
<p>
border class: <strong>rtds-border-error-light</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-error-light rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>warn-dark</strong></h3>
<p><strong>#9a3412</strong></p>
<p>
bg class: <strong>rtds-bg-warn-dark</strong>
</p>
<p>
text class: <strong>rtds-text-warn-dark</strong>
</p>
<p>
border class: <strong>rtds-border-warn-dark</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-warn-dark rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>warn</strong></h3>
<p><strong>#f97316</strong></p>
<p>
bg class: <strong>rtds-bg-warn</strong>
</p>
<p>
text class: <strong></strong>
</p>
<p>
border class: <strong></strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-warn rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>warn-light</strong></h3>
<p><strong>#fed7aa</strong></p>
<p>
bg class: <strong>rtds-bg-warn-light</strong>
</p>
<p>
text class: <strong>rtds-text-warn-light</strong>
</p>
<p>
border class: <strong>rtds-border-warn-light</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-warn-light rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>info-dark</strong></h3>
<p><strong>#075985</strong></p>
<p>
bg class: <strong>rtds-bg-info-dark</strong>
</p>
<p>
text class: <strong>rtds-text-info-dark</strong>
</p>
<p>
border class: <strong>rtds-border-info-dark</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-info-dark rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>info</strong></h3>
<p><strong>#0ea5e9</strong></p>
<p>
bg class: <strong>rtds-bg-info</strong>
</p>
<p>
text class: <strong>rtds-text-info</strong>
</p>
<p>
border class: <strong>rtds-border-info</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-info rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>info-light</strong></h3>
<p><strong>#bae6fd</strong></p>
<p>
bg class: <strong>rtds-bg-info-light</strong>
</p>
<p>
text class: <strong>rtds-text-info-light</strong>
</p>
<p>
border class: <strong>rtds-border-info-light</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-info-light rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>allerta-verde</strong></h3>
<p><strong>#92D048</strong></p>
<p>
bg class: <strong>rtds-bg-allerta-verde</strong>
</p>
<p>
text class: <strong>rtds-text-allerta-verde</strong>
</p>
<p>
border class: <strong>rtds-border-allerta-verde</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-allerta-verde rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>allerta-giallo</strong></h3>
<p><strong>#FFFE54</strong></p>
<p>
bg class: <strong>rtds-bg-allerta-giallo</strong>
</p>
<p>
text class: <strong>rtds-text-allerta-giallo</strong>
</p>
<p>
border class: <strong>rtds-border-allerta-giallo</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-allerta-giallo rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>allerta-arancione</strong></h3>
<p><strong>#F2A83B</strong></p>
<p>
bg class: <strong>rtds-bg-allerta-arancione</strong>
</p>
<p>
text class: <strong>rtds-text-allerta-arancione</strong>
</p>
<p>
border class: <strong>rtds-border-allerta-arancione</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-allerta-arancione rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>allerta-rosso</strong></h3>
<p><strong>#EA3223</strong></p>
<p>
bg class: <strong>rtds-bg-allerta-rosso</strong>
</p>
<p>
text class: <strong>rtds-text-allerta-rosso</strong>
</p>
<p>
border class: <strong>rtds-border-allerta-rosso</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-allerta-rosso rtds-flex-1"></div>
</div>
</div>
</div>
<div class="">
<h2 class="rtds-text-xl rtds-mb-2"><strong>Salvia</strong></h2>
<div class="rtds-grid rtds-gap-8">
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>salvia</strong></h3>
<p><strong>#4A7769</strong></p>
<p>
bg class: <strong>rtds-bg-salvia</strong>
</p>
<p>
text class: <strong>rtds-text-salvia</strong>
</p>
<p>
border class: <strong>rtds-border-salvia</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-salvia rtds-flex-1"></div>
</div>
</div>
</div>
<div class="">
<h2 class="rtds-text-xl rtds-mb-2"><strong>Others</strong></h2>
<div class="rtds-grid rtds-gap-8">
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>bando-aperto</strong></h3>
<p><strong>#A1CCB1</strong></p>
<p>
bg class: <strong>rtds-bg-bando-aperto</strong>
</p>
<p>
text class: <strong>rtds-text-bando-aperto</strong>
</p>
<p>
border class: <strong>rtds-border-bando-aperto</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-bando-aperto rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>bando-in-attivazione</strong></h3>
<p><strong>#FCD07B</strong></p>
<p>
bg class: <strong>rtds-bg-bando-in-attivazione</strong>
</p>
<p>
text class: <strong>rtds-text-bando-in-attivazione</strong>
</p>
<p>
border class: <strong>rtds-border-bando-in-attivazione</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-bando-in-attivazione rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>archiviato</strong></h3>
<p><strong>#1F2937</strong></p>
<p>
bg class: <strong>rtds-bg-archiviato</strong>
</p>
<p>
text class: <strong>rtds-text-archiviato</strong>
</p>
<p>
border class: <strong>rtds-border-archiviato</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-archiviato rtds-flex-1"></div>
</div>
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>focusring</strong></h3>
<p><strong>#025ECC</strong></p>
<p>
bg class: <strong>rtds-bg-focusring</strong>
</p>
<p>
text class: <strong></strong>
</p>
<p>
border class: <strong>rtds-outline-focusring</strong>
</p>
</div>
<div class="rtds-h-20 rtds-bg-focusring rtds-flex-1"></div>
</div>
</div>
</div>
</div>
</div>
<div class="rtds-py-6 rtds-space-y-8">
<div class="rtds-px-6">
<h1 class="rtds-text-2xl rtds-font-bold">Colors</h1>
<p>Base color scheme.</p>
</div>
<div class="rtds-p-6 rtds-grid rtds-grid-cols-2 rtds-gap-10">
{% for color in colors %}
<div class="">
<h2 class="rtds-text-xl rtds-mb-2"><strong>{{ color.name }}</strong></h2>
<div class="rtds-grid rtds-gap-8">
{% for hue in color.hues %}
<div class="rtds-flex rtds-gap-4">
<div class="rtds-w-1/3">
<h3 class="rtds-text-md"><strong>{{ hue.name }}</strong></h3>
<p><strong>{{ hue.hex }}</strong></p>
<p>
bg class: <strong>{{ hue.class }}</strong>
</p>
<p>
text class: <strong>{{ hue.textclass }}</strong>
</p>
<p>
border class: <strong>{{ hue.borderclass }}</strong>
</p>
</div>
<div class="rtds-h-20 {{ hue.class }} rtds-flex-1"></div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
{
"colors": [
{
"name": "Base and Transparency",
"hues": [
{
"name": "white",
"class": "rtds-bg-white",
"textclass": "rtds-text-white",
"borderclass": "rtds-border-white"
},
{
"name": "white/50",
"class": "rtds-bg-white/50"
},
{
"name": "white/25",
"class": "rtds-bg-white/25"
},
{
"name": "black",
"class": "rtds-bg-black"
},
{
"name": "black/50",
"class": "rtds-bg-black/50"
},
{
"name": "black/25",
"class": "rtds-bg-black/25"
}
]
},
{
"name": "Brand",
"hues": [
{
"name": "brand-00",
"class": "rtds-bg-brand-00",
"hex": "#D0131A",
"textclass": "rtds-text-brand-00",
"borderclass": "rtds-border-brand-00"
},
{
"name": "brand-01",
"class": "rtds-bg-brand-01",
"hex": "#2B2B2B",
"textclass": "rtds-text-brand-01",
"borderclass": "rtds-border-brand-01"
}
]
},
{
"name": "Primary",
"hues": [
{
"name": "primary-50",
"hex": "#FEDBDD",
"class": "rtds-bg-primary-50",
"textclass": "rtds-text-primary-50",
"borderclass": "rtds-border-primary-50"
},
{
"name": "primary-100",
"hex": "#F5B9BB",
"class": "rtds-bg-primary-100",
"textclass": "rtds-text-primary-100",
"borderclass": "rtds-border-primary-100"
},
{
"name": "primary-200",
"hex": "#E7898C",
"class": "rtds-bg-primary-200",
"textclass": "rtds-text-primary-200",
"borderclass": "rtds-border-primary-200"
},
{
"name": "primary-300",
"hex": "#E06266",
"class": "rtds-bg-primary-300",
"textclass": "rtds-text-primary-300",
"borderclass": "rtds-border-primary-300"
},
{
"name": "primary-400",
"hex": "#D83A40",
"class": "rtds-bg-primary-400",
"textclass": "rtds-text-primary-400",
"borderclass": "rtds-border-primary-400"
},
{
"name": "primary-500",
"hex": "#D0131A",
"class": "rtds-bg-primary-500",
"textclass": "rtds-text-primary-500",
"borderclass": "rtds-border-primary-500"
},
{
"name": "primary-600",
"hex": "#AD1016",
"class": "rtds-bg-primary-600",
"textclass": "rtds-text-primary-600",
"borderclass": "rtds-border-primary-600"
},
{
"name": "primary-700",
"hex": "#8B0D11",
"class": "rtds-bg-primary-700",
"textclass": "rtds-text-primary-700",
"borderclass": "rtds-border-primary-700"
},
{
"name": "primary-800",
"hex": "#680A0D",
"class": "rtds-bg-primary-800",
"textclass": "rtds-text-primary-800",
"borderclass": "rtds-border-primary-800"
},
{
"name": "primary-900",
"hex": "#450609",
"class": "rtds-bg-primary-900",
"textclass": "rtds-text-primary-900",
"borderclass": "rtds-border-primary-900"
}
]
},
{
"name": "Secondary",
"hues": [
{
"name": "secondary-50",
"hex": "#D6DFEC",
"class": "rtds-bg-secondary-50",
"textclass": "rtds-text-secondary-50",
"borderclass": "rtds-border-secondary-50"
},
{
"name": "secondary-100",
"hex": "#BAC9DF",
"class": "rtds-bg-secondary-100",
"textclass": "rtds-text-secondary-100",
"borderclass": "rtds-border-secondary-100"
},
{
"name": "secondary-200",
"hex": "#97AECF",
"class": "rtds-bg-secondary-200",
"textclass": "rtds-text-secondary-200",
"borderclass": "rtds-border-secondary-200"
},
{
"name": "secondary-300",
"hex": "#7593BF",
"class": "rtds-bg-secondary-300",
"textclass": "rtds-text-secondary-300",
"borderclass": "rtds-border-secondary-300"
},
{
"name": "secondary-400",
"hex": "#5378AF",
"class": "rtds-bg-secondary-400",
"textclass": "rtds-text-secondary-400",
"borderclass": "rtds-border-secondary-400"
},
{
"name": "secondary-500",
"hex": "#305D9F",
"class": "rtds-bg-secondary-500",
"textclass": "rtds-text-secondary-500",
"borderclass": "rtds-border-secondary-500"
},
{
"name": "secondary-600",
"hex": "#284E84",
"class": "rtds-bg-secondary-600",
"textclass": "rtds-text-secondary-600",
"borderclass": "rtds-border-secondary-600"
},
{
"name": "secondary-700",
"hex": "#203E6A",
"class": "rtds-bg-secondary-700",
"textclass": "rtds-text-secondary-700",
"borderclass": "rtds-border-secondary-700"
},
{
"name": "secondary-800",
"hex": "#182F50",
"class": "rtds-bg-secondary-800",
"borderclass": "rtds-border-secondary-800",
"textclass": "rtds-text-secondary-800"
},
{
"name": "secondary-900",
"hex": "#101F35",
"class": "rtds-bg-secondary-900",
"textclass": "rtds-text-secondary-900",
"borderclass": "rtds-border-secondary-900"
}
]
},
{
"name": "Neutral",
"hues": [
{
"name": "neutral-50",
"hex": "#F7F9FB",
"class": "rtds-bg-neutral-50",
"borderclass": "rtds-border-neutral-50",
"textclass": "rtds-text-neutral-50"
},
{
"name": "neutral-100",
"hex": "#F1F4F9",
"class": "rtds-bg-neutral-100",
"borderclass": "rtds-border-neutral-100",
"textclass": "rtds-text-neutral-100"
},
{
"name": "neutral-200",
"hex": "#EAEFF5",
"class": "rtds-bg-neutral-200",
"borderclass": "rtds-border-neutral-200",
"textclass": "rtds-text-neutral-200"
},
{
"name": "neutral-300",
"hex": "#E4EAF2",
"class": "rtds-bg-neutral-300",
"borderclass": "rtds-border-neutral-300",
"textclass": "rtds-text-neutral-300"
},
{
"name": "neutral-400",
"hex": "#DDE4EF",
"class": "rtds-bg-neutral-400",
"borderclass": "rtds-border-neutral-400",
"textclass": "rtds-text-neutral-400"
},
{
"name": "neutral-500",
"hex": "#D6DFEC",
"class": "rtds-bg-neutral-500",
"borderclass": "rtds-border-neutral-500",
"textclass": "rtds-text-neutral-500"
},
{
"name": "neutral-600",
"hex": "#B2BAC5",
"class": "rtds-bg-neutral-600",
"borderclass": "rtds-border-neutral-600",
"textclass": "rtds-text-neutral-600"
},
{
"name": "neutral-700",
"hex": "#737B84",
"class": "rtds-bg-neutral-700",
"borderclass": "rtds-border-neutral-700",
"textclass": "rtds-text-neutral-700"
},
{
"name": "neutral-800",
"hex": "#474A4F",
"class": "rtds-bg-neutral-800",
"borderclass": "rtds-border-neutral-800",
"textclass": "rtds-text-neutral-800"
},
{
"name": "neutral-900",
"hex": "#2B2D2F",
"class": "rtds-bg-neutral-900",
"borderclass": "rtds-border-neutral-900",
"textclass": "rtds-text-neutral-900"
}
]
},
{
"name": "Support",
"hues": [
{
"name": "success-dark",
"hex": "#166534",
"class": "rtds-bg-success-dark",
"borderclass": "rtds-border-success-dark",
"textclass": "rtds-text-success-dark"
},
{
"name": "success",
"hex": "#16a34a",
"class": "rtds-bg-success",
"borderclass": "rtds-border-success",
"textclass": "rtds-text-success"
},
{
"name": "success-light",
"hex": "#bbf7d0",
"class": "rtds-bg-success-light",
"borderclass": "rtds-border-success-light",
"textclass": "rtds-text-success-light"
},
{
"name": "error-dark",
"hex": "#991b1b",
"class": "rtds-bg-error-dark",
"borderclass": "rtds-border-error-dark",
"textclass": "rtds-text-error-dark"
},
{
"name": "error",
"hex": "#ef4444",
"class": "rtds-bg-error",
"borderclass": "rtds-border-error",
"textclass": "rtds-text-error"
},
{
"name": "error-light",
"hex": "#fecaca",
"class": "rtds-bg-error-light",
"borderclass": "rtds-border-error-light",
"textclass": "rtds-text-error-light"
},
{
"name": "warn-dark",
"hex": "#9a3412",
"class": "rtds-bg-warn-dark",
"borderclass": "rtds-border-warn-dark",
"textclass": "rtds-text-warn-dark"
},
{
"name": "warn",
"hex": "#f97316",
"class": "rtds-bg-warn"
},
{
"name": "warn-light",
"hex": "#fed7aa",
"class": "rtds-bg-warn-light",
"borderclass": "rtds-border-warn-light",
"textclass": "rtds-text-warn-light"
},
{
"name": "info-dark",
"hex": "#075985",
"class": "rtds-bg-info-dark",
"borderclass": "rtds-border-info-dark",
"textclass": "rtds-text-info-dark"
},
{
"name": "info",
"hex": "#0ea5e9",
"class": "rtds-bg-info",
"borderclass": "rtds-border-info",
"textclass": "rtds-text-info"
},
{
"name": "info-light",
"hex": "#bae6fd",
"class": "rtds-bg-info-light",
"borderclass": "rtds-border-info-light",
"textclass": "rtds-text-info-light"
},
{
"name": "allerta-verde",
"hex": "#92D048",
"class": "rtds-bg-allerta-verde",
"borderclass": "rtds-border-allerta-verde",
"textclass": "rtds-text-allerta-verde"
},
{
"name": "allerta-giallo",
"hex": "#FFFE54",
"class": "rtds-bg-allerta-giallo",
"borderclass": "rtds-border-allerta-giallo",
"textclass": "rtds-text-allerta-giallo"
},
{
"name": "allerta-arancione",
"hex": "#F2A83B",
"class": "rtds-bg-allerta-arancione",
"borderclass": "rtds-border-allerta-arancione",
"textclass": "rtds-text-allerta-arancione"
},
{
"name": "allerta-rosso",
"hex": "#EA3223",
"class": "rtds-bg-allerta-rosso",
"borderclass": "rtds-border-allerta-rosso",
"textclass": "rtds-text-allerta-rosso"
}
]
},
{
"name": "Salvia",
"hues": [
{
"name": "salvia",
"class": "rtds-bg-salvia",
"hex": "#4A7769",
"borderclass": "rtds-border-salvia",
"textclass": "rtds-text-salvia"
}
]
},
{
"name": "Others",
"hues": [
{
"name": "bando-aperto",
"class": "rtds-bg-bando-aperto",
"hex": "#A1CCB1",
"borderclass": "rtds-border-bando-aperto",
"textclass": "rtds-text-bando-aperto"
},
{
"name": "bando-in-attivazione",
"class": "rtds-bg-bando-in-attivazione",
"hex": "#FCD07B",
"borderclass": "rtds-border-bando-in-attivazione",
"textclass": "rtds-text-bando-in-attivazione"
},
{
"name": "archiviato",
"class": "rtds-bg-archiviato",
"hex": "#1F2937",
"borderclass": "rtds-border-archiviato",
"textclass": "rtds-text-archiviato"
},
{
"name": "focusring",
"class": "rtds-bg-focusring",
"borderclass": "rtds-outline-focusring",
"hex": "#025ECC"
}
]
}
]
}