Design Modules

Explore all the reusable components and modules that power our website design system.

Website Design System

A comprehensive collection of reusable components, styles, and patterns that ensure consistency across our platform.

Typography

Our typography system uses Inter font family with carefully crafted scales and weights.

Headings

Heading 1 - Hero Title

Heading 2 - Section Title

Heading 3 - Subsection

Heading 4 - Card Title

Body Text

Large body text for important content

Regular body text for general content

Small text for captions and metadata

Color Palette

Our color system provides consistency and accessibility across all components.

Primary Colors

Primary Black #000000
White #FFFFFF

Gray Scale

Dark Gray #333333
Medium Gray #666666
Light Gray #F5F5F5

Button Components

Consistent button styles for different actions and contexts.

Primary Buttons

Secondary Buttons

Card Components

Flexible card layouts used throughout the site for content organization.

Basic Card

Card Title

This is a basic card component with standard padding and shadow styling.

Image Card

Image Card

Card component with image header and content below.

Feature Card

Feature Title

Enhanced card with icon and special styling for feature highlights.

Navigation Components

Navigation patterns and components used across the site.

Main Navigation

Dropdown Menu

Form Components

Consistent form styling and input components.

Input Fields

Select & Textarea

Layout Components

Grid systems and layout patterns used for content organization.

Grid System

1/3
1/3
1/3
2/3
1/3

Icon System

Font Awesome icons used consistently throughout the site.

Common Icons

Home
User
Email
Phone
Calendar
Trophy

Social Icons

Facebook
Twitter
Instagram
LinkedIn