TrueDream Educational Consultancy - Brand Guide

Brand Identity

• Name: TRUEDREAM
• Tagline: "Educational Consultancy"
• Motto: "Give wings to your dreams."
• Type: Educational consultancy based in Kerala, India
• Services: Free career guidance from SSLC to postgraduate

Brand Colors

Color	Hex	Usage
Navy	#242F55	Dark backgrounds
Deep Purple	#1a1040	Deepest background/text
Purple	#392767	Primary brand color
Mid Purple	#4d3580	Secondary purple
Light Purple	#6b4fa8	Accent purple
Lavender	#c5b8e8	CTA buttons, accents
Lilac	#e8e2f8	Light backgrounds
Gold	#d4af7a	Accent/highlight, gold CTAs
White	#ffffff	Text on dark bg
Off-white	#f9f7ff	Light section backgrounds

Logo Files (Brand-guidelines/)

File	Format	Usage
white@4x.png	PNG (transparent)	White logo for dark backgrounds
purple@4x.png	PNG (transparent)	Purple logo for light backgrounds
purple bg@4x-100.jpg.jpeg	JPG	Purple logo on purple/blue background
white bg@4x-100.jpg.jpeg	JPG	Purple logo on white background
black logo@4x-100.jpg.jpeg	JPG	Black logo on white background
WhatsApp Image 2026-02-22...jpeg	JPG	Brand guidelines reference sheet

Logo Description

• Icon: Bridge with 3 arches + 5 people dots on top + open book base
• Typography: "TRUEDREAM" in serif spaced caps, "Educational consultancy" in italic serif below

Fonts

Font	Type	Usage
Galfika	Serif	Display headings, hero, logo text (local: Brand-guidelines/Fonts/galfika/Galfika.otf)
Lacture Demo	Serif	Section headings, accents (local: Brand-guidelines/Fonts/lacture-demo/LactureDemo-Regular.otf)
DM Sans	Sans	Body text, UI elements (Google Fonts: 300-700 weights)

Current Logo Usage in Website

• Nav: white@4x.png at 60px height
• Footer: white@4x.png at 50px height

Other Assets

• Brand assets/BROCHURE ROUGH.pdf -- brochure draft
• Brand assets/TrueDream_Vision_Mission.pdf -- vision & mission document
• Brand assets/smiling-happy-indian-student-with-backpack-pointing-his-finger-wall.png -- hero section student image
• Mood board/ -- design inspiration images
• Research/ -- market research PDF
• Screenshots/ -- site screenshot (Insta.png)
• Collage Logos/ -- partner college logos (empty)

Website Structure (index.html)

• Nav: Logo + centered nav links (Home, Services, Courses, Colleges, Path Finder, Contact) + gold "Get Free Consultation" CTA + hamburger menu on mobile
• Sections: Hero > Trust Bar > Stats/Why Choose > Path Finder > Services (+ CTA) > Courses (dark) > Colleges (light) > Process (+ CTA) > Story > Contact Form > Footer
• Tech: Single HTML file, embedded CSS/JS, Google Fonts (DM Sans), local fonts (Galfika, Lacture Demo), scroll animations, particle canvas, glassmorphism effects

Design Rules

• Sharp corners -- all cards, buttons, inputs, badges, and containers use border-radius: 4px (box-type corners). Only circular elements (dots, avatar circles, back-to-top, WhatsApp button) remain border-radius: 50%
• No emojis -- all icons are inline SVG (stroke-based, currentColor, 24x24 viewBox)
• CTA copy: "Get Free Consultation" (not "Book Free Counselling")
• Arrow icons: SVG arrows in .btn-icon spans, no circle background, 20x20px
• Section CTAs: .section-cta-wrap class, centered below Services and Process sections, purple gradient with white text
• CTA perks: Use styled <span> with SVG checkmarks, not emoji
• Footer contacts: SVG icons (phone, email, globe, camera) in .contact-icon spans
• Course tabs: SVG icons before tab text (medical, engineering, management, arts, paramedical)
• Path Finder: SVG icons in .path-option-icon spans, result emoji uses SVG via innerHTML

Hero Section Layout

