General Example

General testing page for various components and features.

Typography

Heading 1 - Main Page Title

Heading 2 - Section Title

Heading 3 - Subsection Title

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

Small text - Used for captions, metadata, and secondary information.

Buttons

Button Variations

Forms

Contact Form Example

Full Name

<div>
  <label class="block text-14 font-medium mb-2">Email Address</label>
  <input type="email" placeholder="[email protected]" class="w-full px-3 py-2 border border-grey-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-grape-500 focus:border-transparent" />
  <p class="text-red-500 text-sm mt-1">Please enter a valid email address</p>
</div>

<div>
  <label class="block text-14 font-medium mb-2">Company Size</label>
  <select class="w-full px-3 py-2 border border-grey-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-grape-500 focus:border-transparent">
    <option>1-10 employees</option>
    <option>11-50 employees</option>
    <option>51-200 employees</option>
    <option>200+ employees</option>
  </select>
</div>

<div class="flex gap-4">
  <::Button type="submit" class="flex-1">Submit</::Button>
  <::Button kind="stroke" type="button" class="flex-1">Cancel</::Button>
</div>

Cards

Feature Cards

Feature Card

This demonstrates the card-marketing class with hover effects and proper spacing.

<::Button kind="stroke">Learn More

Product Card

Showcasing the consistent design language across all components.

<::Button>Get Started

Testimonial Card

Customer testimonials and success stories with the new styling system.

<::Button kind="cta">See Demo

Color Palette

Grape 500

#895AE8

Grape 400

#AB86F6

Grape 50

#F9F7FF

Grey 900

#111111

Icons

Available Icons

<::Icon id="logo" class="w-8 h-8 mx-auto mb-2" /> logo

<::Icon id="check" class="w-8 h-8 mx-auto mb-2" /> check

<::Icon id="user" class="w-8 h-8 mx-auto mb-2" /> user

<::Icon id="shield" class="w-8 h-8 mx-auto mb-2" /> shield

<::Icon id="brain" class="w-8 h-8 mx-auto mb-2" /> brain

<::Icon id="check-circle" class="w-8 h-8 mx-auto mb-2" /> check-circle

Icon Sizes

<::Icon id="logo" class="w-4 h-4" /> <::Icon id="logo" class="w-6 h-6" /> <::Icon id="logo" class="w-8 h-8" /> <::Icon id="logo" class="w-12 h-12" /> <::Icon id="logo" class="w-16 h-16" />

Usage Notes

This example page showcases:

Typography system - All text styles and sizes
Button components - Different button variations and states
Form elements - Input fields, validation states
Card components - Marketing cards with hover effects
Color system - Brand colors and their usage
Icon system - Available icons and sizing options

Use this page as a reference for implementing consistent design patterns across the application.