Fix some deficiencies in pattern-library layout (as quickly as feasible)

[lyzadanger]

There have been some (understandable) comments that typography, rhythm and layout in the pattern library could be improved. This PR attempts to makes some fixes in a tight pass, without getting too sucked in to the infinite revision cycle that design can be!

Consider this the "version-6 quick design pass." You're welcome to pull this branch and tool around a bit and see how it feels.

This PR:

• Fixes wonky margins and spacing in many cases
• Simplifies the visual layout for several library components, including demo/code views
• Makes color usage consistent and moves away from using application colors (except for brand red) in library interfaces
• Simplifies typography and makes it more consistent (weights, spacing, color)

After which it:

• Fixes a couple of stray wonky margins on specific pattern-library pages
• Removes the noisy "Usage" header on most pages to tighten up layout

Disclaimer: There is a bunch of stuff to follow up on here in the design world. But I'm trying to make the smallest diff possible while still addressing the critical items.

Fixing margins and spacing

I was relying too much on tailwind's space-y-<spacing> classes and they just can't meet the layout needs I was demanding of them. Instead, there is more direct control of margins in several places.

Before:

After:

Simplifying demo layout

Demo panels are more clearly delineated but with less border/background complexity to snag the eye. Instead of having two buttons for toggling between demo and source, use a single, quieter toggle icon-only button.

Before:

After:

After, with source panel active:

Color updates

Headings use colors from Tailwind's slate family; body text uses colors from Tailwind's stone category. (Tailwind colors). The slate family is similar to our application slate colors but is more obviously blue. Stone is a warmer grey than our grey families and, I feel, offsets the coldness of the rest of the interface. The interface still uses brand-red for links and a few accents. None of these are dramatic changes.

Typography updates

• There are now only two sizes of body text: the rather-huge page intro text and everything else.
• There are now fewer indents. Content in Example components is still indented; Example headings are underlined to set off this indent.
• Leading (line-height) was loosened and made consistent across all body text.

Reduction of "Usage" noise

The "Usage" heading used on most pattern-library pages was in most case just visual noise. Updated Pattern component to make title optional and removed "Usage" headings in most, but not all, cases.

Before:

After:

[lyzadanger]

Just a little more space for body content...

[codecov]

Codecov Report

Merging #976 (319934d) into main (746f12f) will not change coverage.
The diff coverage is n/a.

@@            Coverage Diff            @@
##              main      #976   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           52        52           
  Lines          671       671           
  Branches       230       230           
=========================================
  Hits           671       671           

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[acelaya]

👏🏼