WLTH CSS Reference

A companion to the standalone WLTH CSS file

This is a pseudo legacy document detailing specific WLTH stylings in vanilla CSS.

Most of our development currently is built on Tailwind 5, so for any standards not featured on this page, assume tailwind defaults are safe.


Here is a static link to a combined CSS file of this project

View CSS File

Alternatively you can check the whole repo on Github:

wlth--stylesheet

WLTH Logos

WLTH Marque Logo

Targets:

  • -

Example:



Open link to SVG

Usage:

            
<svg xmlns="http://www.w3.org/2000/svg" width="130" height="92.242" viewBox="0 0 130 92.242" class="logo-marque" data-v-085b2cef=""><g transform="translate(-525.32 -215.912)"><path d="M1227.049,215.912l-19.062,60.035h13.792l19.062-60.035Z" transform="translate(-585.521)" fill="#1F232D"></path><path d="M926.9,215.912l29.3,92.242H970l-29.3-92.242Z" transform="translate(-344.441)" fill="#1F232D"></path><path d="M560.48,283.184l-21.369-67.272H525.32l29.3,92.242H566.34L585.4,248.145H571.61Z" fill="#1F232D"></path></g></svg>

Declaration:

WLTH Logos

WLTH Logotype Logo

Targets:

  • -

Example:



Open link to SVG

Usage:

            
<svg xmlns="http://www.w3.org/2000/svg" width="105.816" height="24.444" viewBox="0 0 105.816 24.444" class="logo-type" data-v-085b2cef=""><g id="Group_5140" data-name="Group 5140" transform="translate(-107 -14412.302)"><g id="Group_4346" data-name="Group 4346" transform="translate(-242.551 14264.611)"><path id="Path_12015" data-name="Path 12015" d="M384.77,147.854l-7.009,24.409H373.4l-6.311-21.271-6.416,21.271h-4.428l-6.7-24.409h3.731l5.23,20.678,6.241-20.678h4.673l6.137,20.643,5.474-20.643Z" transform="translate(0 -0.128)" fill="#292e3a"></path> <path id="Path_12016" data-name="Path 12016" d="M557.5,169.02v3.243H539.751V147.854h3.487V169.02Z" transform="translate(-149.284 -0.128)" fill="#292e3a"></path> <g id="Group_3826" data-name="Group 3826" transform="translate(406.559 147.691)"><path id="Path_12017" data-name="Path 12017" d="M636.237,150.992h-9.062v21.271h-3.452V150.992h-9.167v-3.138h21.681Z" transform="translate(-614.556 -147.819)" fill="#292e3a"></path> <path id="Path_12018" data-name="Path 12018" d="M760.526,147.691v24.444h-3.487V161.256h-15.2v10.879h-3.487V147.691h3.487v10.391h15.2V147.691Z" transform="translate(-711.718 -147.691)" fill="#292e3a"></path></g></g></g></svg>

Declaration:

Large Page Headers

Targets:

  • .text-3xl
  • .heading-lg

Example:

Australasia’s Newest Lending and Payments Fintech

Usage:

            
<h2 class="heading-lg">
  Australasia’s Newest Lending and Payments Fintech
</h2>

Declaration:

            
.text-3xl, .heading-lg {
    font-family: var(--font-sans);
    letter-spacing: -.01em;
    line-height: 1em;
    font-weight: 400;
    font-size: 50px;
  }

@media screen and (min-width: 500px) {
  .text-3xl, .heading-lg {
    font-size: calc(31.06061px + 3.78788vw);
  }
}

Standard Page and Module Headers

Targets:

  • .text-2xl
  • .heading-md

Example:

Residential Loans

Am I eligible for a WLTH Residential Loan?

Usage:

            <h2 class="heading-md text-secondary">
          Residential Loans
        </h2><h2 class="heading-md">
          Am I eligible for a WLTH Residential Loan?
        </h2>

Declaration:

            
.text-2xl, .heading, .heading-md {
    font-family: var(--font-sans);
    letter-spacing: -.01em;
    line-height: 1.167em;
    font-weight: 400;
    font-size: 34px;
}

