Typography
In the Axiomatic Color, you don’t pick text colors. You pick Text Hierarchy.
The system automatically calculates the correct color for each level of hierarchy based on the surface it sits on, ensuring APCA compliance.
Text Hierarchy
Section titled “Text Hierarchy”text-strong (Primary)
Section titled “text-strong (Primary)”Used for headings, titles, and primary content. This has the highest contrast against the background.
This is Strong Text
text-subtle (Secondary)
Section titled “text-subtle (Secondary)”Used for body text, descriptions, and secondary content. It has lower contrast than strong text but is still fully readable.
This is subtle text. It is easier on the eyes for long reading.
text-subtler (Tertiary)
Section titled “text-subtler (Tertiary)”Used for metadata, captions, and low-emphasis content.
text-link (Interactive)
Section titled “text-link (Interactive)”Used for hyperlinks and interactive text elements. It uses the brand hue (or a specific link hue) and ensures contrast.
Context Adaptation
Section titled “Context Adaptation”The power of these classes is that they adapt to their container.
Notice how text-strong is dark on the card but light on the spotlight. You didn’t have to change the class name.