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
--color-text-primary

Primary text color for maximum readability

Usage:

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

Deep Forest Green

#132a1a
--color-secondary

Dark brand accent for depth and sophistication

Usage:

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

Primary Green

#407550
--color-primary

Forest Green — primary brand color for actions and interaction

Usage:

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

Olive Green

#82894d
--color-tertiary

Secondary brand color for balance and natural feel

Usage:

  • • Metadata
  • • Secondary labels
  • • Decorative dividers
Click to copy

Sandy Gold

#e7d296
--color-accent

Warm accent for highlights, badges, and Quranic verse accents

Usage:

  • • Badges
  • • Highlights
  • • Quranic verse borders
  • • Feature icon backgrounds
Click to copy

Warm Parchment

#fdfbf5
--color-bg-page

Page background — never pure white

Usage:

  • • Page backgrounds
  • • Section backgrounds

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

Headline LG — Main page titles and hero headings
Element: h1
Class: text-5xl font-bold
Size: 48px
Line Height: 1.1
Weight: 700 (Bold)
Headline MD — Section titles and feature headings
Element: h2
Class: text-3xl font-bold
Size: 32px
Line Height: 1.2
Weight: 700 (Bold)
Headline SM — Subsection headings and card titles
Element: h3
Class: text-2xl font-semibold
Size: 24px
Line Height: 1.3
Weight: 600 (Semibold)
Body LG — Lead paragraphs, intro text, key descriptions.
Element: p
Class: text-lg
Size: 18px
Line Height: 1.7
Weight: 400 (Regular)
Body MD — Standard body copy for most content. Used throughout pages.
Element: p
Class: text-base
Size: 16px
Line Height: 1.6
Weight: 400 (Regular)
Body SM — Captions, metadata, and secondary information
Element: small
Class: text-sm text-gray-600
Size: 14px
Line Height: 1.5
Weight: 400 (Regular)

Arabic Typography - Custom Fonts

بِسْمِ اللهِ الرَّحْمٰنِ الرَّحِيْمِ
Element: Quranic (UthmanicHafs)
Class: font-uthmanic
Size: 28px
Line Height: 1.8
Weight: 400 (Regular)
مسجد التوحيد والسنة — دورهام، كارولاينا الشمالية
Element: Arabic Body (29LTRiwaya)
Class: font-riwaya text-xl
Size: 20px
Line Height: 1.8
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 system uses an 8px base grid: 4 · 8 · 16 · 24 · 32 · 48 · 64 · 80px. Container max-width: 1200px, gutters: 24px.

Spacing Scale

4px
xs--space-xsIcon gaps, minimal padding
8px
sm--space-smTight component spacing, badge padding
16px
md--space-mdStandard spacing between elements
24px
lg--space-lgCard padding, section gutters
32px
xl--space-xlLarge section breaks
48px
2xl--space-2xlMajor section separation
64px
3xl--space-3xlHero sections, page headers
80px
section--space-sectionFull page section padding

Spacing in Practice

Card Example

Card Title

Card content with proper spacing

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

Corner Radii

A consistent radius scale prevents mixing sharp and rounded corners within the same view. Use Tailwind class names (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-full) or the CSS tokens directly.

rounded-sm4px--radius-sm

Badges, chips, tags

rounded-md8px--radius-md

Buttons, inputs, form elements

rounded-lg10px--radius-lg

Cards, modals, panels

rounded-xl16px--radius-xl

Large feature cards, image containers

rounded-full9999px--radius-full

Pill badges only

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