Colours
Color helps express hierarchy, establish brand presence, and provide meaning. The Rence Material tonal system ensures accessibility.
Material 3 Tonal system
M3 Tonal System
Rence Material Identity
Primary
#152d61
Container
#DBDEE6
Secondary
#5f6368
Container
#f1f3f4
Surface
#ffffff
Container
#f8f9fa
Our tonal system maps to standard Material 3 roles, ensuring consistent contrast and a professional Rence-inspired palette.
Accessible pairings!
Usage Example
HTML
<!-- Primary Tonal Pair -->
<div class="p-4 rounded-4 mb-3" style="background-color: #152d61; color: white;">
Primary Color
</div>
<div class="p-4 rounded-4" style="background-color: #DBDEE6; color: #174ea6;">
Primary Container
</div>