@media screen and (min-width: 500px) {
  .text-2xl, .heading .heading-md {
    font-size: calc(24.15152px + 1.9697vw);
  }
}

Small Headers

Targets:

  • .text-xl
  • .heading-sm

Example:

Simple online 5-step process.

Brodie Haupt
Co-Founder

Usage:

            <h3 class="heading-sm">
          Simple online 5-step process.
        </h3><h3 class="heading-sm">
          Brodie Haupt <br />
          <span class="text-secondary">Co-Founder</span>
        </h3>

Declaration:

            
.text-xl, .heading-sm {
    font-family: var(--font-sans);
    letter-spacing: -.01em;
    line-height: 1.167em;
    font-weight: 400;
    font-size: 20px;
}

@media screen and (min-width: 500px) {
  .text-xl, .heading-sm {
    font-size: calc(14.69697px + 1.06061vw);
  }
}

Short Descriptions + Large Body Text

Targets:

  • .text-lg
  • .body-lg
  • .text-body-lg

Example:

Apply online in 5 simple and easy steps via our state-of-the art Lending Loop Platform. All it takes is 15 minutes.



The National Consumer Credit Protection Act 2009, or the NCCP Act, is legislation that’s designed to protect consumers and ensure ethical and professional standards in the finance industry.

Usage:

            
<p class="text-lg text-secondary">
  Apply online in 5 simple and easy steps via our state-of-the art Lending Loop Platform. All it takes is 15 minutes.
</p>

<p class="text-lg">
  The National Consumer Credit Protection Act 2009, or the NCCP Act, is legislation that’s designed to protect consumers and ensure ethical and professional standards in the finance industry.
</p>

Declaration:

            
.text-lg, .body-lg, .text-body-lg {
    font-family: var(--font-sans);
    letter-spacing: .01em;
    line-height: 1.363em;
    font-weight: 400;
    font-size: 16px;
}

@media screen and (min-width: 500px) {
  .text-lg, .body-lg, .text-body-lg {
    font-size: calc(13.72727px + .45455vw);
  }
}

Body Text

Targets:

  • .text-base
  • .body
  • .text-body

Example:

Our home loan application can take just 4 minutes to fill out if you’re prepared – that’s less time than it takes to drink your morning coffee.

Usage:

            
<p class="body">
  Our home loan application can take
  just 4 minutes to fill out
  if you’re prepared – 
  that’s less time than it takes to 
  drink your morning coffee. 
</p>

Declaration:

            
.text-base, .body, .text-body {
    font-family: var(--font-sans);
    letter-spacing: .01em;
    line-height: 1.363em;
    font-weight: 400;
    font-size: 14px;
}

@media screen and (min-width: 500px) {
  .text-base, .body, .text-body {
    font-size: calc(12.48485px + .30303vw);
  }
}

Small Body Text

Targets:

  • .text-xs
  • .subtitle
  • .body-tag
  • text-body-xs

Example:

By entering your phone number you expressly consent for WLTH to contact you via SMS Text message etc. By entering your phone number you express consent for WLTH to contact you via SMS Text message etc.

Usage:

            
<p class="text-xs">
  Our home loan application can take
  just 4 minutes to fill out
  if you’re prepared – 
  that’s less time than it takes to 
  drink your morning coffee. 
</p>

Declaration:

            
.text-xs, .subtitle, .body-tag, .text-body-xs {
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    letter-spacing: -.06em;
    line-height: 1.444em;
    font-weight: 400;
    font-size: 12px;
}

Link

Used when a link is standalone, prevents the bottom underline from stretching the width of the container

Targets:

  • .link

Example:

Get Started

Usage:

            
<a href="#" class="link">Get Started</a>

