CLOSING SALE. Everything is 35% OFF—no code needed.
CLOSING SALE. Everything is 35% OFF
Order Now
Order Now
What up, yo!
Colors
Typography
Fonts
Heading text sizes
Body text sizes
Buttons
Color
Neutrals
Colors
Typography
Fonts
AaBbCc123
Obviously Narrow
.font-sans
AaBbCc123
Obviously (default)
.font-sans
AaBbCc123
Obviously Wide
.font-sans-wide
Display heading sizes
Display XX-Large
.display-xxl
Display
Display X-Large
.display-xl
Display
Display Large
.display-lg
Display Large
Display Medium
.display-md
Display Medium
Display Small
.display-sm
Display Small
Display X-Small
.display-xs
Display Extra Small
Heading text sizes
Heading 1
.heading-1
Heading 1
Heading 2
.heading-2
Heading 2
Heading 3
.heading-3
Heading 3
Heading 4
.heading-4
Heading 4
Body text sizes
Body Large
.body-large
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Body Medium
.body-medium
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Body Small
.body-small
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Body X-Small
.body-xs
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Buttons
Layout
Button
Fit (default)
.button
Square
.button
.button-square
Button
Fluid
.button
.button-fluid
Sizes
Button
Medium (default)
.button
Button
Small
.button
.button-small
Appearance
Dark (default)
Button
Button
Filled (default)
.button
Button
Button
Outlined
.button
.button-outlined
Button
Button
Ghost
.button
.button-ghost
Light
Button
Button
Filled (default)
.button
.button-light
Button
Button
Outlined
.button
.button-light
.button-outlined
Button
Ghost
.button
.button-light
.button-ghost
Yellow
Button
Button
Filled (default)
.button
.button-yellow
Button
Button
Outlined
.button
.button-yellow
.button-outlined
Button
Ghost
.button
.button-yellow
.button-ghost
Green
Button
Button
Filled (default)
.button
.button-dark-green
Button
Button
Outlined
.button
.button-dark-green
.button-outlined
Button
Ghost
.button
.button-dark-green
.button-ghost
Sand
Button
Button
Filled (default)
.button
.button-red
Button
Button
Outlined
.button
.button-red
.button-outlined
Button
Ghost
.button
.button-red
.button-ghost
Different by design. Yotobi is a blend of fresh fruit and agave distilled together for a lighter, brighter sip.
The Mezcal
Our Story
Order Online
Media Kit
Contact Us
Terms of Use
Privacy Policy
Instagram
Spotify
© 2025 Yotobi, Inc. All Rights Reserved.