Colors

bg-raisin
#2E2525

bg-wine
#54274F

bg-davys-grey
#535353

bg-davys-grey-dark
#555050

bg-skobeloff
#145A5A

bg-olive-drab
#86764F

bg-powder-blue
#B9CECE

bg-silver
#CECECE

bg-vermilion
#D92C05

bg-lime-green
#35A81C

bg-flame
#E25B3C

bg-pale-silver
#D8D6D2

bg-dust-storm
#E3D6D6

bg-thistle
#E3D9E4

bg-alabaster
#ECE6DD

bg-beige
#ECE6DE

bg-champagne
#F5F0E9

bg-floral-white
#FBF8F4

Typography

Font Families

font-sans (Body text)

Bricolage Grotesque

The quick brown fox jumps over the lazy dog.

Weight: 300 (Light) | Size: 15px | Line-height: 27px

font-display (Headings)

Yeseva One

The quick brown fox jumps over the lazy dog.

Weight: 400 (Regular)

Font Weights - Bricolage Grotesque

font-light (300) - Default body

Abels Wijnen

font-normal (400)

Abels Wijnen

font-medium (500)

Abels Wijnen

font-semibold (600)

Abels Wijnen

font-bold (700) - h5/h6

Abels Wijnen

Headings

h1 - Yeseva One 37px/47px

Heading One

h2 - Yeseva One 28px/47px

Heading Two

h3 - Yeseva One 22px/47px

Heading Three

h4 - Yeseva One 20px/30px

Heading Four

h5 - Bricolage Grotesque Bold 15px/27px

Heading Five

h6 - Bricolage Grotesque Bold 15px/27px

Heading Six

Body Text & Links

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog. This is a sample paragraph demonstrating the default body text styling with Bricolage Grotesque Light at 15px with 27px line height for optimal readability.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, nisl quis varius molestie, nunc tortor posuere metus, vitae hendrerit mauris erat ac ante. Cras finibus aliquam placerat. Maecenas non ullamcorper magna, ac bibendum elit. Nunc a sagittis turpis. Phasellus efficitur, tellus nec condimentum venenatis, ex elit dapibus dui, et vulputate augue arcu non enim. Nam ex dolor, facilisis vitae sapien non, cursus elementum sapien. Donec vitae ante ipsum. Nulla id suscipit orci, eget vehicula dui.

Nullam pretium, nisl quis varius molestie

Links in content areas (use .prose wrapper)

This is a paragraph with an example link that shows the content link styling with the wine color and underline decoration.

Typography Specifications

Element	Font Family	Weight	Size (Mobile → Desktop)	Line Height
p (body)	Bricolage Grotesque	300 (Light)	15px	1.8
h1	Yeseva One	400 (Regular)	28px → 37px fluid	1.27
h2	Yeseva One	400 (Regular)	22px → 28px fluid	1.3
h3	Yeseva One	400 (Regular)	18px → 22px fluid	1.35
h4	Yeseva One	400 (Regular)	17px → 20px fluid	1.5
h5	Bricolage Grotesque	700 (Bold)	15px	1.8
h6	Bricolage Grotesque	700 (Bold)	15px	1.8
a (in .prose)	Bricolage Grotesque	300 (Light)	15px	1.8 + underline + wine

Headings use clamp() for fluid scaling between mobile and desktop. Line heights are ratio-based for consistent vertical rhythm. All headings use text-wrap: balance for better line distribution.

Icons

Usage in Templates

require(SvgIcons::class);
?>


renderHtml('wine-glass', 'w-6 h-6 fill-current') ?>


wineGlassHtml('w-6 h-6 fill-current') ?>

Custom Theme Icons

Located in: web/svg/

wine-glass

grape

wine-regions

drop

land

meal

house

call

chat-cloud

usps-check

social-facebook

social-instagram

social-linkedin

Buttons

Variants

.btn .btn-primary .btn .btn-secondary .btn .btn-tertiary .btn .btn-ghost .btn .btn-ghost-primary .btn .btn-ghost-tertiary

Sizes

.btn-size-lg (default) .btn-size-sm

States

(normal) .is-active disabled

Links as Buttons

Primary Link Secondary Link

Button classes can be applied to anchor tags

Modals & Drawers

Modal

dialog.showModal()

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog. This is a sample paragraph Light at 15px with 27px line height for optimal readability.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit quis varius molestie, non ullamcorper magna, ac bibendum elit. Nunc a sagittis turpis. Phasellus efficitur, tellus nec condimentum venenatis, ex elit dapibus dui, et vulputate augue arcu non enim. Nam ex dolor, facilisis vitae sapien non, cursus elementum sapien. Donec vitae ante ipsum. Nulla id suscipit orci, eget vehicula dui.

Lorem ipsum quis varius molestie, nunc tortor posuere metus, vitae hendrerit mauris eratvitae hendrerit mauris erat ac ante. Cras finibus aliquam placerat. Maecenas non ullamcorper magna, ac bibendum elit. Nunc a sagittis turpis. Phasellus efficitur, tellus nec condimentum venenatis, ex elit dapibus dui, et vulputate augue arcu non enim. Nam ex dolor, facilisis vitae sapien non, cursus elementum sapien. Donec vitae ante ipsum. Nulla id suscipit orci, eget vehicula dui.

Nullam pretium, nisl quis varius molestie

Lorem ac ante. Cras finibus aliquam placerat. Maecenas non ullamcorper magna, ac bibendum elit. Nunc a sagittis turpis. Phasellus efficitur, tellus nec condimentum venenatis, ex elit dapibus dui, et vulputate augue arcu non enim. Nam ex dolor, facilisis vitae sapien non, cursus elementum sapien. Donec vitae ante ipsum. Nulla id suscipit orci, eget vehicula dui.

Lorem ipsum dolor sit amet, consectetur adipiscing aliquam placerat. Maecenas non ullamcorper magna, ac bibendum elit. Nunc a sagittis turpis. Phasellus efficitur, tellus nec condimentum venenatis, ex elit dapibus dui, et vulputate augue arcu non enim. Nam ex dolor, facilisis vitae sapien non, cursus elementum sapien. Donec vitae ante ipsum. Nulla id suscipit orci, eget vehicula dui.

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog. This is a sample paragraph Light at 15px with 27px line height for optimal readability.

Lorem ipsum dolor sit amet

Nullam pretium, nisl quis varius molestie

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog. This is a sample paragraph Light at 15px with 27px line height for optimal readability.

Lorem ipsum dolor sit amet

Nullam pretium, nisl quis varius molestie

Donec sit amet cursus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet cursus nulla, ac bibendum nisl. Mauris posuere sed urna ut ullamcorper. Quisque magna nisl, tristique eu vehicula

Donec sit amet cursus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet cursus nulla, ac bibendum nisl. Mauris posuere sed urna ut ullamcorper. Quisque magna nisl, tristique eu vehicula

Donec sit amet cursus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet cursus nulla, ac bibendum nisl. Mauris posuere sed urna ut ullamcorper. Quisque magna nisl, tristique eu vehicula