Declaration:

            
.link, .inline-link {
    transition: color .3s ease-out;
    color: var(--color-text-tertiary);
    text-decoration: none;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.link {
    width: fit-content;
    border-bottom: 2px solid var(--color-turq);
}

.inline-link:hover, .link:hover {
    color: var(--color-turq)
}

Inline Link

Used when a link is contained in a block of text. Prevents the border from impacting the text layout

Targets:

  • .inline-link

Example:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo maxime reiciendis iure pariatur
temporibus itaque excepturi alias similique qui soluta. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Cum fugiat sed vero recusandae mollitia voluptatibus quos sequi dolores at nobis!

Usage:

            
<a href="#" class="inline-link">Get Started</a>

Declaration:

            
.inline-link, .link {
    transition: color .3s ease-out;
    color: var(--color-text-tertiary);
    text-decoration: none;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.inline-link:hover, .link:hover {
    color: var(--color-turq)
}

.inline-link::after {
    content: "";
    position: absolute;
    display: block;
    height: 2px;
    width: 100%;
    left: 0;
    bottom: -2px;
    background: var(--color-turq);
}

List Bullet Style

Targets:

  • .list-bullets

Example:

  • Contact Details of all Applicants
  • Your online banking details
  • Information about your assets

Usage:

            
<ul class="list-bullets">
  <li>Contact Details of all Applicants</li>
  <li>Your online banking details</li>
  <li>Information about your assets</li>
</ul>

Declaration:

            
ol[class], ul[class] {
    list-style: none;
}

.list-bullets li {
    font-family: var(--font-sans);
    letter-spacing: .01em;
    line-height: 1.363em;
    font-weight: 500;
    color: #4c5a68;
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    font-size: 14px;
}

.list-bullets li:before {
    content: "";
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 18px;
    border: 1px solid var(--color-text-secondary);
    left: 0;
    top: .3em;
}

@media screen and (min-width: 500px) {
  .list-bullets li {
    font-size: calc(12.48485px + .30303vw);
  }
}

List Ticks

Targets:

  • .list-ticks

Example:

  • Principle & Interest
  • Interest Only

Usage:

            
<ul class="list-ticks"> 
  <li>Principle & Interest</li>  
  <li>Interest Only</li>
</ul>

Declaration:

            
ol[class], ul[class] {
    list-style: none;
}

.list-ticks li {
    font-family: var(--font-sans);
    letter-spacing: .01em;
    line-height: 1.363em;
    font-weight: 500;
    color: var(--color-text-secondary);
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    font-size: 14px;
}

.list-ticks li:last-child {
    margin-bottom: 0;
}

.list-ticks li:before {
    width: calc(1em - 2px);
}

.list-ticks li:before {
    content: "";
    position: absolute;
    display: block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg data-name='Group 5891'%3E%3Cg data-name='Group 3883'%3E%3Ccircle data-name='Ellipse 333' cx='10' cy='10' r='10' fill='%231445C7'/%3E%3C/g%3E%3Cg data-name='Group 3902'%3E%3Cpath data-name='Path 12030' d='M7.841 13.91a.725.725 0 001.026.008l.008-.008 6.817-6.839a.725.725 0 00-1.011-1.03l-6.333 6.33-3.1-3.1a.731.731 0 00-1.033 1.033z' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% auto;
    background-position: 50%;
    background-repeat: no-repeat;
    height: 1.363em;
    left: 0;
    top: -.1em;
}

@media screen and (min-width: 500px) {
  .list-ticks li {
    font-size: calc(13.72727px + .45455vw);
  }
}

List Ticks Light

Used on dark backgrounds

Targets:

  • .list-ticks.light

Example:

  • Principle & Interest
  • Interest Only

Usage:

            
<ul class="list-ticks light">
  <li>Principle & Interest</li>
  <li>Interest Only</li>
</ul>

Declaration:

            
ol[class], ul[class] {
    list-style: none;
}

.list-ticks li {
    font-family: var(--font-sans);
    letter-spacing: .01em;
    line-height: 1.363em;
    font-weight: 500;
    color: var(--color-text-secondary);
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    font-size: 14px;
}

.list-ticks li:last-child {
    margin-bottom: 0;
}

.list-ticks li:before {
    width: calc(1em - 2px);
}

.list-ticks li:before {
    content: "";
    position: absolute;
    display: block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg data-name='Group 5891'%3E%3Cg data-name='Group 3883'%3E%3Ccircle data-name='Ellipse 333' cx='10' cy='10' r='10' fill='%231445C7'/%3E%3C/g%3E%3Cg data-name='Group 3902'%3E%3Cpath data-name='Path 12030' d='M7.841 13.91a.725.725 0 001.026.008l.008-.008 6.817-6.839a.725.725 0 00-1.011-1.03l-6.333 6.33-3.1-3.1a.731.731 0 00-1.033 1.033z' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% auto;
    background-position: 50%;
    background-repeat: no-repeat;
    height: 1.363em;
    left: 0;
    top: -.1em;
}

.list-ticks.light li {
    color: var(--color-text-tertiary);
}

.list-ticks.light li:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg data-name='Group 5891'%3E%3Cg data-name='Group 3883'%3E%3Ccircle data-name='Ellipse 333' cx='10' cy='10' r='10' fill='%2305E6DD'/%3E%3C/g%3E%3Cg data-name='Group 3902'%3E%3Cpath data-name='Path 12030' d='M7.841 13.91a.725.725 0 001.026.008l.008-.008 6.817-6.839a.725.725 0 00-1.011-1.03l-6.333 6.33-3.1-3.1a.731.731 0 00-1.033 1.033z' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

@media screen and (min-width: 500px) {
  .list-ticks li {
    font-size: calc(13.72727px + .45455vw);
  }
}

Jump Menu

Nav items with link children

Targets:

  • .jump-menu

Example:

Usage:

            
<nav class="jump-menu">
  <a href="#" class="current">Most Asked</a>
  <a href="#">Eligibility</a>
  <a href="#">Account</a>
  <a href="#">Terminology</a>
</nav>

Declaration:

            
.jump-menu {
    display: flex;
    flex-direction: column;
}

.jump-menu a {
    font-family: var(--font-sans);
    letter-spacing: -.01em;
    line-height: 1.167em;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: .3em;
    color: var(--color-text-tertiary);
    padding-left: 1.2em;
    position: relative;
    font-size: 20px;
}

.jump-menu a.current {
    color: var(--color-text-base);
}

.jump-menu a:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: .25em;
    width: .6em;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='50' height='50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='25' fill='%23B8C5CA'/%3E%3C/svg%3E");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top;
    border-radius: .3em;
}

.jump-menu a.current:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='50' height='50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='25' fill='%23292E3A'/%3E%3C/svg%3E");
}

