Standardize font colors

[victorlin]

Some examples of differences:

• Splash page heading 1: #333 (src)
• Splash page heading 2: #333 (src)
• Splash page focus paragraph: unset, browser default (src)
• Team page linked name: #333 (src)
• Team page unlinked name: unset, browser default (src)
• Team page blurb: unset, browser default (src)
• All text on blog: #333 (src)

* for me, browser default is #000

Possible solution

1. Settle on a standard font color
2. Update explicit color definitions to use the standard font color
3. Set the standard font color as the global default and remove other redundant color definitions

Links

• First mentioned in Update people component #862 (review)
• Slack thread on email

[victorlin]

For the team page name differences, I'm guessing intent of setting link color to #333 is an attempt to match the non-link color.

The first thing to do is set the default color explicitly. global.css seems to an appropriate place to do this.

Next, those two color definitions should be synced. I don't think it's easily done with the current setup since global.css and styled components in JSX can't share a common variable (or maybe they can?). The lazy alternative is to add a comment next to each declaring the relationship.

[victorlin]

Next, those two color definitions should be synced. I don't think it's easily done with the current setup since global.css and styled components in JSX can't share a common variable (or maybe they can?)

Improvements coming from discussions in #963 should aim to make things like this easier.

[victorlin]

Updated this issue after receiving email feedback on font colors for accessibility.

Another factor to consider alongside color might be font weight, which seems pretty thin to me.

[genehack]

It should be much easier to accomplish this once everything is using App Router, because all the styled-components stuff will be gone and we can set this in globals.css and be done with it.