Foundations

The atomic elements of our design system. These foundational elements ensure consistency and accessibility across all digital experiences.

Color Palette

Our carefully selected colors represent the values and identity of MTWS. Each color has specific usage guidelines to maintain consistency and accessibility.

Click to copy

High Contrast Black

#000000

Primary text color for maximum readability

Usage:

  • • Body text
  • • Headlines
  • • High-contrast elements
Click to copy

Deep Forest Green

#132a1a

Dark brand accent color for depth and sophistication

Usage:

  • • Logo
  • • Primary navigation
  • • Section headers
Click to copy

Primary Green

#407550

Main brand color representing growth and harmony

Usage:

  • • Primary buttons
  • • Links
  • • Active states
  • • Call-to-actions
Click to copy

Olive Green

#82894d

Secondary brand color for balance and natural feel

Usage:

  • • Secondary buttons
  • • Borders
  • • Subtle accents
Click to copy

Sandy Gold

#e7d296

Warm accent color for highlights and emphasis

Usage:

  • • Highlights
  • • Special buttons
  • • Accent elements
Click to copy

Warm Background

#fdfbf5

Main background color providing warmth and readability

Usage:

  • • Page backgrounds
  • • Card backgrounds
  • • Content areas

Accessible Color Combinations

High Contrast Black on Warm Background

Perfect contrast ratio for body text

White on Primary Green

Ideal for call-to-action buttons

Deep Forest Green on Sandy Gold

Great for highlighted content

Olive Green on White

Perfect for secondary elements

Typography

Our typography system uses DM Sans for its excellent readability and modern appearance, with custom Arabic fonts for Islamic content.

English Typography - DM Sans

Page Title - The largest heading for main page titles
Element: h1
Class: text-5xl font-bold
Size: 3rem (48px)
Line Height: 1.1
Weight: 700 (Bold)
Section Title - For major content sections
Element: h2
Class: text-3xl font-bold
Size: 1.875rem (30px)
Line Height: 1.2
Weight: 700 (Bold)
Subsection Title - For content subsections
Element: h3
Class: text-xl font-semibold
Size: 1.25rem (20px)
Line Height: 1.3
Weight: 600 (Semibold)
Body Text - Regular paragraph text for content. This is the most commonly used text style for reading content.
Element: p
Class: text-base
Size: 1rem (16px)
Line Height: 1.6
Weight: 400 (Regular)
Small Text - For captions, metadata, and secondary information
Element: small
Class: text-sm text-gray-600
Size: 0.875rem (14px)
Line Height: 1.5
Weight: 400 (Regular)

Arabic Typography - Custom Fonts

بِسْمِ اللهِ الرَّحْمٰنِ الرَّحِيْمِ
Element: Arabic Uthmanic
Class: font-uthmanic text-xl
Size: 1.25rem (20px)
Line Height: 1.8
Weight: 400 (Regular)
مسجد التوحيد والسنة
Element: Arabic Riwaya
Class: font-riwaya text-lg
Size: 1.125rem (18px)
Line Height: 1.7
Weight: 400 (Regular)

Font Details

DM Sans

Primary font for all English content

• Weights: 100-1000

• Google Fonts

• Excellent readability

UthmanicHafs

For Quranic text and formal Arabic

• Traditional Arabic script

• Optimized for Quranic text

• Class: .font-uthmanic

29LTRiwaya

For general Arabic content

• Modern Arabic design

• Great for headings

• Class: .font-riwaya

Spacing & Layout

Consistent spacing creates visual rhythm and hierarchy. Our spacing system is based on a 4px grid for precise alignment.

Spacing Scale

4px
xs0.25remMinimal spacing, icon gaps
8px
sm0.5remSmall component padding
16px
md1remStandard component spacing
24px
lg1.5remSection spacing, card padding
32px
xl2remLarge section breaks
48px
2xl3remMajor page sections
64px
3xl4remHero sections, page headers

Spacing in Practice

Card Example

Card Title

Card content with proper spacing

• Card padding: 24px (lg) • Content spacing: 16px (md) • Button padding: 8px 16px

Iconography

We use Lucide React icons for their consistency, clarity, and comprehensive coverage of common UI needs.

Mail

Phone

Location

Clock

Share

Check

Icon Guidelines

  • • Standard size: 16px (1rem) or 24px (1.5rem)
  • • Stroke width: 2px for consistency
  • • Use semantic colors (primary-green for actions, gray for neutral)
  • • Always include proper alt text for accessibility