Data displayVisual draft 0.1
Typography
Defines the hierarchy and rhythm of product content.
CoreFoundational primitiveHTML first
01 / Preview
The current Angle direction.
Display / 48
Recognize every customer.
Body / 16Build a loyalty experience that adapts to the member, their value, and the moment.
MEMBER_VALUE $284.20 +18.4%02 / Decision
What this component must preserve.
Angle component decision
Use Inter for interface language and JetBrains Mono for identifiers, metrics, timestamps, and code.
03 / Anatomy
Parts with a specific job.
Display
01Heading
02Body
03Label
04Mono
0504 / States
The happy path is only one state.
01Default
02Hover
03Active
04Focus
05Disabled
06Loading
07Success
08Error
05 / Guidance
Use the contract, not the screenshot.
Do
Use Inter for interface language and JetBrains Mono for identifiers, metrics, timestamps, and code.
Avoid
Do not create a one-off version that bypasses shared states, tokens, focus behavior, or the component decision documented here.