STYLE GUIDE
Roavero style guide.
Current Foundations and Semantic token values, with desktop, tablet, and mobile comparisons. Color swatches and type samples use live bindings.
01 / REGISTERED PAINT STYLES
Registered color styles
These swatches document the 17 registered paint styles used in the current project. Each swatch is bound to its exact paint style name and hex value.
Primary/50
#F7EFE8
Primary/100
#EFE3D9
Primary/200
#D8C2B1
Primary/300
#B69A87
Primary/400
#806151
Primary/500
#593C30
Primary/600
#432C23
Neutral/50
#FAF6EF
Neutral/100
#F1EAE2
Neutral/200
#DED4CA
Neutral/300
#C2B4A8
Neutral/400
#706158
Neutral/500
#58493F
Neutral/600
#302722
Additional/White
#FFFFFF
Additional/Soft Caramel
#F1DCC7
Additional/Caramel
#B97949
02 / REGISTERED TEXT STYLES
Registered text styles
These specimens document the 21 registered text styles used in the current project. Each row shows the exact style name, family, weight, size, line height, and letter spacing.
Heading/Heading 1
Grow with confidence.
Fraunces · SemiBold · 80px · 110% · 0px
Heading/Heading 2
Grow with confidence.
Fraunces · SemiBold · 68px · 130% · 0px
Heading/Heading 3
Grow with confidence.
Fraunces · SemiBold · 48px · 140% · -0.5px
Heading/Heading 4
Grow with confidence.
Fraunces · SemiBold · 40px · 125% · 0px
Heading/Heading 5
Grow with confidence.
Fraunces · SemiBold · 32px · 125% · 0px
Heading/Heading 6
Grow with confidence.
Fraunces · SemiBold · 24px · 150% · 0px
Body/Extra Large/Bold
Grow with confidence.
DM Sans · Bold · 20px · 150% · 0px
Body/Extra Large/Medium
Grow with confidence.
DM Sans · Medium · 20px · 150% · 0px
Body/Extra Large/Regular
Grow with confidence.
DM Sans · Regular · 20px · 150% · 0px
Body/Large/Bold
Grow with confidence.
DM Sans · Bold · 18px · 150% · 0px
Body/Large/Medium
Grow with confidence.
DM Sans · Medium · 18px · 150% · 0px
Body/Large/Regular
Grow with confidence.
DM Sans · Regular · 18px · 150% · 0px
Body/Medium/Bold
Grow with confidence.
DM Sans · Bold · 16px · 150% · 0px
Body/Medium/Medium
Grow with confidence.
DM Sans · Medium · 16px · 150% · 0px
Body/Medium/Regular
Grow with confidence.
DM Sans · Regular · 16px · 150% · 0px
Body/Small/Bold
Grow with confidence.
DM Sans · Bold · 14px · 150% · 0px
Body/Small/Medium
Grow with confidence.
DM Sans · Medium · 14px · 150% · 0px
Body/Small/Regular
Grow with confidence.
DM Sans · Regular · 14px · 150% · 0px
Body/Extra Small/Bold
Grow with confidence.
DM Sans · Bold · 12px · 150% · 0px
Body/Extra Small/Medium
Grow with confidence.
DM Sans · Medium · 12px · 150% · 0px
Body/Extra Small/Regular
Grow with confidence.
DM Sans · Regular · 12px · 150% · 0px
03 / COMPONENTS
UI components
Core components used across Roavero pages. Buttons, navigation, and logo mark the primary interactive elements.
Buttons
Navigation bar
Navbar uses neutral50 fill, ComponentLogo centred between two link groups. Width is fixed at 1440 px.
Logo
Roavero
Default
Roavero
2× Scale
Roavero
On Inverse
Navigation icons
Arrow Right
Arrow Left
Chevron Down
Menu
Close (X)
04 / RESPONSIVE LAYOUT
Layout roles by breakpoint
These are Semantic layout variables, not universal spacing primitives. Compare the exact desktop, tablet, and mobile values before applying them.
| Token | Desktop 1440 | Tablet 768 | Mobile 375 |
|---|---|---|---|
| Layout/Padding Global | 40 px | 32 px | 20 px |
| Layout/Padding Section | 120 px | 88 px | 64 px |
| Layout/Card Gap | 24 px | 20 px | 16 px |
| Viewport/Width | 1440 px | 768 px | 375 px |