A typography scale defines the size progression of your text: h1 through h6, body, small, and caption. But size alone does not create hierarchy. Color adds a second dimension that reinforces which text is most important and which is supporting information.
The Three-Tier Text Color System
Primary text (headings and body): Your dark base at full strength. This is your highest-contrast text, used for everything the user must read. H1 through H3 headings and body paragraphs all use this color.
Secondary text (subheadings and labels): Your dark base at about 75% opacity or a mid-dark variant (like #475569). This is for text that supports the primary content: h4 through h6, labels, captions, and navigation items. Clearly readable but visually subordinate.
Tertiary text (metadata and hints): Your dark base at about 50% opacity or a medium gray (like #94a3b8). This is for timestamps, word counts, "last updated" notices, placeholder text, and other low-priority information. Readable if you look for it, but does not compete for attention.
Colored Headings
Some designs use the primary brand color for headings instead of the dark base. This works if (and only if) the primary has sufficient contrast against your background. Check this pair specifically in PaletteRx Step 3. Remember: headings qualify as "large text" under WCAG, so they only need 3:1 contrast (AA), giving you more color flexibility.
Link Text Within Content
Links within body text need to be visually distinct from surrounding text. The traditional approach (primary brand color + underline) is well-established and accessible. The color difference should be obvious without underline (for hover states that add/remove underlines).