This is Arcadia - a design system by Norland Park.
Arcadia is under active development and is changing rapidly. It is not ready for production use.
License information.

Typography

Fonts

Body font stack

Used for body text, buttons, inputs.

System fonts are used when possible, with fallback to sans-serif and emoji fonts.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'segoe ui', roboto, oxygen-sans, ubuntu, cantarell, 'helvetica neue', 'arial', sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol';
Title font stack
Used exclusively for page level heading - h1 through h6.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
font-family: 'SF Pro Display', 'open sans', -apple-system, BlinkMacSystemFont, 'segoe ui', roboto, oxygen-sans, ubuntu, cantarell, 'helvetica neue', 'arial', sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol';
Monospace font stack
TBD
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
font-family: 'SF Mono', 'source code pro', consolas, 'courier new', courier, monospace;

Headings

Headings can use .title class to display bottom border indicating a section break
Primary heading: H1

Font weight: 300

The quick brown fox jumps over the lazy dog

HTML
<h1>The quick brown fox jumps over the lazy dog</h1>
Secondary headings: H2, H3

Font weight: 600

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

HTML
<h2>The quick brown fox jumps over the lazy dog</h2> <h3>The quick brown fox jumps over the lazy dog</h3>
Tertiary headings: H4, H5, H6

Font weight: 400

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog
HTML
<h3>The quick brown fox jumps over the lazy dog</h3> <h4>The quick brown fox jumps over the lazy dog</h4> <h5>The quick brown fox jumps over the lazy dog</h5>

Text copy

Body copy

ac-text-body

There are really four dimensions, three which we call the three planes of Space, and a fourth, Time. There is, however, a tendency to draw an unreal distinction between the former three dimensions and the latter, because it happens that our consciousness moves intermittently in one direction along the latter from the beginning to the end of our lives.

The thing the Time Traveller held in his hand was a glittering metallic framework, scarcely larger than a small clock, and very delicately made. There was ivory in it, and some transparent crystalline substance. And now I must be explicit, for this that follows—unless his explanation is to be accepted—is an absolutely unaccountable thing. He took one of the small octagonal tables that were scattered about the room, and set it in front of the fire, with two legs on the hearthrug. On this table he placed the mechanism. Then he drew up a chair, and sat down. The only other object on the table was a small shaded lamp, the bright light of which fell upon the model. There were also perhaps a dozen candles about, two in brass candlesticks upon the mantel and several in sconces, so that the room was brilliantly illuminated. I sat in a low arm-chair nearest the fire, and I drew this forward so as to be almost between the Time Traveller and the fireplace. Filby sat behind him, looking over his shoulder. The Medical Man and the Provincial Mayor watched him in profile from the right, the Psychologist from the left. The Very Young Man stood behind the Psychologist. We were all on the alert. It appears incredible to me that any kind of trick, however subtly conceived and however adroitly done, could have been played upon us under these conditions.

There are really four dimensions, three which we call the three planes of Space, and a fourth, Time. There is, however, a tendency to draw an unreal distinction between the former three dimensions and the latter, because it happens that our consciousness moves intermittently in one direction along the latter from the beginning to the end of our lives.

Micro copy heading

ac-text-micro heading
Really this is what is meant by the Fourth Dimension, though some people who talk about the Fourth Dimension do not know they mean it.

Micro copy text

ac-text-micro copy

There are really four dimensions, three which we call the three planes of Space, and a fourth, Time. There is, however, a tendency to draw an unreal distinction between the former three dimensions and the latter, because it happens that our consciousness moves intermittently in one direction along the latter from the beginning to the end of our lives.

Buttons

Buttons can be applied to both button and a tags. Block style is applied by default, even for a tags.

Block buttons

Basic button

A basic button can be created with minimal markup.

HTML
<button class="ac-button">Basic button</button><a class="ac-button" href="#">Basic link button</a> <button class="ac-button secondary">Secondary button</button>
Button modifiers

TBD

HTML
<button class="ac-button disabled">Disabled button</button> <button class="ac-button block">Block button</button>
Button sizing

TBD

HTML
<button class="ac-button sm">Small button</button> <button class="ac-button">Regular button</button> <button class="ac-button lg">Large button</button>
Call to action buttons

TBD

