link,[object Object]
ACQM Docs

Appearance

Design System Example ​

Overview ​

This page demonstrates the ACQM design system with integrated How It Works styling patterns. It serves as a living style guide for developers and designers.

Table of Contents ​

🎨 Core Components ​

  • Consistent Buttons
  • Consistent Cards
  • Consistent Inputs
  • Badges & Indicators

🚀 Advanced Patterns ​

  • Hero Sections
  • Journey Cards
  • Feature Grids
  • Tabbed Interfaces

📚 Resources ​

  • Design Tokens
  • Usage Examples
  • Best Practices
  • Documentation

How Design System Works ​

Follow these steps to implement consistent UI components in your application:

Step 1: Discover Components ​

Browse through our comprehensive library of consistent UI components designed for ACQM.

Highlights:

  • 50+ pre-built components
  • Consistent styling patterns
  • Easy to customize

Step 2: Implement Design System ​

Integrate components into your application with our design system context and utilities.

Highlights:

  • Context-based theming
  • Type-safe components
  • Automatic consistency

Step 3: Customize & Scale ​

Extend the design system with your own components while maintaining consistency.

Highlights:

  • Extensible architecture
  • Design tokens support
  • Scalable patterns

Design System Features ​

Everything you need to build consistent, accessible, and beautiful user interfaces:

User-Centric Design ​

Components designed with user experience in mind, following accessibility best practices.

Features:

  • WCAG compliant
  • Keyboard navigation
  • Screen reader support

Performance Optimized ​

Lightweight components with optimized rendering and minimal bundle impact.

Features:

  • Tree-shakeable
  • Lazy loading
  • Minimal dependencies

Type Safe ​

Full TypeScript support with comprehensive type definitions for all components.

Features:

  • TypeScript first
  • IntelliSense support
  • Compile-time safety

Interactive Components ​

Explore our tabbed interface components:

Components Tab ​

Browse our collection of consistent UI components.

Patterns Tab ​

Common UI patterns and layouts for consistent user experience.

Support & Resources ​

Everything you need to succeed with our design system:

Documentation ​

Comprehensive guides and examples for every component in the design system.

Quick Start ​

Get up and running quickly with our step-by-step implementation guide.

Analytics ​

Track component usage and performance metrics across your application.

Consistent Buttons ​

Pre-built button components with consistent styling, hover effects, and accessibility features. All buttons follow the same design patterns and behavior.

Predefined Variants ​

  • Primary Button: Main call-to-action buttons
  • Secondary Button: Secondary actions and alternatives
  • Outline Button: Subtle actions with border emphasis
  • Destructive Button: Delete and dangerous actions

Size Variants ​

  • Small Size: Compact size for dense layouts
  • Default Size: Standard size for most use cases
  • Large Size: Larger size for emphasis
  • Icon Button: Icon-only buttons for space-constrained areas

Custom Variants ​

  • Ghost Variant: Transparent background with hover effects
  • Link Variant: Text-only buttons that look like links
  • Custom Combination: Mix and match variants with sizes

Usage Example ​

tsx
import { ConsistentButton, PrimaryButton } from '@/components/design-system';

// Predefined variant
<PrimaryButton>Click me</PrimaryButton>

// Custom variant with size
<ConsistentButton variant="outline" size="lg">
  Custom Button
</ConsistentButton>

Consistent Cards ​

Flexible card components with consistent styling, hover effects, and multiple variants. Perfect for displaying content, features, and information.

Card Variants ​

  • Default Card: Standard card with consistent styling and subtle shadows
  • Hover Card: Interactive card with smooth hover effects
  • Elevated Card: Card with pronounced shadows for emphasis
  • Custom Styled Card: Demonstrates customization with additional classes

Usage Example ​

tsx
import { ConsistentCard, HoverCard, ElevatedCard } from '@/components/design-system';

// Basic card
<ConsistentCard>
  <ConsistentCardHeader>
    <ConsistentCardTitle>Title</ConsistentCardTitle>
    <ConsistentCardDescription>Description</ConsistentCardDescription>
  </ConsistentCardHeader>
  <ConsistentCardContent>
    Content goes here
  </ConsistentCardContent>