@media screen and (min-width: 500px) {
  .jump-menu a {
    font-size: calc(14.69697px + 1.06061vw);
  }
}

Header Nav Links

Targets:

  • .header-menu

Example:

Usage:

            
      <nav class="header-menu">
          <a href="#">Home</a>
          <a href="#">Lending</a>
          <a href="#">Business</a>
          <a href="#">Vision</a>
          <a href="#">Press</a>
        </nav>

Declaration:

            
.header-menu {
    display: flex;
    flex-direction: row;
}

.header-menu a {
    transition: color .3s ease-out;
    position: relative;
    font-family: var(--font-sans);
    letter-spacing: .1em;
    line-height: 1.363em;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--color-text-secondary);
    text-decoration: none;
    margin-right: 40px;
    font-weight: 500;
    z-index: 10;
}

Button

Targets:

  • .btn

Example:

Usage:

            
<button class="btn">
  Get Started
</button>

Declaration:

            
.btn {
    transition: color .3s ease-out,border-color .3s ease-out,background .3s ease-out;
    font-family: var(--font-mono);
    letter-spacing: .1em;
    line-height: 1.444em;
    font-weight: 400;
    font-size: 12px;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 25px;
    line-height: 30px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid var(--color-border-base);
    background: var(--color-dblue-base);
    color: var(--color-white);
    width: fit-content;
}

.btn:hover {
    color: var(--color-turq-base)
}

Button Outline

Targets:

  • .btn.outline

Example:

Usage:

            
<button class="btn outline">
  Get Started
</button>