HTML
<button class="ac-button crimson">Crimson</button> <button class="ac-button cornflower">Cornflower</button> <button class="ac-button tangerine">Tangerine</button> <button class="ac-button eve">Eve</button>
Button with effect

TBD

HTML
<button class="ac-button success">Success button</button> <button class="ac-button warning">Warning button</button> <button class="ac-button danger">Danger button</button>
Links and button links

TBD

HTML
<button class="ac-button link">Default link</button> <button class="ac-button link secondary">Secondary link</button> <button class="ac-button link crimson">Crimson link</button> <button class="ac-button link cornflower">Cornflower link</button> <button class="ac-button link tangerine">Tangerine link</button> <button class="ac-button link eve">Eve link</button> <button class="ac-button link success">Success link</button> <button class="ac-button link warning">Warning link</button> <button class="ac-button link danger">Danger link</button>
Icon buttons

TBD

HTML
<button class="ac-button with-icon sm">
  <svg>...</svg>
  Small icon button
</button>
<button class="ac-button with-icon">
  <svg>...</svg>
  Regular icon button
</button>
<button class="ac-button with-icon lg">
  <svg>...</svg>
  Large icon button
</button>
Icon buttons without labels

TBD

HTML
<button class="ac-button only-icon sm">
  <svg>...</svg>
</button>
<button class="ac-button only-icon">
  <svg>...</svg>
</button>
<button class="ac-button only-icon lg">
  <svg>...</svg>
</button>

Forms and form elements

Input elements

TBD

HTML
<div class="ac-mrg-b-md"> <input class="ac-input sm" placeholder="Your name"/> </div> <div class="ac-mrg-b-md"> <input class="ac-input" placeholder="Your name"/> </div> <div class="ac-mrg-b-md"> <input class="ac-input lg" placeholder="Your name"/> </div> <div class="ac-mrg-b-md"> <input class="ac-input block" placeholder="Your name"/> </div> <div class="ac-mrg-b-md"> <input class="ac-input" type="color"/> </div> <div class="ac-mrg-b-md"> <input class="ac-input" type="file"/> </div> <div class="ac-mrg-b-md"> <input class="ac-input" type="range"/> </div> <div class="ac-mrg-b-md"> <input class="ac-input ac-button warning" type="reset"/> </div> <div class="ac-mrg-b-md"> <input class="ac-button" type="submit" value="Submit"/> </div> <select class="ac-input"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> <select class="ac-input block"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>
Radio and checkbox

TBD

HTML
<input class="ac-input" type="checkbox" id="example_1"/> <label for="example_1">Some label</label> <input class="ac-input" type="radio" id="example_2"/> <label for="example_2">Some label</label>
Textarea

TBD

HTML
<textarea class="ac-input sm"></textarea> <textarea class="ac-input"></textarea> <textarea class="ac-input lg"></textarea> <textarea class="ac-input block"></textarea>
Auto resizing textarea

Vertically self sizing textarea input. Will adapt the height of the input match the content.

HTML
<textarea class="ac-input autosize"></textarea>

Panels

Basic panel

TBD. By default, panels have no margin or padding.

HTML
<div class="ac-panel"></div>
Card

TBD. By default, includes small padding and has elevation value of 1.

I am a card
HTML
<div class="ac-card"></div>
Signal panels

TBD

Beware!
A very important notification!
Beware!
A very important notification!
Beware!
A very important notification!
Beware!
A very important notification!
HTML
<div class="ac-panel signal-info">
  <div class="signal-heading">Beware!</div>
  <div class="signal-body">A very important notification!</div>
</div>
<div class="ac-panel signal-success">
  <div class="signal-heading">Beware!</div>
  <div class="signal-body">A very important notification!</div>
</div>
<div class="ac-panel signal-warning">
  <div class="signal-heading">Beware!</div>
  <div class="signal-body">A very important notification!</div>
</div>
<div class="ac-panel signal-danger">
  <div class="signal-heading">Beware!</div>
  <div class="signal-body">A very important notification!</div>
</div>

Account components

Passwordless sign in page

TBD

