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
Grey Scale
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.