@govbr-ds/core

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/> <title>Utilitário de Cores</title>  <link rel="stylesheet" href="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css"/>  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&display=swap"/>  <link rel="stylesheet" href="../../core.css"/>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/> </head> <body> <div class="container-fluid"> <p class="h4 mt-5">Estados</p> <div> <div class="p-1 d-inline-block m-1 bg-interactive">bg-interactive</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-interactive">border-interactive</div> <div class="p-1 d-inline-block m-1 text-interactive">text-interactive</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-danger">bg-danger</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-danger">border-danger</div> <div class="p-1 d-inline-block m-1 text-danger">text-danger</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-warning">bg-warning</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-warning">border-warning</div> <div class="p-1 d-inline-block m-1 text-warning">text-warning</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-success">bg-success</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-success">border-success</div> <div class="p-1 d-inline-block m-1 text-success">text-success</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-info">bg-info</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-info">border-info</div> <div class="p-1 d-inline-block m-1 text-info">text-info</div> </div> <p class="h4 mt-5 text-capitalize">pure</p> <div> <div class="p-1 d-inline-block m-1 bg-pure-100">bg-pure-100</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-pure-100">border-pure-100</div> <div class="p-1 d-inline-block m-1 text-pure-100">text-pure-100</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-pure-0">bg-pure-0</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-pure-0">border-pure-0</div> <div class="p-1 d-inline-block m-1 text-pure-0">text-pure-0</div> </div> <p class="h4 mt-5 text-capitalize">gray</p> <div> <div class="p-1 d-inline-block m-1 bg-gray-90">bg-gray-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-90">border-gray-90</div> <div class="p-1 d-inline-block m-1 text-gray-90">text-gray-90</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-80">bg-gray-80</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-80">border-gray-80</div> <div class="p-1 d-inline-block m-1 text-gray-80">text-gray-80</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-70">bg-gray-70</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-70">border-gray-70</div> <div class="p-1 d-inline-block m-1 text-gray-70">text-gray-70</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-60">bg-gray-60</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-60">border-gray-60</div> <div class="p-1 d-inline-block m-1 text-gray-60">text-gray-60</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-50">bg-gray-50</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-50">border-gray-50</div> <div class="p-1 d-inline-block m-1 text-gray-50">text-gray-50</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-40">bg-gray-40</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-40">border-gray-40</div> <div class="p-1 d-inline-block m-1 text-gray-40">text-gray-40</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-20">bg-gray-20</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-20">border-gray-20</div> <div class="p-1 d-inline-block m-1 text-gray-20">text-gray-20</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-10">bg-gray-10</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-10">border-gray-10</div> <div class="p-1 d-inline-block m-1 text-gray-10">text-gray-10</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-5">bg-gray-5</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-5">border-gray-5</div> <div class="p-1 d-inline-block m-1 text-gray-5">text-gray-5</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-4">bg-gray-4</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-4">border-gray-4</div> <div class="p-1 d-inline-block m-1 text-gray-4">text-gray-4</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-3">bg-gray-3</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-3">border-gray-3</div> <div class="p-1 d-inline-block m-1 text-gray-3">text-gray-3</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-2">bg-gray-2</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-2">border-gray-2</div> <div class="p-1 d-inline-block m-1 text-gray-2">text-gray-2</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-1">bg-gray-1</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-1">border-gray-1</div> <div class="p-1 d-inline-block m-1 text-gray-1">text-gray-1</div> </div> <p class="h4 mt-5 text-capitalize">gray-cool</p> <div> <div class="p-1 d-inline-block m-1 bg-gray-cool-90">bg-gray-cool-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-cool-90">border-gray-cool-90</div> <div class="p-1 d-inline-block m-1 text-gray-cool-90">text-gray-cool-90</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-cool-80">bg-gray-cool-80</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-cool-80">border-gray-cool-80</div> <div class="p-1 d-inline-block m-1 text-gray-cool-80">text-gray-cool-80</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-cool-70">bg-gray-cool-70</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-cool-70">border-gray-cool-70</div> <div class="p-1 d-inline-block m-1 text-gray-cool-70">text-gray-cool-70</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-cool-60">bg-gray-cool-60</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-cool-60">border-gray-cool-60</div> <div class="p-1 d-inline-block m-1 text-gray-cool-60">text-gray-cool-60</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-cool-50">bg-gray-cool-50</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-cool-50">border-gray-cool-50</div> <div class="p-1 d-inline-block m-1 text-gray-cool-50">text-gray-cool-50</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-cool-40">bg-gray-cool-40</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-cool-40">border-gray-cool-40</div> <div class="p-1 d-inline-block m-1 text-gray-cool-40">text-gray-cool-40</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-cool-20">bg-gray-cool-20</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-cool-20">border-gray-cool-20</div> <div class="p-1 d-inline-block m-1 text-gray-cool-20">text-gray-cool-20</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-cool-10">bg-gray-cool-10</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-cool-10">border-gray-cool-10</div> <div class="p-1 d-inline-block m-1 text-gray-cool-10">text-gray-cool-10</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-cool-5">bg-gray-cool-5</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-cool-5">border-gray-cool-5</div> <div class="p-1 d-inline-block m-1 text-gray-cool-5">text-gray-cool-5</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-cool-4">bg-gray-cool-4</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-cool-4">border-gray-cool-4</div> <div class="p-1 d-inline-block m-1 text-gray-cool-4">text-gray-cool-4</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-cool-3">bg-gray-cool-3</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-cool-3">border-gray-cool-3</div> <div class="p-1 d-inline-block m-1 text-gray-cool-3">text-gray-cool-3</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-cool-2">bg-gray-cool-2</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-cool-2">border-gray-cool-2</div> <div class="p-1 d-inline-block m-1 text-gray-cool-2">text-gray-cool-2</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-cool-1">bg-gray-cool-1</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-cool-1">border-gray-cool-1</div> <div class="p-1 d-inline-block m-1 text-gray-cool-1">text-gray-cool-1</div> </div> <p class="h4 mt-5 text-capitalize">gray-warm</p> <div> <div class="p-1 d-inline-block m-1 bg-gray-warm-90">bg-gray-warm-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-warm-90">border-gray-warm-90</div> <div class="p-1 d-inline-block m-1 text-gray-warm-90">text-gray-warm-90</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-warm-80">bg-gray-warm-80</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-warm-80">border-gray-warm-80</div> <div class="p-1 d-inline-block m-1 text-gray-warm-80">text-gray-warm-80</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-warm-70">bg-gray-warm-70</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-warm-70">border-gray-warm-70</div> <div class="p-1 d-inline-block m-1 text-gray-warm-70">text-gray-warm-70</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-warm-60">bg-gray-warm-60</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-warm-60">border-gray-warm-60</div> <div class="p-1 d-inline-block m-1 text-gray-warm-60">text-gray-warm-60</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-warm-50">bg-gray-warm-50</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-warm-50">border-gray-warm-50</div> <div class="p-1 d-inline-block m-1 text-gray-warm-50">text-gray-warm-50</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-warm-40">bg-gray-warm-40</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-warm-40">border-gray-warm-40</div> <div class="p-1 d-inline-block m-1 text-gray-warm-40">text-gray-warm-40</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-warm-20">bg-gray-warm-20</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-warm-20">border-gray-warm-20</div> <div class="p-1 d-inline-block m-1 text-gray-warm-20">text-gray-warm-20</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-warm-10">bg-gray-warm-10</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-warm-10">border-gray-warm-10</div> <div class="p-1 d-inline-block m-1 text-gray-warm-10">text-gray-warm-10</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-warm-5">bg-gray-warm-5</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-warm-5">border-gray-warm-5</div> <div class="p-1 d-inline-block m-1 text-gray-warm-5">text-gray-warm-5</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-warm-4">bg-gray-warm-4</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-warm-4">border-gray-warm-4</div> <div class="p-1 d-inline-block m-1 text-gray-warm-4">text-gray-warm-4</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-warm-3">bg-gray-warm-3</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-warm-3">border-gray-warm-3</div> <div class="p-1 d-inline-block m-1 text-gray-warm-3">text-gray-warm-3</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-warm-2">bg-gray-warm-2</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-warm-2">border-gray-warm-2</div> <div class="p-1 d-inline-block m-1 text-gray-warm-2">text-gray-warm-2</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gray-warm-1">bg-gray-warm-1</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gray-warm-1">border-gray-warm-1</div> <div class="p-1 d-inline-block m-1 text-gray-warm-1">text-gray-warm-1</div> </div> <p class="h4 mt-5 text-capitalize">blue</p> <div> <div class="p-1 d-inline-block m-1 bg-blue-90">bg-blue-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-90">border-blue-90</div> <div class="p-1 d-inline-block m-1 text-blue-90">text-blue-90</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-80">bg-blue-80</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-80">border-blue-80</div> <div class="p-1 d-inline-block m-1 text-blue-80">text-blue-80</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-70">bg-blue-70</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-70">border-blue-70</div> <div class="p-1 d-inline-block m-1 text-blue-70">text-blue-70</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-60">bg-blue-60</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-60">border-blue-60</div> <div class="p-1 d-inline-block m-1 text-blue-60">text-blue-60</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-50">bg-blue-50</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-50">border-blue-50</div> <div class="p-1 d-inline-block m-1 text-blue-50">text-blue-50</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-40">bg-blue-40</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-40">border-blue-40</div> <div class="p-1 d-inline-block m-1 text-blue-40">text-blue-40</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-20">bg-blue-20</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-20">border-blue-20</div> <div class="p-1 d-inline-block m-1 text-blue-20">text-blue-20</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-10">bg-blue-10</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-10">border-blue-10</div> <div class="p-1 d-inline-block m-1 text-blue-10">text-blue-10</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-5">bg-blue-5</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-5">border-blue-5</div> <div class="p-1 d-inline-block m-1 text-blue-5">text-blue-5</div> </div> <p class="h4 mt-5 text-capitalize">blue-vivid</p> <div> <div class="p-1 d-inline-block m-1 bg-blue-vivid-90">bg-blue-vivid-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-vivid-90">border-blue-vivid-90</div> <div class="p-1 d-inline-block m-1 text-blue-vivid-90">text-blue-vivid-90</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-vivid-80">bg-blue-vivid-80</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-vivid-80">border-blue-vivid-80</div> <div class="p-1 d-inline-block m-1 text-blue-vivid-80">text-blue-vivid-80</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-vivid-70">bg-blue-vivid-70</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-vivid-70">border-blue-vivid-70</div> <div class="p-1 d-inline-block m-1 text-blue-vivid-70">text-blue-vivid-70</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-vivid-60">bg-blue-vivid-60</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-vivid-60">border-blue-vivid-60</div> <div class="p-1 d-inline-block m-1 text-blue-vivid-60">text-blue-vivid-60</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-vivid-50">bg-blue-vivid-50</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-vivid-50">border-blue-vivid-50</div> <div class="p-1 d-inline-block m-1 text-blue-vivid-50">text-blue-vivid-50</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-vivid-40">bg-blue-vivid-40</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-vivid-40">border-blue-vivid-40</div> <div class="p-1 d-inline-block m-1 text-blue-vivid-40">text-blue-vivid-40</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-vivid-20">bg-blue-vivid-20</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-vivid-20">border-blue-vivid-20</div> <div class="p-1 d-inline-block m-1 text-blue-vivid-20">text-blue-vivid-20</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-vivid-10">bg-blue-vivid-10</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-vivid-10">border-blue-vivid-10</div> <div class="p-1 d-inline-block m-1 text-blue-vivid-10">text-blue-vivid-10</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-vivid-5">bg-blue-vivid-5</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-vivid-5">border-blue-vivid-5</div> <div class="p-1 d-inline-block m-1 text-blue-vivid-5">text-blue-vivid-5</div> </div> <p class="h4 mt-5 text-capitalize">blue-cool</p> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-90">bg-blue-cool-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-90">border-blue-cool-90</div> <div class="p-1 d-inline-block m-1 text-blue-cool-90">text-blue-cool-90</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-80">bg-blue-cool-80</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-80">border-blue-cool-80</div> <div class="p-1 d-inline-block m-1 text-blue-cool-80">text-blue-cool-80</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-70">bg-blue-cool-70</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-70">border-blue-cool-70</div> <div class="p-1 d-inline-block m-1 text-blue-cool-70">text-blue-cool-70</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-60">bg-blue-cool-60</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-60">border-blue-cool-60</div> <div class="p-1 d-inline-block m-1 text-blue-cool-60">text-blue-cool-60</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-50">bg-blue-cool-50</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-50">border-blue-cool-50</div> <div class="p-1 d-inline-block m-1 text-blue-cool-50">text-blue-cool-50</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-40">bg-blue-cool-40</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-40">border-blue-cool-40</div> <div class="p-1 d-inline-block m-1 text-blue-cool-40">text-blue-cool-40</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-20">bg-blue-cool-20</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-20">border-blue-cool-20</div> <div class="p-1 d-inline-block m-1 text-blue-cool-20">text-blue-cool-20</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-10">bg-blue-cool-10</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-10">border-blue-cool-10</div> <div class="p-1 d-inline-block m-1 text-blue-cool-10">text-blue-cool-10</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-5">bg-blue-cool-5</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-5">border-blue-cool-5</div> <div class="p-1 d-inline-block m-1 text-blue-cool-5">text-blue-cool-5</div> </div> <p class="h4 mt-5 text-capitalize">blue-warm</p> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-90">bg-blue-warm-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-90">border-blue-warm-90</div> <div class="p-1 d-inline-block m-1 text-blue-warm-90">text-blue-warm-90</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-80">bg-blue-warm-80</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-80">border-blue-warm-80</div> <div class="p-1 d-inline-block m-1 text-blue-warm-80">text-blue-warm-80</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-70">bg-blue-warm-70</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-70">border-blue-warm-70</div> <div class="p-1 d-inline-block m-1 text-blue-warm-70">text-blue-warm-70</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-60">bg-blue-warm-60</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-60">border-blue-warm-60</div> <div class="p-1 d-inline-block m-1 text-blue-warm-60">text-blue-warm-60</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-50">bg-blue-warm-50</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-50">border-blue-warm-50</div> <div class="p-1 d-inline-block m-1 text-blue-warm-50">text-blue-warm-50</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-40">bg-blue-warm-40</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-40">border-blue-warm-40</div> <div class="p-1 d-inline-block m-1 text-blue-warm-40">text-blue-warm-40</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-20">bg-blue-warm-20</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-20">border-blue-warm-20</div> <div class="p-1 d-inline-block m-1 text-blue-warm-20">text-blue-warm-20</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-10">bg-blue-warm-10</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-10">border-blue-warm-10</div> <div class="p-1 d-inline-block m-1 text-blue-warm-10">text-blue-warm-10</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-5">bg-blue-warm-5</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-5">border-blue-warm-5</div> <div class="p-1 d-inline-block m-1 text-blue-warm-5">text-blue-warm-5</div> </div> <p class="h4 mt-5 text-capitalize">blue-cool-vivid</p> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-vivid-90">bg-blue-cool-vivid-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-vivid-90">border-blue-cool-vivid-90</div> <div class="p-1 d-inline-block m-1 text-blue-cool-vivid-90">text-blue-cool-vivid-90</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-vivid-80">bg-blue-cool-vivid-80</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-vivid-80">border-blue-cool-vivid-80</div> <div class="p-1 d-inline-block m-1 text-blue-cool-vivid-80">text-blue-cool-vivid-80</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-vivid-70">bg-blue-cool-vivid-70</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-vivid-70">border-blue-cool-vivid-70</div> <div class="p-1 d-inline-block m-1 text-blue-cool-vivid-70">text-blue-cool-vivid-70</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-vivid-60">bg-blue-cool-vivid-60</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-vivid-60">border-blue-cool-vivid-60</div> <div class="p-1 d-inline-block m-1 text-blue-cool-vivid-60">text-blue-cool-vivid-60</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-vivid-50">bg-blue-cool-vivid-50</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-vivid-50">border-blue-cool-vivid-50</div> <div class="p-1 d-inline-block m-1 text-blue-cool-vivid-50">text-blue-cool-vivid-50</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-vivid-40">bg-blue-cool-vivid-40</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-vivid-40">border-blue-cool-vivid-40</div> <div class="p-1 d-inline-block m-1 text-blue-cool-vivid-40">text-blue-cool-vivid-40</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-vivid-20">bg-blue-cool-vivid-20</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-vivid-20">border-blue-cool-vivid-20</div> <div class="p-1 d-inline-block m-1 text-blue-cool-vivid-20">text-blue-cool-vivid-20</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-vivid-10">bg-blue-cool-vivid-10</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-vivid-10">border-blue-cool-vivid-10</div> <div class="p-1 d-inline-block m-1 text-blue-cool-vivid-10">text-blue-cool-vivid-10</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-cool-vivid-5">bg-blue-cool-vivid-5</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-cool-vivid-5">border-blue-cool-vivid-5</div> <div class="p-1 d-inline-block m-1 text-blue-cool-vivid-5">text-blue-cool-vivid-5</div> </div> <p class="h4 mt-5 text-capitalize">blue-warm-vivid</p> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-vivid-90">bg-blue-warm-vivid-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-vivid-90">border-blue-warm-vivid-90</div> <div class="p-1 d-inline-block m-1 text-blue-warm-vivid-90">text-blue-warm-vivid-90</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-vivid-80">bg-blue-warm-vivid-80</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-vivid-80">border-blue-warm-vivid-80</div> <div class="p-1 d-inline-block m-1 text-blue-warm-vivid-80">text-blue-warm-vivid-80</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-vivid-70">bg-blue-warm-vivid-70</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-vivid-70">border-blue-warm-vivid-70</div> <div class="p-1 d-inline-block m-1 text-blue-warm-vivid-70">text-blue-warm-vivid-70</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-vivid-60">bg-blue-warm-vivid-60</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-vivid-60">border-blue-warm-vivid-60</div> <div class="p-1 d-inline-block m-1 text-blue-warm-vivid-60">text-blue-warm-vivid-60</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-vivid-50">bg-blue-warm-vivid-50</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-vivid-50">border-blue-warm-vivid-50</div> <div class="p-1 d-inline-block m-1 text-blue-warm-vivid-50">text-blue-warm-vivid-50</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-vivid-40">bg-blue-warm-vivid-40</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-vivid-40">border-blue-warm-vivid-40</div> <div class="p-1 d-inline-block m-1 text-blue-warm-vivid-40">text-blue-warm-vivid-40</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-vivid-20">bg-blue-warm-vivid-20</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-vivid-20">border-blue-warm-vivid-20</div> <div class="p-1 d-inline-block m-1 text-blue-warm-vivid-20">text-blue-warm-vivid-20</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-vivid-10">bg-blue-warm-vivid-10</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-vivid-10">border-blue-warm-vivid-10</div> <div class="p-1 d-inline-block m-1 text-blue-warm-vivid-10">text-blue-warm-vivid-10</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-blue-warm-vivid-5">bg-blue-warm-vivid-5</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-blue-warm-vivid-5">border-blue-warm-vivid-5</div> <div class="p-1 d-inline-block m-1 text-blue-warm-vivid-5">text-blue-warm-vivid-5</div> </div> <p class="h4 mt-5 text-capitalize">cyan</p> <div> <div class="p-1 d-inline-block m-1 bg-cyan-90">bg-cyan-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-90">border-cyan-90</div> <div class="p-1 d-inline-block m-1 text-cyan-90">text-cyan-90</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-cyan-80">bg-cyan-80</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-80">border-cyan-80</div> <div class="p-1 d-inline-block m-1 text-cyan-80">text-cyan-80</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-cyan-70">bg-cyan-70</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-70">border-cyan-70</div> <div class="p-1 d-inline-block m-1 text-cyan-70">text-cyan-70</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-cyan-60">bg-cyan-60</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-60">border-cyan-60</div> <div class="p-1 d-inline-block m-1 text-cyan-60">text-cyan-60</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-cyan-50">bg-cyan-50</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-50">border-cyan-50</div> <div class="p-1 d-inline-block m-1 text-cyan-50">text-cyan-50</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-cyan-40">bg-cyan-40</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-40">border-cyan-40</div> <div class="p-1 d-inline-block m-1 text-cyan-40">text-cyan-40</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-cyan-20">bg-cyan-20</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-20">border-cyan-20</div> <div class="p-1 d-inline-block m-1 text-cyan-20">text-cyan-20</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-cyan-10">bg-cyan-10</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-10">border-cyan-10</div> <div class="p-1 d-inline-block m-1 text-cyan-10">text-cyan-10</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-cyan-5">bg-cyan-5</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-5">border-cyan-5</div> <div class="p-1 d-inline-block m-1 text-cyan-5">text-cyan-5</div> </div> <p class="h4 mt-5 text-capitalize">cyan-vivid</p> <div> <div class="p-1 d-inline-block m-1 bg-cyan-vivid-90">bg-cyan-vivid-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-vivid-90">border-cyan-vivid-90</div> <div class="p-1 d-inline-block m-1 text-cyan-vivid-90">text-cyan-vivid-90</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-cyan-vivid-80">bg-cyan-vivid-80</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-vivid-80">border-cyan-vivid-80</div> <div class="p-1 d-inline-block m-1 text-cyan-vivid-80">text-cyan-vivid-80</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-cyan-vivid-70">bg-cyan-vivid-70</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-vivid-70">border-cyan-vivid-70</div> <div class="p-1 d-inline-block m-1 text-cyan-vivid-70">text-cyan-vivid-70</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-cyan-vivid-60">bg-cyan-vivid-60</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-vivid-60">border-cyan-vivid-60</div> <div class="p-1 d-inline-block m-1 text-cyan-vivid-60">text-cyan-vivid-60</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-cyan-vivid-50">bg-cyan-vivid-50</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-vivid-50">border-cyan-vivid-50</div> <div class="p-1 d-inline-block m-1 text-cyan-vivid-50">text-cyan-vivid-50</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-cyan-vivid-40">bg-cyan-vivid-40</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-vivid-40">border-cyan-vivid-40</div> <div class="p-1 d-inline-block m-1 text-cyan-vivid-40">text-cyan-vivid-40</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-cyan-vivid-20">bg-cyan-vivid-20</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-vivid-20">border-cyan-vivid-20</div> <div class="p-1 d-inline-block m-1 text-cyan-vivid-20">text-cyan-vivid-20</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-cyan-vivid-10">bg-cyan-vivid-10</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-vivid-10">border-cyan-vivid-10</div> <div class="p-1 d-inline-block m-1 text-cyan-vivid-10">text-cyan-vivid-10</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-cyan-vivid-5">bg-cyan-vivid-5</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-cyan-vivid-5">border-cyan-vivid-5</div> <div class="p-1 d-inline-block m-1 text-cyan-vivid-5">text-cyan-vivid-5</div> </div> <p class="h4 mt-5 text-capitalize">gold</p> <div> <div class="p-1 d-inline-block m-1 bg-gold-90">bg-gold-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-90">border-gold-90</div> <div class="p-1 d-inline-block m-1 text-gold-90">text-gold-90</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gold-80">bg-gold-80</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-80">border-gold-80</div> <div class="p-1 d-inline-block m-1 text-gold-80">text-gold-80</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gold-70">bg-gold-70</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-70">border-gold-70</div> <div class="p-1 d-inline-block m-1 text-gold-70">text-gold-70</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gold-60">bg-gold-60</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-60">border-gold-60</div> <div class="p-1 d-inline-block m-1 text-gold-60">text-gold-60</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gold-50">bg-gold-50</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-50">border-gold-50</div> <div class="p-1 d-inline-block m-1 text-gold-50">text-gold-50</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gold-40">bg-gold-40</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-40">border-gold-40</div> <div class="p-1 d-inline-block m-1 text-gold-40">text-gold-40</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gold-20">bg-gold-20</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-20">border-gold-20</div> <div class="p-1 d-inline-block m-1 text-gold-20">text-gold-20</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gold-10">bg-gold-10</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-10">border-gold-10</div> <div class="p-1 d-inline-block m-1 text-gold-10">text-gold-10</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gold-5">bg-gold-5</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-5">border-gold-5</div> <div class="p-1 d-inline-block m-1 text-gold-5">text-gold-5</div> </div> <p class="h4 mt-5 text-capitalize">gold-vivid</p> <div> <div class="p-1 d-inline-block m-1 bg-gold-vivid-90">bg-gold-vivid-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-vivid-90">border-gold-vivid-90</div> <div class="p-1 d-inline-block m-1 text-gold-vivid-90">text-gold-vivid-90</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gold-vivid-80">bg-gold-vivid-80</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-vivid-80">border-gold-vivid-80</div> <div class="p-1 d-inline-block m-1 text-gold-vivid-80">text-gold-vivid-80</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gold-vivid-70">bg-gold-vivid-70</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-vivid-70">border-gold-vivid-70</div> <div class="p-1 d-inline-block m-1 text-gold-vivid-70">text-gold-vivid-70</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gold-vivid-60">bg-gold-vivid-60</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-vivid-60">border-gold-vivid-60</div> <div class="p-1 d-inline-block m-1 text-gold-vivid-60">text-gold-vivid-60</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gold-vivid-50">bg-gold-vivid-50</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-vivid-50">border-gold-vivid-50</div> <div class="p-1 d-inline-block m-1 text-gold-vivid-50">text-gold-vivid-50</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gold-vivid-40">bg-gold-vivid-40</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-vivid-40">border-gold-vivid-40</div> <div class="p-1 d-inline-block m-1 text-gold-vivid-40">text-gold-vivid-40</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gold-vivid-20">bg-gold-vivid-20</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-vivid-20">border-gold-vivid-20</div> <div class="p-1 d-inline-block m-1 text-gold-vivid-20">text-gold-vivid-20</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gold-vivid-10">bg-gold-vivid-10</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-vivid-10">border-gold-vivid-10</div> <div class="p-1 d-inline-block m-1 text-gold-vivid-10">text-gold-vivid-10</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-gold-vivid-5">bg-gold-vivid-5</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-gold-vivid-5">border-gold-vivid-5</div> <div class="p-1 d-inline-block m-1 text-gold-vivid-5">text-gold-vivid-5</div> </div> <p class="h4 mt-5 text-capitalize">green</p> <div> <div class="p-1 d-inline-block m-1 bg-green-90">bg-green-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-90">border-green-90</div> <div class="p-1 d-inline-block m-1 text-green-90">text-green-90</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-80">bg-green-80</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-80">border-green-80</div> <div class="p-1 d-inline-block m-1 text-green-80">text-green-80</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-70">bg-green-70</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-70">border-green-70</div> <div class="p-1 d-inline-block m-1 text-green-70">text-green-70</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-60">bg-green-60</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-60">border-green-60</div> <div class="p-1 d-inline-block m-1 text-green-60">text-green-60</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-50">bg-green-50</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-50">border-green-50</div> <div class="p-1 d-inline-block m-1 text-green-50">text-green-50</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-40">bg-green-40</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-40">border-green-40</div> <div class="p-1 d-inline-block m-1 text-green-40">text-green-40</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-20">bg-green-20</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-20">border-green-20</div> <div class="p-1 d-inline-block m-1 text-green-20">text-green-20</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-10">bg-green-10</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-10">border-green-10</div> <div class="p-1 d-inline-block m-1 text-green-10">text-green-10</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-5">bg-green-5</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-5">border-green-5</div> <div class="p-1 d-inline-block m-1 text-green-5">text-green-5</div> </div> <p class="h4 mt-5 text-capitalize">green-vivid</p> <div> <div class="p-1 d-inline-block m-1 bg-green-vivid-90">bg-green-vivid-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-vivid-90">border-green-vivid-90</div> <div class="p-1 d-inline-block m-1 text-green-vivid-90">text-green-vivid-90</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-vivid-80">bg-green-vivid-80</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-vivid-80">border-green-vivid-80</div> <div class="p-1 d-inline-block m-1 text-green-vivid-80">text-green-vivid-80</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-vivid-70">bg-green-vivid-70</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-vivid-70">border-green-vivid-70</div> <div class="p-1 d-inline-block m-1 text-green-vivid-70">text-green-vivid-70</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-vivid-60">bg-green-vivid-60</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-vivid-60">border-green-vivid-60</div> <div class="p-1 d-inline-block m-1 text-green-vivid-60">text-green-vivid-60</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-vivid-50">bg-green-vivid-50</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-vivid-50">border-green-vivid-50</div> <div class="p-1 d-inline-block m-1 text-green-vivid-50">text-green-vivid-50</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-vivid-40">bg-green-vivid-40</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-vivid-40">border-green-vivid-40</div> <div class="p-1 d-inline-block m-1 text-green-vivid-40">text-green-vivid-40</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-vivid-20">bg-green-vivid-20</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-vivid-20">border-green-vivid-20</div> <div class="p-1 d-inline-block m-1 text-green-vivid-20">text-green-vivid-20</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-vivid-10">bg-green-vivid-10</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-vivid-10">border-green-vivid-10</div> <div class="p-1 d-inline-block m-1 text-green-vivid-10">text-green-vivid-10</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-vivid-5">bg-green-vivid-5</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-vivid-5">border-green-vivid-5</div> <div class="p-1 d-inline-block m-1 text-green-vivid-5">text-green-vivid-5</div> </div> <p class="h4 mt-5 text-capitalize">green-cool</p> <div> <div class="p-1 d-inline-block m-1 bg-green-cool-90">bg-green-cool-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-cool-90">border-green-cool-90</div> <div class="p-1 d-inline-block m-1 text-green-cool-90">text-green-cool-90</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-cool-80">bg-green-cool-80</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-cool-80">border-green-cool-80</div> <div class="p-1 d-inline-block m-1 text-green-cool-80">text-green-cool-80</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-cool-70">bg-green-cool-70</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-cool-70">border-green-cool-70</div> <div class="p-1 d-inline-block m-1 text-green-cool-70">text-green-cool-70</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-cool-60">bg-green-cool-60</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-cool-60">border-green-cool-60</div> <div class="p-1 d-inline-block m-1 text-green-cool-60">text-green-cool-60</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-cool-50">bg-green-cool-50</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-cool-50">border-green-cool-50</div> <div class="p-1 d-inline-block m-1 text-green-cool-50">text-green-cool-50</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-cool-40">bg-green-cool-40</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-cool-40">border-green-cool-40</div> <div class="p-1 d-inline-block m-1 text-green-cool-40">text-green-cool-40</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-cool-20">bg-green-cool-20</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-cool-20">border-green-cool-20</div> <div class="p-1 d-inline-block m-1 text-green-cool-20">text-green-cool-20</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-cool-10">bg-green-cool-10</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-cool-10">border-green-cool-10</div> <div class="p-1 d-inline-block m-1 text-green-cool-10">text-green-cool-10</div> </div> <div> <div class="p-1 d-inline-block m-1 bg-green-cool-5">bg-green-cool-5</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-cool-5">border-green-cool-5</div> <div class="p-1 d-inline-block m-1 text-green-cool-5">text-green-cool-5</div> </div> <p class="h4 mt-5 text-capitalize">green-warm</p> <div> <div class="p-1 d-inline-block m-1 bg-green-warm-90">bg-green-warm-90</div> <div class="p-1 d-inline-block m-1 border-solid-sm border-green-warm-90">border-green-warm-90</div> <div class="p-1 d-inline-blo