Default styles

Change colors (the color--* classes change the color of the target and its direct descendant links, also applies to background-color of .nw-btn's. It is meant moreso for overriding systemic colors in specific places.): gray, white, dark-purple, purple, light-purple, lavender, red, orange, gold, dark-green, green, light-green, dark-blue, blue, light-blue

Remove colors

background-color--primary-1
background-color--primary-2
background-color--primary-3
background-color--primary-4
background-color--secondary-1
background-color--secondary-2
background-color--secondary-3
background-color--secondary-4
color--primary-1
color--primary-2
color--primary-3
color--primary-4
color--secondary-1
color--secondary-2
color--secondary-3
color--secondary-4


TheSans Typeface starts at 200, but in CSS the normal weight defaults to 400 (and 700 for bold).
Therefore, font-weights 200 thru 400 are precisely the same thing.


font-weight: 200; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

font-weight: 300; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

font-weight: 400; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.
(^This is the normal font weight.)

font-weight: normal; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

font-weight: 500; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

font-weight: 600; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

font-weight: 700; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.
(^This is the bold font weight.)

font-weight: bold; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

font-weight: 800; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

font-weight: 900; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.


font-weight: 200; font-size: 30px; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

font-weight: 300; font-size: 30px; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

font-weight: 400; font-size: 30px; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

font-weight: normal; font-size: 30px; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

font-weight: 500; font-size: 30px; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

font-weight: 600; font-size: 30px; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

font-weight: 700; font-size: 30px; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

font-weight: bold; font-size: 30px; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

font-weight: 800; font-size: 30px; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

font-weight: 900; font-size: 30px; The quick brown fox jumped over the lazy dog and took his bone. The dog was dead. Poor dog.

<a> Main sheet grapple Buccaneer hang the jib Cat o'nine tails.

<a> <h1> Nipperkin lee Sail ho cutlass chandler

<a> <h2> Walk the plank rutters spanker schooner careen

<a> <h3> Landlubber or just lubber hempen

<a> <h4> Case shot belay sloop mizzenmast furl

<a> <h5>

constellation-btn (probably only works with links)

no color story block:

Constellation Button
Button Link
Button Link Inline

within story-primary--purple story-secondary--orange color story block:

Constellation Button
Constellation Button

Sample button links (class of nw-btn) (purple-orange color story)

Button Link
Button Link in Sidebar

For Inline buttons add class nw-btn--inline

Button Link Inline
Button Link Inline in Sidebar

<h1> <a> Nipperkin lee Sail ho cutlass chandler

<h2> <a> Walk the plank rutters spanker schooner careen

<h3> <a> Landlubber or just lubber hempen

<h4> <a> Case shot belay sloop mizzenmast furl

<h5> <a> Bilged on her anchor bilge water Sea Legs draught case shot

<h1> Nipperkin lee Sail ho cutlass chandler.

<h2> Walk the plank rutters spanker schooner careen

<h3> Landlubber or just lubber hempen

<h4> Case shot belay sloop mizzenmast furl

<h5> Bilged on her anchor bilge water Sea Legs draught case shot

<p> Six pounders lanyard carouser rope's end aft main sheet measured fer yer chains overhaul American Main scurvy. Driver fore loot booty mizzen stern draft hail-shot holystone sheet. Fire ship main sheet ho cable wench pinnace grapple loaded to the gunwalls Jolly Roger gangplank.

<section>
<hr> below

.list-multi-column-2: .list-multi-column-3: .list-2col (the 2-column thing we were using before? The reading order is affected.)

This is what .blue text looks like.

This is what .gray text looks like.

This is what .gold text looks like.

This is what .white text looks like.

.content-padding
<