Logo

The primary logo should be used whenever possible. Use the white version on dark backgrounds. Always maintain clear space around the logo. Both SVG and PNG formats are available.

Blue Logo
Blue Logo
Use on white or light backgrounds

White Logo
White Logo
Use on dark, teal, or photographic backgrounds

Logo on Sand
On Sand Background
Blue logo on cream/beige backgrounds

Logo on Teal
On Brand Teal
White logo on primary teal background

Color Palette

Primary Colors

Teal
#005166
–color-green

Dark Teal
#16384B
–color-green-dark

Gold
#E7A944
–color-orange

Dark Gold
#B57E1F
–color-orange-dark

Neutral Colors

Sand
#FFF3E6
–color-sand

Cream
#F3E8CE
–color-primary

Charcoal
#2E2E2E
–color-text

Light Gray
#ECECEC
–color-grey

Supporting Colors

Muted Teal
#739DAE
Logo accent / overlays

Steel Blue
#285C78
UI elements

Dusty Blue
#527C93
Scrollbars / subtle UI

Link Blue
#2d2dba
–color-link

Typography

The primary typeface is Circular Std, used for all headings and body text. Scheherazade New is used for Arabic text.

Font Weights

Book · 400
Jama Masjid

Medium · 500
Jama Masjid

Bold · 700
Jama Masjid

Black · 900
Jama Masjid

Heading Sample
Islamic Center of Orlando
Serving the community with faith and unity

Body Text Sample
The Islamic Center of Orlando — Jama Masjid serves as a place of worship, education, and community gathering. Our mission is to provide a welcoming environment for Muslims and non-Muslims alike, promoting understanding, compassion, and service to all.

Arabic Script · Scheherazade New
بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ

Decorative Patterns

Islamic geometric patterns are used as decorative accents throughout the site — in page headers, section backgrounds, and the digital display screens.

Pattern

Primary Pattern

Pattern Left

Left Aligned Pattern

Pattern Light Left

Light Pattern (Left)

Usage Guidelines

Do

  • Use the blue logo on white or light backgrounds
  • Use the white logo on dark, teal, or photographic backgrounds
  • Maintain clear space around the logo equal to the height of the crescent
  • Use Teal (#005166) as the primary brand color for headings and CTAs
  • Use Gold (#E7A944) as an accent for highlights, buttons, and decorative elements
  • Use Sand (#FFF3E6) for warm section backgrounds
  • Use SVG format when possible for crisp scaling at any size
Don’t

  • Stretch, rotate, or distort the logo
  • Place the blue logo on busy or dark backgrounds
  • Change the logo colors or add effects (shadows, outlines)
  • Use Gold as a background color for large areas
  • Use low-contrast color combinations for text
  • Mix brand fonts with other typefaces in the same context

Design Tokens

Consistent spacing and rounding values used across the site.

Grid Gap
24px

--grid-gap

Border Radius
12px

--global-radius

Primary Font
Circular Std

--font-primary

Arabic Font
Scheherazade New

serif