HTML
<section class="ac-account sign-in">
  <div class="welcome">Welcome back!</div>
  <div class="lead">Enter your email below and we will email you a link - clicking on that link will sign you in to your account.</div>
  <form class="ac-form ac-validate" data-ruleset="...">
    <div class="form-item">
      <label for="...">Email address</label>
      <input class="ac-input block" name="..." id="..." type="email" autocomplete="email" placeholder="Enter your email address"/>
    </div>
    <div class="form-item">
      <button class="ac-button submit with-icon" type="submit" name="...">
        <svg>...</svg>Send Magic Link
      </button>
    </div>
  </form>
  <div class="links">
    <div class="link">
      Don't have an account?
      <a href="#">Sign Up</a>.
    </div>
    <div class="link">
      Need help accessing your account?
      <a href="#">Contact support</a>.
    </div>
  </div>
</section>
Passwordless post email screen

TBD

No call to action button for unknown providers!
A reasonable attempt should be made to determine email provider used by the visitor. Call to action should only be shown if email provider is determined with high degree of certainty and can be linked to programmatically.
HTML
<section class="ac-account sign-in">
  <div class="welcome">Check your email!</div>
  <div class="status">We’ve emailed a special link to <strong>example@gmail.com</strong>. Click the link to confirm your address and get started.</div>
  <div class="cta"><a class="ac-button block vnd-mail-gmail" href="#" target="_ac_email">Open Gmail</a></div>
  <div class="links">
    <div class="link">
      Didn't receive an email?
      Please,&nbsp;<a href="#">try again.</a>
    </div>
    <div class="link">
      Wrong email?
      Please,&nbsp;<a href="#">re-enter your address</a>.
    </div>
    <div class="link">
      Need help accessing your account?
      <a href="#">Contact support</a>.
    </div>
  </div>
</section>
Passwordless post email buttons

TBD

HTML
<div><a class="ac-button vnd-mail-gmail" href="#" target="_ac_email">Open Gmail</a></div>
<div><a class="ac-button vnd-mail-outlook" href="#" target="_ac_email">Open Outlook</a></div>
<div><a class="ac-button vnd-mail-yahoo" href="#" target="_ac_email">Open Yahoo Mail</a></div>
<div><a class="ac-button vnd-mail-protonmail" href="#" target="_ac_email">Open ProtonMail</a></div>
<div><a class="ac-button vnd-mail-icloud" href="#" target="_ac_email">Open iCloud Mail</a></div>
Passwordless unknown user

TBD

HTML
<section class="ac-account sign-in">
  <div class="welcome">Hello, I don't believe we've met!</div>
  <div class="status">
    Could not find user account associated with email address
    <strong>example@gmail.com</strong>.
  </div>
  <div class="cta"><a class="ac-button block ac-mrg-b-xs" href="#">Sign up</a><a class="ac-button secondary block" href="#">Try another email</a></div>
  <div class="links">
    <div class="link">
      Need help accessing your account?
      <a href="#">Contact support</a>.
    </div>
  </div>
</section>
2FA authentication

TBD

HTML
<section class="ac-account sign-in">
  <div class="welcome">2-Step Verification</div>
  <div class="lead">Enter the verification code generated by your 2FA authenticator application.</div>
  <form class="ac-form ac-validate" data-ruleset="...">
    <div class="form-item">
      <label for="...">Code from authenticator app</label>
      <input class="ac-input block code" name="..." id="..." type="text" autocomplete="off" placeholder="Enter code" minlength="6" maxlength="6"/>
    </div>
    <div class="form-item">
      <button class="ac-button submit with-icon" type="submit" name="...">
        <svg>...</svg>Verify
      </button>
    </div>
  </form>
  <div class="ac-text-micro copy ac-mrg-t-sm">
    If, for any reason, you cannot access your authenticator application for your two-factor
    verification code, you can log in using your recovery code.
    Each recovery code can be used only once.
  </div>
  <div class="links">
    <div class="link">
      Need help accessing your account?
      <a href="#">Contact support</a>.
    </div>
  </div>
</section>
Passwordless registration

TBD

