Brand guide
The logo, colors and typefaces used across Mawqet.
Logo
The approved mark brings together the shape of a mihrab and a display screen. Use the green version on white, and the white version on green.
MawqetMawqet
Mawqet
Sizes
- Keep clear space around the logo of at least half its width.
- Do not stretch it, recolor it or add a shadow.
Colors
White and light green for backgrounds, black for text and buttons, and green for selection and icons.
- White
#FFFFFFBackground and cards - Very light green
#F3F9F3Alternating sections - Light green
#E6F3E7Selection and badges - Border
#DDEBDFBorders and dividers - Green
#2F7D3BLogo, selection and icons - Text green
#236E30Green text on light backgrounds - Black
#111111Buttons and main text - Gray
#4D5052Secondary text
Typefaces
Thmanyah: Serif Display for headings, and Sans for body text and the interface. Numerals are Latin.
Main heading
Thmanyah Serif Display 700 · 56–76Your mosque screen
Thmanyah Serif Display 700 · 56–76Your mosque screen
Section heading
Serif Display 700 · 32–44How it works
Serif Display 700 · 32–44How it works
Card title
Sans 700 · 19City and prayer times
Sans 700 · 19City and prayer times
Body
Sans 500 · 17In the screen settings, choose the mosque's location and calculation method.
Sans 500 · 17In the screen settings, choose the mosque's location and calculation method.
Note
Sans 500 · 15Version ·
Sans 500 · 15Version ·
Components
The same components on every page.
Options and tabs
SelectedDefaultDefault
Badges and notes
RecommendedIn development
A short, one-line note.
Step card1
City and prayer times
One line that explains the step.
Screen frame
Emerald 
Charcoal 
Blue
Question
Do I need an account?
No. It is free and needs no sign-up.
Icons
A single 2px stroke with rounded ends, on a 24px grid. Found in assets/icons.svg.
- TV
- TV Box
- Computer
- Smart TV
- Readability
- Offline
- Time
- Remote
- Download
- Info
- Done
- Help
Writing style
Clear, simple and short.
Do
- One short sentence for each idea.
- Direct verbs: download, choose, set.
- Say “in development” for anything unfinished.
Don't
- Marketing figures, ratings or user counts.
- “Works on every device” or “every country in the world”.
- Stars, crescents or repeated ornament.
A custom design for your mosque
Send us your idea, or a picture of the design you have in mind.