About this Style Guide

This page showcases all UI components used in the Conversion System website. Each component is designed for server-side rendering with Hono and follows our design system guidelines. Components are built with TypeScript and render to HTML strings.

Quick Start

Import and use components in your Hono routes:

import { getButtonComponent } from './templates/components/button';
import { getCardComponent } from './templates/components/card';

app.get('/example', (c) => {
  return c.html(`
    <div class="container">
      ${getButtonComponent({ 
        text: 'Get Started', 
        variant: 'primary',
        href: '/contact'
      })}
    </div>
  `);
});

Colors

Our brand colors create a professional, trustworthy appearance while maintaining visual interest through strategic accent colors.

Brand Colors

Brand Orange

#E05E0F

Primary CTA, Links

Brand Teal

#4D9A88

Secondary CTA, Success

Brand Blue

#172B42

Headings, Dark BG

Ghost

#F8F9FA

Light Background

Text Gray

#4B5563

Body Text

Semantic Colors

Success

#22C55E

Warning

#EAB308

Danger

#EF4444

Info

#3B82F6

Usage in Tailwind

<!-- Brand colors are defined in tailwind.config.js -->
<div class="bg-brand-orange text-white">Primary Orange</div>
<div class="bg-brand-teal text-white">Secondary Teal</div>
<div class="bg-brand-blue text-white">Dark Blue</div>
<div class="bg-brand-ghost">Light Background</div>

<!-- With opacity -->
<div class="bg-brand-orange/10 text-brand-orange">10% Orange BG</div>
<div class="border-brand-teal/30">30% Teal Border</div>

Typography

We use the Inter font family for its excellent readability across all screen sizes.

Display / Hero Title

text-5xl font-bold

Transform Your Business with AI

H1 / Page Title

text-4xl font-bold

AI Marketing Solutions

H2 / Section Title

text-3xl font-bold

Our Services

H3 / Subsection

text-2xl font-semibold

Custom AI Solutions

H4 / Card Title

text-xl font-semibold

Marketing Automation

Body Large

text-lg text-gray-700

We help businesses implement AI solutions that drive measurable results and competitive advantage.

Body Default

text-base text-gray-600

Our team of experts specializes in developing custom AI agents, automated workflows, and data-driven marketing strategies.

Body Small / Caption

text-sm text-gray-500

Spacing Scale

Consistent spacing creates visual harmony. Based on a 4px base unit.

xs (1) 4px

sm (2) 8px

md (4) 16px

lg (6) 24px

xl (8) 32px

2xl (12) 48px

3xl (16) 64px

4xl (24) 96px

Usage Examples

<!-- Padding -->
<div class="p-4">16px padding all sides</div>
<div class="px-6 py-4">24px horizontal, 16px vertical</div>

<!-- Margin -->
<div class="mb-8">32px bottom margin</div>
<div class="mt-12 mb-6">48px top, 24px bottom</div>

<!-- Gap (Flexbox/Grid) -->
<div class="flex gap-4">16px gap between items</div>
<div class="grid grid-cols-3 gap-6">24px grid gap</div>

Icons

We use Font Awesome 6 icons throughout the site. Common icons are also available as inline SVGs in components.

Common UI Icons

arrow-right

arrow-left

check

times

plus

minus

search

user

cog

bell

envelope

phone

calendar

chart-line

robot

brain

lightbulb

rocket

shield-alt

lock

globe

code

database

server

Usage

<!-- Font Awesome CDN (included in templates) -->
<i class="fas fa-arrow-right"></i>
<i class="fas fa-check text-green-500"></i>
<i class="fab fa-linkedin text-blue-600"></i>

<!-- With sizing -->
<i class="fas fa-robot text-2xl"></i>
<i class="fas fa-brain text-4xl text-brand-orange"></i>

<!-- In buttons (using component) -->
getButtonComponent({ 
  text: 'Get Started', 
  icon: 'arrow-right', 
  iconPosition: 'right' 
})

Buttons

Buttons trigger actions. Use the appropriate variant based on importance and context.

Variants

// Primary - Main CTAs, important actions
getButtonComponent({ text: 'Primary', variant: 'primary' })

// Secondary - Alternative actions
getButtonComponent({ text: 'Secondary', variant: 'secondary' })

// Outline - Less prominent actions
getButtonComponent({ text: 'Outline', variant: 'outline' })

// Ghost - Minimal emphasis
getButtonComponent({ text: 'Ghost', variant: 'ghost' })

// Danger - Destructive actions
getButtonComponent({ text: 'Danger', variant: 'danger' })

Sizes

