A CBSE campus in Sunny Enclave, Mohali — Play Way to Class XII, on six green acres.
Role
Web design & build
Engagement
Client project — live
Scope
- Art direction & visual system
- Information architecture
- Admissions & enquiry paths
- Responsive build
Tools
- Figma — UI design
- WordPress
Disciplines
- Web design
- Art direction
- Information architecture
A live site for a CBSE school in Sunny Enclave, Mohali, built around one metaphor the school already lived by: the journey. Play Way to Class XII is a thirteen-year route, and the site is structured as stops along it rather than as a list of departments — because that is how a parent actually pictures the years ahead.
A school built like a journey, not a syllabus.
The school's own language is a journey — the name, the brand, the way it talks about a child moving from first steps to final year. The site takes that literally: the structure is stops along a route, not a directory of departments.
Six acres, Play Way through Class XII, CBSE affiliation. All of it framed as one continuous path rather than three disconnected school-within-a-school sections.
Everything a parent hopes for. Nothing they need to worry about.
A parent choosing a school is holding two questions at once: will my child flourish here, and is anything going to go wrong. Most school sites answer only the first and leave the second to a PDF.
Safety, transport, facilities and affiliation are surfaced as plainly as the academics, because reassurance is half the decision.
Campus first, then proof.
Photography of the actual campus leads every screen — the building, the grounds, the arenas. For a six-acre campus in a competitive market, the place is the strongest argument the school has.
A serif display face gives the institution its formality, set against generous whitespace and a calm navy so it reads as established rather than stiff.
- Journey-led architecture instead of a department list
- Admissions reachable from every depth of the site
- Real campus photography over stock
- CBSE affiliation number stated in the opening screen
The visual system.
A school site that reads like a prospectus: warm off-white paper, navy for action and forest green for the campus, with Fraunces setting a literary tone over Inter's plain, readable text.
Colour names and values are the design tokens declared in the live site's CSS; type sizes, weights and button styles were measured from the rendered page at desktop width.
01 — Foundations
Colour, type and shape — the decisions every component inherits.
Brand
navy
#163A70
Primary actions
navy-deep
#0F2A54
Pressed and dark bands
forest
#204E45
Campus sections
forest-deep
#16382F
Dark campus bands
gold
#A98E4E
Eyebrow labels
Neutrals
ink
#171717
Headings
muted
#55544F
Body text
faint
#8B8A84
Secondary text
paper
#FAFAF8
Page
line
#E8E6E1
Borders
Typography
Display
Fraunces
Where young minds board the journey
Text
Inter
A six-acre CBSE campus in Sunny Enclave, Mohali.
Type scale
Corner radius
- Buttons & navigation999 px
- Cards24 px
- Small cards16 px
02 — Components
Rebuilt from the The Knowledge Bus Global School screens and tokens — the parts every screen is assembled from.
CBSE Affiliation · Mohali
Where young minds board the journey
A six-acre CBSE campus in Sunny Enclave, Mohali.
Type in use
Display and text faces at their measured weights and tracking, on the site's own ground.
Buttons
Primary and secondary actions exactly as styled on the live site.