• Split grid: 2-column layout (1fr / 1.15fr, gap 120px) with hero text left, student image right
• Hero alignment: #hero uses align-items: flex-end so content sits flush at bottom on all screen sizes
• Hero eyebrow: Gold text with decorative lines on each side (.hero-eyebrow, width: fit-content), text: "Trusted Educational Consultancy"
• Hero left: Eyebrow > Galfika h1 (clamp(2.8rem, 5.5vw, 4.8rem), gold accent word) > subtitle > gold CTA + ghost button > social proof (avatar circles + stars), padding-bottom 60px
• Hero right: Student image (Brand assets/smiling-happy-indian-student-with-backpack-pointing-his-finger-wall.png) in .hero-image container (80% width, margin-left: auto), aligned bottom-right
• Background: Animated mesh gradient + floating orbs + particle canvas
• Removed elements: Glassmorphism card with logo/motto, floating stat badges, stats bar (500+, 15+, 6+, 100%), rotating circular text CTA

Key Design Elements

• Gold CTA (.btn-gold): Gold background, dark text, sharp corners (4px radius), hover glow
• Ghost button (.btn-ghost): Transparent with white border, sharp corners, hover reveals lavender tint
• Glassmorphism (.glass): backdrop-filter: blur(20px), subtle border, sharp corners (4px radius)
• Service cards: Sharp corners (4px), unified purple icon color (#392767), no arrow buttons, faded index numbers (01-06) via .service-index, lilac hover background with purple top-line accent
• Stat cards: Sharp corners (4px), gradient bottom border on hover
• Courses section: Dark background (var(--brand-deep)) for visual contrast, sharp-cornered tabs and pills
• Colleges section: Light background (#f9f7ff), dark text, white chips with purple text, edge fade gradients match light bg
• College chips: Sharp corners (4px), white bg, purple text, lilac hover, infinite dual-marquee scroll
• Process timeline: Alternating zigzag layout (odd left, even right) with gradient line + scroll-driven glowing progress line (.process-timeline-glow), steps use directional reveal animations (reveal-left for odd, reveal-right for even)
• CTA form: Sharp corners (4px), gradient border effect via pseudo-element, gold submit button with sharp corners
• Story section: Large Galfika quote, gold decorative quote mark, gradient + noise bg
• Footer: Gradient top border (gold to lavender), back-to-top button, 2 columns (1fr 1fr) — brand left + contact right-aligned (justify-self: end), no "TrueDream" heading, "Explore" column removed

CSS Architecture (Key Classes)

Class	Purpose
.btn-primary	Main CTA button (lavender gradient, dark text)
.btn-gold	Gold CTA button (hero primary, stats bar)
.btn-icon	Arrow icon wrapper inside CTAs (no bg, no circle)
.btn-ghost	Secondary outline button
.btn-submit	Form submit button (gold gradient, white text)
.glass	Reusable glassmorphism utility
.section-cta-wrap	Centered CTA wrapper below sections
.nav-cta	Navigation CTA button (gold)
.nav-links	Centered nav link container
.nav-hamburger	Mobile hamburger toggle
.nav-mobile-overlay	Full-screen mobile nav overlay
.service-card	Service grid cards with index numbers
.service-index	Faded large index number in service cards
.process-step	Process timeline steps (zigzag layout, directional reveals)
.process-timeline-glow	Scroll-driven glowing progress line on timeline
.path-option	Path Finder clickable option
.courses-tab	Course category tab button
.reveal	Scroll-triggered entrance animation
.reveal-left	Scroll entrance from left
.reveal-right	Scroll entrance from right
.hero-social-proof	Overlapping avatar circles + star rating
.hero-image	Student image container in hero right
.back-to-top	Circular back-to-top button in footer

JavaScript Functions

Function	Purpose
selectOption()	Path Finder step selection handler
showResult()	Displays Path Finder result with SVG icon + tags
retakePath()	Resets Path Finder to step 1
switchTab()	Switches course category tabs
handleFormSubmit()	Form submission + WhatsApp redirect
animateCounter()	Counter animation for stat numbers
Timeline glow	Scroll-driven progress line fill on process timeline
Scroll spy	IntersectionObserver highlights active nav link
Mobile nav toggle	Hamburger menu open/close with overlay

Responsive Breakpoints

Breakpoint	Changes
1200px	Hero grid to single column, hide hero-right, services 2-column
900px	Hide desktop nav links, show hamburger, smaller hero h1 (clamp(2.2rem, 8vw, 3.2rem)), hero min-height: auto + 180px top padding, scroll indicator becomes relative with margin-top: 40px, process collapses to linear left-aligned, single-column CTA/footer
640px	Services single column, hero 180px top padding, hero actions stack, path options stack, footer bottom stacks