Colors
Click on the color to copy its Tailwind class name
Primary #9E3223
Secondary #666666
Rouge #9E3223
Darker Red #5F1B15
Vert #557C70
Branding
Brand Colors
Click on the color to copy its Tailwind class name
Tertiary #9e3223
Tertiary-Dark #74261a
Color Alt 1 #d9c79e
Color Alt 2 #678d83
Color Alt 3 #1d3a2c
Color Alt 4 #e3e1db
Color Inactive #a7a9ac
Color Hover #666
Neutral Colors
Click on the color to copy its Tailwind class name
White #fff
X Light Gray #f8f8f8
Light Gray #eaeaea
Medium Gray #a7a9ac
Dark Gray #666
Darkest Gray #333
Noir #000
Utility Colors
Click on the color to copy its Tailwind class name
Base #000
Error #df0328
Success #004496
Warning #eaa638
Ui #a7a9ac
Grayscale
White #FFFFFF
Soft Gray #F4F3F1
Gray #E3E1DB
Noir #010101
Noir #000000
Error states & others
info #1D4ED8
solde #C41800
Overlays
popup-overlay #00700B 20%
Containers
Use 'container' colors instead of 'gray' on cards, rows, columns etc.
container-lighter #FFFFFF
container #FFFFFF
container-darker #F4F3F1
Typography
Headings
Headings are styled globally only for Page Builder (data-content-type="heading"). Use title classes (next section) for templates.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Heading Small
Heading X-Small
Typography
Use title classes to apply title styles to any element (can be used with @apply)
Headline A
Headline B
Headline C
Sub-headline A
Body Copy A
Body Copy B
Body
Buttons
Note: Buttons have different paddings from sides because of the icon placement
Click on a button to copy its code
Primary button
Normal
Loading
Disabled
Secondary button
Normal
Loading
Disabled
Icons
Click on an icon to copy its code
Use view model - Hyva SvgIcons To set icon color with text color class, in the SVG file replace the fill attribute to 'currentColor'
question-mark-circle
box
heart
heart-filled
scale
check
mail
bell
phone
message
menu
close
globe
map
x
icons/x-small
pencil
trash
minus
plus
phone-call
chevron-down
search
user
shopping-cart
truck-delivery
headphones
truck-return
arrow-left
arrow-right
gb
warning-rounded
success-rounded
error-rounded
info-rounded
check-small
chevron-right
chevron-up
home
credit-card
dashboard
door-exit
download
news
facebook
tiktok
instagram
socialx
youtube
pinterest
Inputs
Click on an input to copy its code
Follow the same structure for inputs!
There must be defined placeholder="..." for the input states!
Input
Normal
Disabled
Success
Error
Text Area
Dropdown
Normal
Disabled
Success
Error
Elements
Click on an element to copy its code
Checkbox with label
Checkbox without label
Radio button
Links
Blockquote
A block quotation is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation
Fonts
Primary font family: 'Motiva Sans', sans-serif Primary font italic: 'Motiva Sans', sans-serif Primary font bold: 'Motiva Sans', sans-serif Secondary font bold: 'Rasmus', 'Times New Roman', serif
Popup messages
Messages
Warning! Your Message Text
Success! Your Message Text
Error! Your Message Text
Info! Your Message Text
Dispatch a message:
Pagination
loader
En cours de chargement...