Declaration:

            
.btn.outline {
    transition: color .3s ease-out,border-color .3s ease-out,background .3s ease-out;
    font-family: var(--font-mono);
    letter-spacing: .1em;
    line-height: 1.444em;
    font-weight: 400;
    font-size: 12px;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 25px;
    line-height: 30px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid var(--color-border-secondary);
    background: 0 0;
    color: var(--color-text-base);
}

.btn.outline:hover {
    color: var(--color-white);
    background: var(--color-mgrey-400)
}

Text, Icon, and Border Colors

Targets:

  • .text-*
  • .icon-*
  • .border-base .border-*

Example:

text-secondary

text-tertiary

text-disabled

icon-base

icon-secondary

icon-tertiary

icon-primary

icon-success

icon-warning

icon-error

border-base

border-base border-secondary

border-base border-primary

border-base border-primary-secondary

border-base border-success

border-base border-warning

border-base border-error

Usage:

            
<p class="text-secondary">text-secondary</p>
<p class="text-tertiary">text-tertiary</p>
<p class="text-disabled">text-disabled</p>
<p class="icon-base">icon-base</p>
<p class="icon-secondary">icon-secondary</p>
<p class="icon-tertiary">icon-tertiary</p>
<p class="icon-primary">icon-primary</p>
<p class="icon-success">icon-success</p>
<p class="icon-warning">icon-warning</p>
<p class="icon-error">icon-error</p>
<p class="border-base">border-base</p>
<p class="border-base border-secondary">border-base border-secondary</p>
<p class="border-base border-primary">border-base border-primary</p>
<p class="border-base border-primary-secondary">border-base border-primary-secondary</p>
<p class="border-base border-success">border-base border-success</p>
<p class="border-base border-warning">border-base border-warning</p>
<p class="border-base border-error">border-base border-error</p>

Declaration:

            
.text-secondary {
    color: var(--color-text-secondary);
}

.text-tertiary {
    color: var(--color-text-tertiary);
}

.text-disabled {
    color: var(--color-text-disabled);
}

.icon-base {
    color: var(--color-icon-base);
}

.icon-secondary {
    color: var(--color-icon-secondary);
}

.icon-tertiary {
    color: var(--color-icon-tertiary);
}

.icon-disabled {
    color: var(--color-icon-disabled);
}

.icon-primary {
    color: var(--color-icon-primary);
}

.icon-success {
    color: var(--color-icon-success);
}

.icon-warning {
    color: var(--color-icon-warning);
}

.icon-error {
    color: var(--color-icon-error);
}

.border-base {
    border: 2px solid var(--color-border-primary);
}

.border-secondary {
    border-color: var(--color-border-secondary);
}

.border-primary {
    border-color: var(--color-border-primary);
}

.border-primary-secondary {
    border-color: var(--color-border-primary-secondary);
}

.border-success {
    border-color: var(--color-border-success);
}

.border-warning {
    border-color: var(--color-border-warning);
}

.border-error {
    border-color: var(--color-border-error);
}

Loading Skeleton

Targets:

  • .loading

Example:

still loading...

Usage:

            
<div class="loading" style="width:400px;height:200px">
  <p>still loading...</p>
</div>