</ConsistentCard>

// Predefined variants
<HoverCard>Content with hover effects</HoverCard>
<ElevatedCard>Content with elevated shadow</ElevatedCard>

Consistent Inputs ​

Form input components with consistent styling, validation states, and accessibility features. Perfect for forms, search fields, and data entry.

Input Variants ​

  • Default Input: Standard styling with subtle borders
  • Filled Input: Background fill for emphasis
  • Outlined Input: Thick border for focus
  • Ghost Input: Minimal styling

Validation States ​

  • Default State: Standard appearance
  • Error State: Red border for errors
  • Success State: Green border for success

Size Variants ​

  • Small Size: Compact size for dense layouts
  • Default Size: Standard size for most use cases
  • Large Size: Larger size for emphasis

Usage Example ​

tsx
import { ConsistentInput, FilledInput, ErrorInput } from '@/components/design-system';

// Basic input
<ConsistentInput placeholder="Enter text" />

// Variants
<FilledInput placeholder="Filled input" />
<OutlinedInput placeholder="Outlined input" />

// States
<ErrorInput placeholder="Error state" />
<SuccessInput placeholder="Success state" />

// Sizes
<ConsistentInput size="sm" placeholder="Small" />
<ConsistentInput size="lg" placeholder="Large" />

Best Practices ​

Guidelines and recommendations for using the design system effectively in your projects.

✅ Do's ​

  • Use consistent components for all UI elements
  • Follow the predefined variants and sizes
  • Maintain consistent spacing and typography
  • Test components across different screen sizes
  • Use semantic HTML and accessibility features
  • Keep components focused and single-purpose

❌ Don'ts ​

  • Don't hardcode styles outside the design system
  • Don't create custom variants without approval
  • Don't mix different design patterns
  • Don't ignore accessibility guidelines
  • Don't use components for unintended purposes
  • Don't skip testing on different devices

💡 Pro Tips ​

Performance ​

  • Use lazy loading for large component sets
  • Optimize images and assets
  • Minimize bundle size with tree shaking

Maintenance ​

  • Keep components up to date
  • Document custom implementations
  • Regular design system reviews

Complete Form Example ​

A real-world example showing how all components work together in a complete form:

Contact Form ​

Example form using consistent components from the design system:

tsx
<ConsistentCard className="max-w-2xl mx-auto">
  <ConsistentCardHeader>
    <ConsistentCardTitle>Contact Form</ConsistentCardTitle>
    <ConsistentCardDescription>
      Example form using consistent components from the design system
    </ConsistentCardDescription>
  </ConsistentCardHeader>
  <ConsistentCardContent className="space-y-6">
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div className="space-y-2">
        <label className="text-sm font-medium text-foreground">First Name</label>
        <ConsistentInput placeholder="Enter first name" />
      </div>
      <div className="space-y-2">
        <label className="text-sm font-medium text-foreground">Last Name</label>
        <ConsistentInput placeholder="Enter last name" />
      </div>
    </div>

    <div className="space-y-2">
      <label className="text-sm font-medium text-foreground">Email Address</label>
      <ConsistentInput type="email" placeholder="email@example.com" />
    </div>

    <div className="space-y-2">
      <label className="text-sm font-medium text-foreground">Subject</label>
      <ConsistentInput placeholder="What's this about?" />
    </div>

    <div className="space-y-2">
      <label className="text-sm font-medium text-foreground">Message</label>
      <ConsistentInput
        placeholder="Write your message here..."
        size="lg"
      />
    </div>

    <div className="flex flex-col sm:flex-row gap-3 pt-4">
      <PrimaryButton className="flex-1">Send Message</PrimaryButton>
      <SecondaryButton className="flex-1">Save Draft</SecondaryButton>
    </div>
  </ConsistentCardContent>
</ConsistentCard>

Ready to Get Started? ​

Start using the ACQM design system in your projects today. All components are ready to use and fully documented.

Next Steps ​

  1. View Documentation: Read the complete design system documentation
  2. Browse Components: Explore all available components
  3. Start Building: Implement consistent UI in your projects

Related Documentation: