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 Button
Disabled Button
Loading Button
Default primary buttons with grape background and white text
Secondary Buttons
Stroke Button
Disabled Stroke
Loading Stroke
Secondary buttons with white background and grape border
Call to Action Buttons
Call to Action
Disabled CTA
Loading CTA
Larger CTA buttons with enhanced styling for important actions
Button Sizes
Small Button Regular Button
Large CTA
Different button sizes for various use cases
Form Elements
Input Fields
Text Input
Email Input
Disabled Input
Select Dropdown
Select OptionChoose an optionOption 1Option 2Option 3
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
shadow box
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.