Declaration:

            
.loading {
    background-color: var(--color-mgrey-300);
    animation: background-loading-gradient 0.9s ease-in-out infinite alternate;
  }

  .loading > * {
    opacity: 0 !important;
  }

  @keyframes background-loading-gradient {
    0% {
      background: linear-gradient(
        127deg,
        var(--color-mgrey-300) 0%,
        var(--color-mgrey-200) 0%,
        var(--color-mgrey-300) 100%
      );
    }

    10% {
      background: linear-gradient(
        127deg,
        var(--color-mgrey-300) 0%,
        var(--color-mgrey-200) 5%,
        var(--color-mgrey-300) 100%
      );
    }

    20% {
      background: linear-gradient(
        127deg,
        var(--color-mgrey-300) 0%,
        var(--color-mgrey-200) 10%,
        var(--color-mgrey-300) 100%
      );
    }

    30% {
      background: linear-gradient(
        127deg,
        var(--color-mgrey-300) 0%,
        var(--color-mgrey-200) 20%,
        var(--color-mgrey-300) 100%
      );
    }

    40% {
      background: linear-gradient(
        127deg,
        var(--color-mgrey-300) 0%,
        var(--color-mgrey-200) 30%,
        var(--color-mgrey-300) 100%
      );
    }

    50% {
      background: linear-gradient(
        127deg,
        var(--color-mgrey-300) 0%,
        var(--color-mgrey-200) 50%,
        var(--color-mgrey-300) 100%
      );
    }

    60% {
      background: linear-gradient(
        127deg,
        var(--color-mgrey-300) 0%,
        var(--color-mgrey-200) 60%,
        var(--color-mgrey-300) 100%
      );
    }

    70% {
      background: linear-gradient(
        127deg,
        var(--color-mgrey-300) 0%,
        var(--color-mgrey-200) 70%,
        var(--color-mgrey-300) 100%
      );
    }

    80% {
      background: linear-gradient(
        127deg,
        var(--color-mgrey-300) 0%,
        var(--color-mgrey-200) 80%,
        var(--color-mgrey-300) 100%
      );
    }

    90% {
      background: linear-gradient(
        127deg,
        var(--color-mgrey-300) 0%,
        var(--color-mgrey-200) 90%,
        var(--color-mgrey-300) 100%
      );
    }

    100% {
      background: linear-gradient(
        127deg,
        var(--color-mgrey-300) 0%,
        var(--color-mgrey-200) 100%,
        var(--color-mgrey-300) 100%
      );
    }
  }

Colors

Targets:

  • --color-*

Example:

  • --color-transparent
  • --color-white
  • --color-dblue
  • --color-dblue-base
  • --color-dblue-900
  • --color-dblue-800
  • --color-dblue-700
  • --color-dblue-600
  • --color-dblue-500
  • --color-dblue-400
  • --color-dblue-300
  • --color-dblue-200
  • --color-dblue-100
  • --color-dblue-50
  • --color-turq
  • --color-turq-base
  • --color-turq-900
  • --color-turq-800
  • --color-turq-700
  • --color-turq-600
  • --color-turq-500
  • --color-turq-400
  • --color-turq-300
  • --color-turq-200
  • --color-turq-100
  • --color-turq-50
  • --color-rblue
  • --color-rblue-base
  • --color-rblue-900
  • --color-rblue-800
  • --color-rblue-700
  • --color-rblue-600
  • --color-rblue-500
  • --color-rblue-400
  • --color-rblue-300
  • --color-rblue-200
  • --color-rblue-100
  • --color-rblue-50
  • --color-mgrey
  • --color-mgrey-base
  • --color-mgrey-900
  • --color-mgrey-800
  • --color-mgrey-700
  • --color-mgrey-600
  • --color-mgrey-500
  • --color-mgrey-400
  • --color-mgrey-300
  • --color-mgrey-200
  • --color-mgrey-100
  • --color-mgrey-50
  • --color-deepblue
  • --color-deepblue-base
  • --color-error
  • --color-error-base
  • --color-error-subdued
  • --color-error-subdued-50
  • --color-error-900
  • --color-error-800
  • --color-error-700
  • --color-error-600
  • --color-error-500
  • --color-error-400
  • --color-error-300
  • --color-error-200
  • --color-error-100
  • --color-error-50
  • --color-success
  • --color-success-base
  • --color-success-subdued
  • --color-success-subdued-50
  • --color-success-900
  • --color-success-800
  • --color-success-700
  • --color-success-600
  • --color-success-500
  • --color-success-400
  • --color-success-300
  • --color-success-200
  • --color-success-100
  • --color-success-50
  • --color-warning
  • --color-warning-base
  • --color-warning-subdued
  • --color-warning-subdued-50
  • --color-warning-900
  • --color-warning-800
  • --color-warning-700
  • --color-warning-600
  • --color-warning-500
  • --color-warning-400
  • --color-warning-300
  • --color-warning-200
  • --color-warning-100
  • --color-warning-50
  • --color-background
  • --color-background-base
  • --color-background-secondary
  • --color-background-tertiary
  • --color-background-disabled
  • --color-text
  • --color-text-base
  • --color-text-secondary
  • --color-text-tertiary
  • --color-text-disabled
  • --color-icon-base
  • --color-icon-secondary
  • --color-icon-tertiary
  • --color-icon-primary
  • --color-icon-success
  • --color-icon-warning
  • --color-icon-error
  • --color-border
  • --color-border-base
  • --color-border-secondary
  • --color-border-primary
  • --color-border-primary-secondard
  • --color-border-success
  • --color-border-warning
  • --color-border-error