HTML
<section class="ac-account sign-in">
  <div class="welcome">It's a pleasure to meet you!</div>
  <div class="lead">Fill out the form below and we will email you a link - clicking on that link will sign you in to your account.</div>
  <form class="ac-form ac-validate" data-ruleset="...">
    <div class="form-item">
      <label for="...">Your name</label>
      <input class="ac-input block" name="..." id="..." type="text" autocomplete="name" placeholder="Enter your name"/>
    </div>
    <div class="form-item">
      <label for="...">Email address</label>
      <input class="ac-input block" name="..." id="..." type="email" autocomplete="email" placeholder="Enter your email address"/>
    </div>
    <div class="form-item">
      <input class="ac-input" type="checkbox" id="..." name="..."/>
      <label for="...">I agree to the&nbsp;<a href="#">Terms of Service</a>&nbsp;and&nbsp;<a href="#">Privacy Policy</a></label>
    </div>
    <div>
      <button class="ac-button submit with-icon" type="submit">
        <svg>...</svg>Create my account
      </button>
    </div>
  </form>
  <div class="links">
    <div class="link">
      Already have an account?
      <a href="#">Sign In</a>.
    </div>
    <div class="link">
      Need help creating an account?
      <a href="#">Contact support</a>.
    </div>
  </div>
</section>
Header hero for passwordless sign in

Used for standalone sign in and account action pages that have no other means of navigation

HTML
<div class="ac-account-header">
  <div class="logo"><a href="#"><img class="ac-only-light" src="..."/><img class="ac-only-dark" src="..."/></a></div>
</div>

Pricing table

Pricing table

TBD

Starter

Free
Forever
Really this is what is meant by the Fourth Dimension, though some people who talk about the Fourth Dimension do not know they mean it.
  • Up to 5 users
  • 1GB storage
  • Unlimited everything else

Business

$119.00USD
monthly
Really this is what is meant by the Fourth Dimension, though some people who talk about the Fourth Dimension do not know they mean it.
  • Up to 100 users
  • 5GB storage
  • Unlimited everything else

Enterprise

$12.00USD
per user, per month
Really this is what is meant by the Fourth Dimension, though some people who talk about the Fourth Dimension do not know they mean it.
  • Unlimited users
  • Unlimited storage
  • Unlimited everything else
HTML
<section class="ac-pricing">
  <div class="plan">
    <div class="content">
      <div class="title">
        <h4>Starter</h4>
      </div>
      <div class="price"><span class="price">Free</span></div>
      <div class="term">Forever</div>
      <div class="cta">
        <button class="ac-button">Sign Up</button>
      </div>
      <div class="description">...</div>
      <ul class="conditions">
        <li>Up to 5 users</li>
        <li>1GB storage</li>
        <li>Unlimited everything else</li>
      </ul>
    </div>
  </div>
  <div class="plan">
    <div class="content">
      <div class="title">
        <h4>Business</h4>
      </div>
      <div class="price"><span class="symbol">$</span><span class="price">119.00</span><span class="currency">USD</span></div>
      <div class="term">monthly</div>
      <div class="cta">
        <button class="ac-button">Start Trial</button>
      </div>
      <div class="description">...</div>
      <ul class="conditions">
        <li>Up to 100 users</li>
        <li>5GB storage</li>
        <li>Unlimited everything else</li>
      </ul>
    </div>
  </div>
  <div class="plan">
    <div class="content">
      <div class="title">
        <h4>Enterprise</h4>
      </div>
      <div class="price"><span class="symbol">$</span><span class="price">12.00</span><span class="currency">USD</span></div>
      <div class="term">per user, per month</div>
      <div class="cta">
        <button class="ac-button">Start Trial</button>
      </div>
      <div class="description">...</div>
      <ul class="conditions">
        <li>Unlimited users</li>
        <li>Unlimited storage</li>
        <li>Unlimited everything else</li>
      </ul>
    </div>
  </div>
</section>

Colors

Brand colors

NameHEXSCSS
Arcadia Crimson#dd2e44$ac-color-brand-rimson
Arcadia Cornflower#5f7aff$ac-color-brand-cornflower
Arcadia Tangerine#eb8e00$ac-color-brand-tangerine

Branding color scheme

