Dar‑e‑Arqam Schools design system

Colours
Black
#000000
White
#ffffff
Light gray
#f4f4f4
Light Panel
#F1F1F8
Brand Yellow
#FBED2B
Brand Yellow
#FBED2B
Brand Blue
#3A3B85
Brand Blue
#3A3B85
Brand Blue
#3A3B85
Brand Blue
#3A3B85
Dark gray
#555555
Brand Blue 25%
#3A3B8540
Typography
Size
Line height
Weights

H1

3.75rem
116.66%
Medium

H2

2.5rem
125%
Medium

H3

2.18rem
128.57%
Medium

H4

1.5rem
141.66%
Medium
H5
1.25rem
150%
Medium
H6
1.125rem
150%
Medium

Body font

1rem
175%
Medium

Sub tag font

1rem
175%
Medium

Button font

1rem
158.82%
Medium
Logo
Favicons
Dar-e-Arqam Schools
Dar-e-Arqam Schools
Brand logo
Dar-e-Arqam Schools
Icons
Social icons
Line icons
Avatars
Students at Dar-e-Arqam Schools
2.3125rem
Icon
3.75rem
Shadows
Medium
Large
Placeholder
Inputs
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Text area
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
State messages
Thank you! Your submission has been received!
Sorry! Your submission has been denied!
Rich text

The Dar‑e‑Arqam design system keeps every page recognisably part of one family. Brand Blue carries structure and trust, Brand Yellow brings warmth and energy, and generous white space lets the content breathe. Type is set in Inter with a clear hierarchy and comfortable line height, so that long passages of policy, academic detail and school news remain easy to read on any screen.

‍

Components are deliberately simple: soft radii, calm borders and a limited palette. Buttons, forms and cards share the same spacing rhythm, so a parent moving from the admissions page to a campus update meets the same voice and the same clarity throughout.