Usage:

            
<div 
style="
  width: 200px; 
  aspect-ratio: 1/1; 
  background-color: var(--color-dblue-base);"
></div>

Declaration:

            
:root {
    --color-transparent: transparent;
    --color-white: rgba(255, 255, 255, 1);
    --color-dblue: rgba(41, 56, 58, 1);
    --color-dblue-base: rgba(41, 56, 58, 1);
    --color-dblue-900: rgba(45, 48, 51, 1);
    --color-dblue-800: rgba(27, 29, 37, 1);
    --color-dblue-700: rgba(32, 35, 45, 1);
    --color-dblue-600: rgba(36, 40, 51, 1);
    --color-dblue-500: rgba(41, 46, 58, 1);
    --color-dblue-400: rgba(91, 94, 102, 1);
    --color-dblue-300: rgba(143, 145, 151, 1);
    --color-dblue-200: rgba(186, 188, 193, 1);
    --color-dblue-100: rgba(216, 217, 221, 1);
    --color-dblue-50: rgba(245, 245, 248, 1);
    --color-turq: rgba(5, 230, 221, 1);
    --color-turq-base: rgba(5, 230, 221, 1);
    --color-turq-900: rgba(2, 115, 111, 1);
    --color-turq-800: rgba(3, 148, 142, 1);
    --color-turq-700: rgba(4, 178, 171, 1);
    --color-turq-600: rgba(4, 202, 194, 1);
    --color-turq-500: rgba(5, 230, 221, 1);
    --color-turq-400: rgba(72, 236, 230, 1);
    --color-turq-300: rgba(130, 241, 238, 1);
    --color-turq-200: rgba(175, 245, 244, 1);
    --color-turq-100: rgba(210, 248, 249, 1);
    --color-turq-50: rgba(244, 252, 254, 1);
    --color-rblue: rgba(20, 69, 199, 1);
    --color-rblue-base: rgba(20, 69, 199, 1);
    --color-rblue-900: rgba(10, 35, 100, 1);
    --color-rblue-800: rgba(13, 45, 128, 1);
    --color-rblue-700: rgba(16, 54, 154, 1);
    --color-rblue-600: rgba(18, 61, 175, 1);
    --color-rblue-500: rgba(20, 69, 199, 1);
    --color-rblue-400: rgba(83, 119, 214, 1);
    --color-rblue-300: rgba(137, 162, 227, 1);
    --color-rblue-200: rgba(180, 195, 237, 1);
    --color-rblue-100: rgba(213, 221, 245, 1);
    --color-rblue-50: rgba(245, 246, 253, 1);
    --color-mgrey: rgba(137, 138, 145, 1);
    --color-mgrey-base: rgba(137, 138, 145, 1);
    --color-mgrey-900: rgba(76, 90, 104, 1);
    --color-mgrey-800: rgba(90, 103, 116, 1);
    --color-mgrey-700: rgba(109, 121, 133, 1);
    --color-mgrey-600: rgba(104, 106, 114, 1);
    --color-mgrey-500: rgba(137, 138, 145, 1);
    --color-mgrey-400: rgba(168, 169, 175, 1);
    --color-mgrey-300: rgba(195, 196, 201, 1);
    --color-mgrey-200: rgba(216, 217, 221, 1);
    --color-mgrey-100: rgba(217, 217, 217, 1);
    --color-mgrey-50: rgba(248, 249, 251, 1);
    --color-deepblue: rgba(22, 34, 75, 1);
    --color-deepblue-base: rgba(22, 34, 75, 1);
    --color-error: rgba(250, 3, 32, 1);
    --color-error-base: rgba(250, 3, 32, 1);
    --color-error-subdued: rgba(252, 174, 185, 1);
    --color-error-subdued-50: rgba(252, 244, 247, 1);
    --color-error-900: rgba(126, 2, 16, 1);
    --color-error-800: rgba(161, 2, 21, 1);
    --color-error-700: rgba(194, 3, 25, 1);
    --color-error-600: rgba(220, 3, 28, 1);
    --color-error-500: rgba(250, 3, 32, 1);
    --color-error-400: rgba(251, 70, 92, 1);
    --color-error-300: rgba(251, 128, 144, 1);
    --color-error-200: rgba(252, 174, 185, 1);
    --color-error-100: rgba(252, 209, 216, 1);
    --color-error-50: rgba(252, 244, 247, 1);
    --color-success: rgba(4, 202, 114, 1);
    --color-success-base: rgba(4, 202, 114, 1);
    --color-success-subdued: rgba(175, 237, 211, 1);
    --color-success-subdued-50: rgba(240, 250, 248, 1);
    --color-success-900: rgba(2, 101, 57, 1);
    --color-success-800: rgba(3, 130, 73, 1);
    --color-success-700: rgba(4, 157, 88, 1);
    --color-success-600: rgba(4, 178, 100, 1);
    --color-success-500: rgba(4, 202, 114, 1);
    --color-success-400: rgba(4, 202, 114, 1);
    --color-success-300: rgba(84, 218, 159, 1);
    --color-success-200: rgba(146, 231, 195, 1);
    --color-success-100: rgba(194, 241, 222, 1);
    --color-success-50: rgba(235, 249, 245, 1);
    --color-warning: rgba(255, 162, 0, 1);
    --color-warning-base: rgba(255, 162, 0, 1);
    --color-warning-subdued: rgba(253, 224, 176, 1);
    --color-warning-subdued-50: rgba(253, 248, 242, 1);
    --color-warning-900: rgba(128, 82, 0, 1);
    --color-warning-800: rgba(164, 105, 0, 1);
    --color-warning-700: rgba(197, 126, 0, 1);
    --color-warning-600: rgba(224, 143, 0, 1);
    --color-warning-500: rgba(255, 162, 0, 1);
    --color-warning-400: rgba(254, 186, 69, 1);
    --color-warning-300: rgba(254, 207, 129, 1);
    --color-warning-200: rgba(253, 224, 176, 1);
    --color-warning-100: rgba(253, 237, 212, 1);
    --color-warning-50: rgba(253, 248, 242, 1);
    --color-background: rgba(244, 244, 244, 1);
    --color-background-base: rgba(244, 244, 244, 1);
    --color-background-secondary: rgba(255, 255, 255, 1);
    --color-background-tertiary: rgba(236, 239, 240, 1);
    --color-background-disabled: rgba(216, 217, 221, 1);
    --color-text: rgba(41, 46, 58, 1);
    --color-text-base: rgba(41, 46, 58, 1);
    --color-text-secondary: rgba(122, 136, 144, 1);
    --color-text-tertiary: rgba(184, 197, 202, 1);
    --color-text-disabled: rgba(216, 217, 221, 1);
    --color-icon-base: rgba(32, 32, 32, 1);
    --color-icon-secondary: rgba(137, 137, 138, 1);
    --color-icon-tertiary: rgba(195, 195, 197, 1);
    --color-icon-primary: rgba(44, 113, 246, 1);
    --color-icon-success: rgba(4, 202, 114, 1);
    --color-icon-warning: rgba(255, 162, 0, 1);
    --color-icon-error: rgba(250, 3, 32, 1);
    --color-border: rgba(32, 32, 32, 1);
    --color-border-base: rgba(32, 32, 32, 1);
    --color-border-secondary: rgba(137, 137, 138, 1);
    --color-border-primary: rgba(20, 69, 199, 1);
    --color-border-primary-secondard: rgba(5, 230, 221, 1);
    --color-border-success: rgba(4, 202, 114, 1);
    --color-border-warning: rgba(255, 162, 0, 1);
    --color-border-error: rgba(250, 3, 32, 1);
  }