NameHEXSCSS
Crimson#dd2e44$ac-color-crimson
Crimson Shade 100#25080b$ac-color-crimson-shade-100
Crimson Shade 200#4a0f17$ac-color-crimson-shade-200
Crimson Shade 300#6f1722$ac-color-crimson-shade-300
Crimson Shade 400#931f2d$ac-color-crimson-shade-400
Crimson Shade 500#b82639$ac-color-crimson-shade-500
Crimson Tint 100#e35163$ac-color-crimson-tint-100
Crimson Tint 200#e87482$ac-color-crimson-tint-200
Crimson Tint 300#ee97a2$ac-color-crimson-tint-300
Crimson Tint 400#f4b9c1$ac-color-crimson-tint-400
Crimson Tint 500#f9dce0$ac-color-crimson-tint-500;
Cornflower#5f7aff$ac-color-cornflower
Cornflower Shade 100#10142b$ac-color-cornflower-shade-100
Cornflower Shade 200#202955$ac-color-cornflower-shade-200
Cornflower Shade 300#303d80$ac-color-cornflower-shade-300
Cornflower Shade 400#3f51aa$ac-color-cornflower-shade-400
Cornflower Shade 500#4f66d5$ac-color-cornflower-shade-500
Cornflower Tint 100#7a90ff$ac-color-cornflower-tint-100
Cornflower Tint 200#94a6ff$ac-color-cornflower-tint-200
Cornflower Tint 300#afbdff$ac-color-cornflower-tint-300
Cornflower Tint 400#cad3ff$ac-color-cornflower-tint-400
Cornflower Tint 500#e4e9ff$ac-color-cornflower-tint-500
Tangerine#eb8e00$ac-color-tangerine
Tangerine Shade 100#271800$ac-color-tangerine-shade-100
Tangerine Shade 200#4e2f00$ac-color-tangerine-shade-200
Tangerine Shade 300#764700$ac-color-tangerine-shade-300
Tangerine Shade 400#9d5f00$ac-color-tangerine-shade-400
Tangerine Shade 500#c47600$ac-color-tangerine-shade-500
Tangerine Tint 100#eea12b$ac-color-tangerine-tint-100
Tangerine Tint 200#f2b455$ac-color-tangerine-tint-200
Tangerine Tint 300#f5c780$ac-color-tangerine-tint-300
Tangerine Tint 400#f8d9aa$ac-color-tangerine-tint-400
Tangerine Tint 500#fcecd5$ac-color-tangerine-tint-500

User experience color scheme