getButtonComponent({ text: 'Small', size: 'sm' })      // px-3 py-1.5
getButtonComponent({ text: 'Medium', size: 'md' })    // px-5 py-2.5 (default)
getButtonComponent({ text: 'Large', size: 'lg' })     // px-6 py-3
getButtonComponent({ text: 'Extra Large', size: 'xl' }) // px-8 py-4

With Icons

// Icon on the right (for forward actions)
getButtonComponent({ 
  text: 'Get Started', 
  icon: 'arrow-right', 
  iconPosition: 'right' 
})

// Icon on the left (default)
getButtonComponent({ 
  text: 'Book a Call', 
  variant: 'secondary', 
  icon: 'calendar' 
})

As Links

Go to Contact Learn More

// Renders as <a> tag instead of <button>
getButtonComponent({ 
  text: 'Go to Contact', 
  href: '/contact',
  icon: 'arrow-right', 
  iconPosition: 'right' 
})

States

// Disabled state
getButtonComponent({ text: 'Disabled', disabled: true })

// Full width
getButtonComponent({ text: 'Full Width', fullWidth: true })

Cards

Cards group related content and actions together.

Variants

Elevated Card

Default elevated style with shadow that increases on hover.

Bordered Card

Border style that highlights on hover.

Gradient Card

Gradient background for featured content.

getCardComponent({ 
  title: 'Elevated Card', 
  description: 'Default elevated style with shadow.',
  variant: 'elevated',  // 'elevated' | 'bordered' | 'gradient' | 'dark'
  icon: 'strategy'      // 'strategy' | 'code' | 'lightning' | 'robot' | etc.
})

With Images & Footer

Popular

AI Strategy Consulting

Custom roadmaps for implementing AI across your organization.

Custom AI Development

Bespoke AI solutions tailored to your unique business needs.

getCardComponent({ 
  title: 'AI Strategy Consulting', 
  description: 'Custom roadmaps for implementing AI.',
  image: '/static/og-image.jpg',
  imageAlt: 'AI Strategy',
  badge: 'Popular',
  footer: getButtonComponent({ 
    text: 'Learn More', 
    variant: 'outline', 
    size: 'sm' 
  })
})

Badges

Small status indicators and labels for categorization and highlighting.

Variants

Default Primary Secondary Success Warning Danger Info

getBadgeComponent({ text: 'Default' })
getBadgeComponent({ text: 'Primary', variant: 'primary' })
getBadgeComponent({ text: 'Success', variant: 'success' })
// Variants: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'

With Dots & Icons

Online New Hot Trending

// With status dot
getBadgeComponent({ text: 'Online', variant: 'success', dot: true })

// With icon
getBadgeComponent({ text: 'New', variant: 'primary', icon: 'star' })
getBadgeComponent({ text: 'Hot', variant: 'danger', icon: 'fire' })

Sizes

Small Medium Large

Alerts

Notification banners for user feedback and important messages.

Information

This is an informational message about your account status.

Success!

Your changes have been saved successfully.

Warning

Your subscription will expire in 7 days.

Error

There was a problem processing your request. Please try again.

getAlertComponent({ 
  variant: 'info',     // 'info' | 'success' | 'warning' | 'danger'
  title: 'Information',
  message: 'This is an informational message.'
})

// Without title
getAlertComponent({ 
  variant: 'success',
  message: 'Operation completed successfully.',
  dismissible: true
})

Stats

Display statistics and key metrics to highlight achievements.

Card Variant

156%

ROI Increase

+23% vs last month

2.4M

Data Points Analyzed

+1.2M this quarter

47

AI Agents Deployed

-3 from last week

99.9%

Uptime

No change

getStatComponent({ 
  value: '156%', 
  label: 'ROI Increase',
  change: '+23% vs last month',
  changeType: 'positive',  // 'positive' | 'negative' | 'neutral'
  icon: 'chart',
  variant: 'card'
})

Default & Minimal

500+

Clients Served

$29M+

Revenue Generated

4.9/5

Client Satisfaction

+0.2 this year

Testimonials

Customer testimonial cards to build trust and social proof.

Featured Testimonial

"Conversion System transformed our marketing operations. The AI agents they built have automated 80% of our lead qualification process, saving us countless hours every week."

SJ

Sarah Johnson

VP of Marketing at TechCorp Industries

getTestimonialComponent({ 
  quote: 'Conversion System transformed our marketing...',
  author: 'Sarah Johnson',
  role: 'VP of Marketing',
  company: 'TechCorp Industries',
  rating: 5,
  variant: 'featured'  // 'default' | 'card' | 'featured'
})

Card Testimonials

"The ROI we've seen from their AI strategy consulting has been incredible. Best investment we've made this year."

MC

Michael Chen

CEO at StartupXYZ

"Professional, knowledgeable, and results-driven. Highly recommend their services."

ER

Emily Rodriguez

Marketing Director at Global Corp