Colors
Click on the color to copy its Tailwind class name
Primary #D92926
Secondary #636569
Red #D92926
Turqouise #0074A2
Grayscale
White #FFFFFF
Soft Gray #EEEEEE
Gray #636569
Black #000000
Error states & others
success #056D59
info #1D4ED8
warning #EABF55
error #BF1322
sale #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 #EEEEEE
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
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
Primary Link
Normal
Secondary Link
Normal
Popup messages
Messages
Warning! Your Message Text
Success! Your Message Text
Error! Your Message Text
Info! Your Message Text
Dispatch a message:
Pagination
loader
読み込み中...