AIGuardian Website Style Guide

Overview

This style guide defines the UI components, patterns, and best practices for the AIGuardian website. It ensures consistency across all pages and features while maintaining the brand identity.

Design System

The AIGuardian website uses a component-based design system built with:

• Next.js

• TypeScript

• Tailwind CSS

• Radix UI primitives

• Shadcn UI components

Layout

Grid System

• Use Tailwind's responsive grid system

• Base container width: max-w-7xl with px-4 padding

• Responsive breakpoints:

- sm: 640px - md: 768px - lg: 1024px - xl: 1280px - 2xl: 1536px

Spacing

• Use Tailwind's spacing scale

• Section padding: py-12 md:py-24 lg:py-32

• Component spacing: gap-4 to gap-10 based on context

• Content padding: p-4 to p-8 based on component size

Responsive Behavior

• Mobile-first approach

• Stack elements vertically on mobile

• Use grid layouts for larger screens

• Adjust text sizes across breakpoints

Typography

Headings

• H1: text-4xl md:text-5xl lg:text-6xl font-bold

• H2: text-3xl md:text-4xl font-bold

• H3: text-2xl md:text-3xl font-bold

• H4: text-xl md:text-2xl font-bold

• H5: text-lg md:text-xl font-bold

• H6: text-base md:text-lg font-bold

Body Text

• Regular: text-base

• Small: text-sm

• Extra small: text-xs

• Line height: leading-normal or leading-relaxed

• Muted text: text-muted-foreground

Links

• Default: text-primary hover:underline

• Subtle: text-muted-foreground hover:text-foreground

• Navigation: hover:text-primary transition-colors

Color Usage

Background Colors

• Primary background: bg-background

• Secondary background: bg-muted

• Accent background: bg-primary

• Card background: bg-card

Text Colors

• Primary text: text-foreground

• Secondary text: text-muted-foreground

• Accent text: text-primary

• Inverted text: text-primary-foreground (on dark backgrounds)

Border Colors

• Default border: border-border

• Focus border: border-primary

• Hover border: border-input

Components

Buttons

• Primary: Button Text

• Secondary: Button Text

• Outline: Button Text

• Ghost: Button Text

• Link: Button Text

• Sizes: "default", "sm", "lg", "icon"

Cards

• Default: ...

• With header: Include , , and

• With content: Include

• With footer: Include

Navigation

• Main navigation: Horizontal on desktop, mobile menu on small screens

• Mobile menu: Use Sheet component from shadcn/ui

• Active state: text-primary font-medium

Forms

• Inputs: Use shadcn/ui Input component

• Labels: Use shadcn/ui Label component

• Validation: Display error messages below inputs

• Submit buttons: Use primary button style

Tabs

• Use shadcn/ui Tabs component

• Active tab: Highlighted with primary color

• Content: Contained within TabsContent

Alerts

• Info: Blue background

• Success: Green background

• Warning: Yellow background

• Error: Red background

• Include icon when appropriate

Icons

• Use Lucide React icons

• Consistent sizing: h-4 w-4 to h-6 w-6

• Match icon color to text color

Patterns

Hero Sections

• Full-width background

• Large heading with supporting text

• Call-to-action button

• Optional background image or pattern

Feature Sections

• Grid of cards or feature items

• Icon + heading + description format

• Consistent spacing between items

Testimonial Sections

• Card-based layout

• Include avatar, name, and role

• Highlight quote with larger text or quotation marks

Documentation Sections

• Card-based layout

• Clear categorization

• Consistent call-to-action buttons

FAQ Sections

• Use Accordion component

• Group related questions

• Keep answers concise and helpful

Animation

Transitions

• Use subtle transitions for hover states

• Duration: 150ms to 300ms

• Timing function: ease-in-out

Loading States

• Use skeleton loaders for content

• Spinner for button loading states

• Maintain layout during loading to prevent jumps

Accessibility

Color Contrast

• Maintain WCAG AA compliance (4.5:1 for normal text, 3:1 for large text)

• Test color combinations for sufficient contrast

Keyboard Navigation

• Ensure all interactive elements are focusable

• Visible focus states for keyboard users

• Logical tab order

Screen Readers

• Provide alt text for all images

• Use semantic HTML elements

• Include ARIA attributes when necessary

Responsive Design

• Ensure all content is accessible on all screen sizes

• No horizontal scrolling on mobile devices

• Touch targets at least 44x44px

Best Practices

Performance

• Optimize images with next/image

• Lazy load off-screen content

• Minimize JavaScript bundle size

SEO

• Use semantic HTML

• Include meta tags and structured data

• Ensure crawlable links

Code Quality

• Follow TypeScript best practices

• Use consistent naming conventions

• Document complex components

---

This style guide is a living document and should be updated as the design system evolves. All contributors should follow these guidelines to maintain consistency across the AIGuardian website.