Brand
Brand Guidelines
The visual system that defines Reach Courses — calm, considered, and crafted with Islamic adab.
Logo
Always preserve clear space around the logo equal to the height of the "R" glyph.
Use the full-color mark on light surfaces. Use the white mark inside the deep navy panel.
Never stretch, recolor with non-brand colors, or place over busy imagery without a panel.
Color palette
Primary Deep
--primary-deepPrimary
--primaryAccent (Cyan)
--accentAccent Soft
--accent-softForeground
--foregroundSurface
--surfaceTypography
Empower Your Future
Urbanist · 48px · 700Knowledge with purpose
Urbanist · 36px · 600A modern Islamic learning experience
Urbanist · 28px · 600Built with care and clarity
Urbanist · 24px · 500Reach Courses is an educational non-profit empowering youth through accessible learning.
Inter · 16px · 400Last updated May 21, 2026
Inter · 14px · 400Spacing & grid (8px)
8px
16px
24px
32px
48px
64px
Buttons
Components
Card
A simple content surface with 8px radius and soft elevation.
Alert
Use accent-soft for informational alerts.
Islamic pattern usage
Use subtle geometric patterns at low opacity. Avoid placing them behind dense text — reserve them for hero panels and decorative surfaces.