<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"
}
]
}
]
}
Palette cromatica completa del Design System RTDS. Tutti i colori sono definiti come CSS Custom Properties in public/css/custom-properties.css e consumati da Tailwind tramite tailwind.config.js.
Tutte le classi di colore usano il prefisso rtds-:
rtds-text-{colore}rtds-bg-{colore}rtds-border-{colore}Nota: Preferire sempre le utility semantiche di
02-semantic-color-utilitiesrispetto ai token diretti. I token diretti vanno usati solo quando serve un valore preciso non coperto dalle utility.
| Token | Utilizzo |
|---|---|
white |
Sfondo bianco puro |
white/50 |
Bianco semi-trasparente (50%) — overlay su immagini |
white/25 |
Bianco semi-trasparente (25%) |
black |
Testo/sfondo nero puro |
black/50 |
Nero semi-trasparente (50%) — overlay scuro |
black/25 |
Nero semi-trasparente (25%) |
| Token | Hex | Utilizzo |
|---|---|---|
brand-00 |
#D0131A |
Rosso istituzionale Regione Toscana |
brand-01 |
#2B2B2B |
Grigio scuro brand |
Usare per CTA, pulsanti principali, link, elementi interattivi.
In genere usare rtds-content-primary / rtds-background-primary invece dei token diretti.
| Token | Utilizzo tipico |
|---|---|
primary-50 |
Sfondo hover molto leggero |
primary-100 |
Sfondo hover leggero |
primary-200 |
Sfondo active leggero |
primary-300 |
Bordi e accenti leggeri |
primary-400 |
Accento chiaro |
primary-500 |
Colore primario principale |
primary-600 |
Hover su primary-500 |
primary-700 |
Active su primary-500 |
primary-800 |
Tono scuro |
primary-900 |
Tono molto scuro |
Usare per elementi secondari, intestazioni, badge informativi.
| Token | Utilizzo tipico |
|---|---|
secondary-50 |
Sfondo leggero |
secondary-100 |
Sfondo hover |
secondary-200 |
Sfondo active |
secondary-300 |
Bordi e accenti |
secondary-400 |
Accento chiaro |
secondary-500 |
Colore secondario principale |
secondary-600 |
Hover |
secondary-700 |
Active |
secondary-800 |
Tono scuro |
secondary-900 |
Tono molto scuro |
Usare per testi, sfondi, bordi, superfici.
| Token | Utilizzo tipico |
|---|---|
neutral-50 |
Sfondo pagina, superfici chiare |
neutral-100 |
Sfondo card, righe alternate |
neutral-200 |
Bordi leggeri, divisori |
neutral-300 |
Bordi medi |
neutral-400 |
Placeholder, icone disabilitate |
neutral-500 |
Testo secondario, label |
neutral-600 |
Testo disabilitato |
neutral-700 |
Testo terziario |
neutral-800 |
Testo secondario scuro |
neutral-900 |
Testo principale |
Per messaggi e feedback: successo, errore, avviso, informazione.
| Token | Utilizzo |
|---|---|
success-dark |
Testo messaggio successo |
success |
Icona, bordo area successo |
success-light |
Sfondo area successo |
error-dark |
Testo messaggio errore |
error |
Icona, bordo area errore |
error-light |
Sfondo area errore |
warn-dark |
Testo messaggio avviso |
warn |
Icona, bordo area avviso |
warn-light |
Sfondo area avviso |
info-dark |
Testo messaggio informativo |
info |
Icona, bordo area info |
info-light |
Sfondo area info |
Per il componente meteo del portale regionale.
| Token | Significato |
|---|---|
allerta-verde |
Nessuna allerta |
allerta-giallo |
Allerta ordinaria |
allerta-arancione |
Allerta moderata |
allerta-rosso |
Allerta elevata |
| Token | Utilizzo |
|---|---|
salvia |
Verde salvia — accento naturale per tema ambiente/salute |
bando-aperto |
Chip stato bando aperto |
bando-in-attivazione |
Chip stato bando in attivazione |
archiviato |
Chip stato archiviato/chiuso |
focusring |
Colore focus ring per accessibilità tastiera |
| Token | Rete |
|---|---|
social-facebook |
|
social-instagram |
|
social-linkedin |
|
social-x |
X (ex Twitter) |
social-youtube |
YouTube |
Tutti i colori sono definiti come variabili CSS in public/css/custom-properties.css nel formato --color-{gruppo}-{scala}. I CMS ospitanti possono sovrascriverle senza modificare il markup HTML.
| Variabile | Hex |
|---|---|
--color-primary-50 |
#FEDBDD |
--color-primary-100 |
#F5B9BB |
--color-primary-200 |
#E7898C |
--color-primary-300 |
#E06266 |
--color-primary-400 |
#D83A40 |
--color-primary-500 |
#D0131A |
--color-primary-600 |
#AD1016 |
--color-primary-700 |
#8B0D11 |
--color-primary-800 |
#680A0D |
--color-primary-900 |
#450609 |
| Variabile | Hex |
|---|---|
--color-secondary-50 |
#D6DFEC |
--color-secondary-100 |
#BAC9DF |
--color-secondary-200 |
#97AECF |
--color-secondary-300 |
#7593BF |
--color-secondary-400 |
#5378AF |
--color-secondary-500 |
#305D9F |
--color-secondary-600 |
#284E84 |
--color-secondary-700 |
#203E6A |
--color-secondary-800 |
#182F50 |
--color-secondary-900 |
#101F35 |
| Variabile | Hex |
|---|---|
--color-neutral-50 |
#F7F9FB |
--color-neutral-100 |
#F1F4F9 |
--color-neutral-200 |
#EAEFF5 |
--color-neutral-300 |
#E4EAF2 |
--color-neutral-400 |
#DDE4EF |
--color-neutral-500 |
#D6DFEC |
--color-neutral-600 |
#B2BAC5 |
--color-neutral-700 |
#737B84 |
--color-neutral-800 |
#474A4F |
--color-neutral-900 |
#2B2D2F |
| Variabile | Hex |
|---|---|
--color-success-dark |
#166534 |
--color-success |
#16a34a |
--color-success-light |
#bbf7d0 |
--color-error-dark |
#991b1b |
--color-error |
#ef4444 |
--color-error-light |
#fecaca |
--color-warn-dark |
#9a3412 |
--color-warn |
#f97316 |
--color-warn-light |
#fed7aa |
--color-info-dark |
#075985 |
--color-info |
#0ea5e9 |
--color-info-light |
#bae6fd |
| Variabile | Hex |
|---|---|
--color-allerta-verde |
#92D048 |
--color-allerta-giallo |
#FFFE54 |
--color-allerta-arancione |
#F2A83B |
--color-allerta-rosso |
#EA3223 |
| Variabile | Hex |
|---|---|
--color-brand-00 |
#D0131A |
--color-brand-01 |
#2B2B2B |
--color-salvia |
#4A7769 |
--color-bando-aperto |
#A1CCB1 |
--color-bando-in-attivazione |
#FCD07B |
--color-archiviato |
#1F2937 |
--color-focusring |
#025ECC |
| Variabile | Hex |
|---|---|
--color-social-facebook |
#1877F2 |
--color-social-instagram |
#5851db |
--color-social-linkedin |
#0077B5 |
--color-social-x |
#000000 |
--color-social-youtube |
#FF0000 |