Typography & Design System

A comprehensive showcase of our design system's typography, buttons, and UI components.

Typography

Headings

Heading 1 (text-48)

Main page titles and hero headings

Heading 2 (text-35)

Section titles and major content divisions

Heading 3 (text-24)

Subsection titles and card headers

Heading 4 (text-20)

Minor section headers

Heading 5 (text-18)

Small section headers

Heading 6 (text-16)

Smallest section headers

Body Text

Body Large (text-18) - This is the standard large body text used for important content and descriptions. It provides good readability and maintains consistent spacing.

Used for hero descriptions and important content

Body Regular (text-16) - This is the standard paragraph text used throughout the site. It provides good readability and maintains consistent spacing.

Default body text for most content

Body Small (text-14) - This is smaller text used for secondary information, captions, and metadata.

Used for captions, metadata, and secondary information

Caption (text-12) - Very small text used for fine print, legal text, and minimal metadata.

Used for fine print and minimal metadata

Font Weights

Regular (font-reg) - 400 weight

Medium (font-med) - 500 weight

Semi Bold (font-semi) - 600 weight

Bold (font-bold) - 700 weight

Extra Bold (font-exbold) - 800 weight

Black (font-black) - 900 weight

Links

This is a paragraph with a standard link that follows our link styling.

Here's another link example to show consistency.

Buttons

Primary Buttons

Default primary buttons with grape background and white text

Secondary Buttons

Secondary buttons with white background and grape border

Call to Action Buttons

Larger CTA buttons with enhanced styling for important actions

Button Sizes

Different button sizes for various use cases

Form Elements

Input Fields

Select Dropdown

Color Palette

Primary Colors

Grape 400
Grape 500
Grape 600
Grape 50

Grey Scale

50
100
300
500
600
900

Spacing & Layout

Spacing Scale

4px (w-4 h-4)

8px (w-8 h-8)

12px (w-12 h-12)

16px (w-16 h-16)

24px (w-24 h-24)

Layout Utilities

Screenshot Style

screenshot class

Shadow Box

_shadow-box class

Card Marketing

card-marketing class

Component Examples

Section Headline Component

Example Section Title

This is an example description for the section headline component.

Big Point Component

Example Big Point

This is a subtitle for the big point component that demonstrates the styling and layout.