NameHEXSCSS
Neptune#2a4e93$ac-color-neptune
Neptune Shade 100#070d19$ac-color-neptune-shade-100
Neptune Shade 200#0e1a31$ac-color-neptune-shade-200
Neptune Shade 300#15274a$ac-color-neptune-shade-300
Neptune Shade 400#1c3462$ac-color-neptune-shade-400
Neptune Shade 500#23417b$ac-color-neptune-shade-500
Neptune Tint 100#4e6ca5$ac-color-neptune-tint-100
Neptune Tint 200#7189b7$ac-color-neptune-tint-200
Neptune Tint 300#95a7c9$ac-color-neptune-tint-300
Neptune Tint 400#b8c4db$ac-color-neptune-tint-400
Neptune Tint 500#dce2ed$ac-color-neptune-tint-500
Fjord#3f5b77$ac-color-fjord
Fjord Shade 100#0b0f14$ac-color-fjord-shade-100
Fjord Shade 200#151e28$ac-color-fjord-shade-200
Fjord Shade 300#202e3c$ac-color-fjord-shade-300
Fjord Shade 400#2a3d4f$ac-color-fjord-shade-400
Fjord Shade 500#354c63$ac-color-fjord-shade-500
Fjord Tint 100#5f768e$ac-color-fjord-tint-100
Fjord Tint 200#7f92a4$ac-color-fjord-tint-200
Fjord Tint 300#9fadbb$ac-color-fjord-tint-300
Fjord Tint 400#bfc8d2$ac-color-fjord-tint-400
Fjord Tint 500#dfe4e8$ac-color-fjord-tint-500
Eve#3b4dbf$ac-color-eve
Eve Shade 100#0a0d20$ac-color-eve-shade-100
Eve Shade 200#141a40$ac-color-eve-shade-200
Eve Shade 300#1e2760$ac-color-eve-shade-300
Eve Shade 400#27337f$ac-color-eve-shade-400
Eve Shade 500#31409f$ac-color-eve-shade-500
Eve Tint 100#5c6bca$ac-color-eve-tint-100
Eve Tint 200#7c88d4$ac-color-eve-tint-200
Eve Tint 300#9da6df$ac-color-eve-tint-300
Eve Tint 400#bec4ea$ac-color-eve-tint-400
Eve Tint 500#dee1f4$ac-color-eve-tint-500
Apricot#ff6d05$ac-color-apricot
Apricot Shade 100#2b1201$ac-color-apricot-shade-100
Apricot Shade 200#552402$ac-color-apricot-shade-200
Apricot Shade 300#803703$ac-color-apricot-shade-300
Apricot Shade 400#aa4903$ac-color-apricot-shade-400
Apricot Shade 500#d55b04$ac-color-apricot-shade-500
Apricot Tint 100#ff852f$ac-color-apricot-tint-100
Apricot Tint 200#ff9e58$ac-color-apricot-tint-200
Apricot Tint 300#ffb682$ac-color-apricot-tint-300
Apricot Tint 400#ffceac$ac-color-apricot-tint-400
Apricot Tint 500#ffe7d5$ac-color-apricot-tint-500
Sunset#ffd105$ac-color-sunset
Sunset Shade 100#2b2301$ac-color-sunset-shade-100
Sunset Shade 200#554602$ac-color-sunset-shade-200
Sunset Shade 300#806903$ac-color-sunset-shade-300
Sunset Shade 400#aa8b03$ac-color-sunset-shade-400
Sunset Shade 500#d5ae04$ac-color-sunset-shade-500
Sunset Tint 100#ffd92f$ac-color-sunset-tint-100
Sunset Tint 200#ffe058$ac-color-sunset-tint-200
Sunset Tint 300#ffe882$ac-color-sunset-tint-300
Sunset Tint 400#fff0ac$ac-color-sunset-tint-400
Sunset Tint 500#fff7d5$ac-color-sunset-tint-500
Gaia#2e633a$ac-color-gaia
Gaia Shade 100#08110a$ac-color-gaia-shade-100
Gaia Shade 200#0f2113$ac-color-gaia-shade-200
Gaia Shade 300#17321d$ac-color-gaia-shade-300
Gaia Shade 400#1f4227$ac-color-gaia-shade-400
Gaia Shade 500#265330$ac-color-gaia-shade-500
Gaia Tint 100#517d5b$ac-color-gaia-tint-100
Gaia Tint 200#74977c$ac-color-gaia-tint-200
Gaia Tint 300#97b19d$ac-color-gaia-tint-300
Gaia Tint 400#b9cbbd$ac-color-gaia-tint-400
Gaia Tint 500#dce5de$ac-color-gaia-tint-500
Wolf#b60000$ac-color-wolf
Wolf Shade 100#1e0000$ac-color-wolf-shade-100
Wolf Shade 200#3d0000$ac-color-wolf-shade-200
Wolf Shade 300#5b0000$ac-color-wolf-shade-300
Wolf Shade 400#790000$ac-color-wolf-shade-400
Wolf Shade 500#980000$ac-color-wolf-shade-500
Wolf Tint 100#c22b2b$ac-color-wolf-tint-100
Wolf Tint 200#ce5555$ac-color-wolf-tint-200
Wolf Tint 300#db8080$ac-color-wolf-tint-300
Wolf Tint 400#e7aaaa$ac-color-wolf-tint-400
Wolf Tint 500#f3d5d5$ac-color-wolf-tint-500
Moon#778696$ac-color-moon
Moon Shade 100#0c0d0f$ac-color-moon-shade-100
Moon Shade 200#181b1e$ac-color-moon-shade-200
Moon Shade 300#24282d$ac-color-moon-shade-300
Moon Shade 400#30363c$ac-color-moon-shade-400
Moon Shade 500#3c434b$ac-color-moon-shade-500
Moon Shade 600#47505a$ac-color-moon-shade-600
Moon Shade 700#535e69$ac-color-moon-shade-700
Moon Shade 800#5f6b78$ac-color-moon-shade-800
Moon Shade 900#6b7987$ac-color-moon-shade-900
Moon Tint 100#8592a1$ac-color-moon-tint-100
Moon Tint 200#929eab$ac-color-moon-tint-200
Moon Tint 300#a0aab6$ac-color-moon-tint-300
Moon Tint 400#adb6c0$ac-color-moon-tint-400
Moon Tint 500#bbc3cb$ac-color-moon-tint-500
Moon Tint 600#c9cfd5$ac-color-moon-tint-600
Moon Tint 700#d6dbe0$ac-color-moon-tint-700
Moon Tint 800#e4e7ea$ac-color-moon-tint-800
Moon Tint 900#f1f3f5$ac-color-moon-tint-900