# Styling

**Path:** Theming

[Back to Documentation Index](https://rubicblazor.skyconis.com/docs.md)

---

Styling

 [:root] Variables
 Group Css Variable 
 Value 

 surface --rb-surface 

 #ffffff 

 surface-container --rb-surface-container 

 #f7f7f7 

 primary --rb-primary 

 #4c6489 

 warning --rb-warning 

 #e18600 

 success --rb-success 

 #008346 

 info --rb-info 

 #97cbff 

 secondary --rb-secondary 

 #757575 

 danger --rb-danger 

 #e10f00 

 palette-percent --rb--lighten-percent 

 85% 

 --rb--darken-percent 

 20% 

 font --rb-font-size 
 Aa 

 16px 

 --rb-font-family 
 Aa 

 'system-ui','-apple-system','Segoe UI','Roboto','Helvetica Neue','Noto Sans','Liberation Sans','Arial','sans-serif','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji' 

 --rb-font-weight 
 Aa 

 400 

 --rb-letter-spacing 

 normal 

 --rb-line-height 

 initial 

 other --rb-bg-opacity 

 1 

 --rb-required-bgcolor 

 #ffffed 

 --rb-link-color 

 #0d6efd 

 ✕

 Contents