Rabindra Bharati University

Overview

Rabindra Bharati University's design system embodies 'Institutional Classicism'—a philosophy that marries heritage gravitas with modern accessibility. The interface serves as a digital gateway to a century-old cultural institution, using warm earth tones (#7e3604 primary, #8a6d3b tertiary) and serif typography to evoke scholarly tradition while maintaining clarity for diverse audiences. The aesthetic is neither austere nor playful: it is purposeful, measured, and deeply rooted in the university's architectural legacy visible in the hero imagery.

The brand voice is authoritative yet welcoming, precise yet human. Sentences are declarative and information-dense: 'Rabindra Bharati University was founded on May 8, 1962, under the Rabindra Bharati Act to mark the birth centenary of Rabindranath Tagore.' The vocabulary favors institutional terminology (Accreditation, Prospectus, Executive Council) balanced with accessible language for prospective students. The tone never condescends; it assumes the reader is intelligent and motivated.

Colors

The color palette is anchored in warm, earthy tones that reflect both the university's physical campus architecture and its cultural mission. Primary (#7e3604, a deep rust-brown) is reserved for call-to-action buttons ('Read More', 'CONTACT') and interactive elements requiring user attention. This color appears on approximately 25 interactive elements across the page and commands immediate visual hierarchy without aggression. Secondary (#337ab7, a professional blue) supports links, secondary navigation, and informational highlights, appearing in roughly 25 instances. Tertiary (#8a6d3b, a muted ochre) and its container (#fee7b1, a warm cream) are used for badges, alerts, and supplementary content blocks—particularly the 'Notices', 'Recruitments', 'Tenders' category tags visible in the welco

Typography

The type system employs a classical serif-and-sans pairing: Georgia and serif fonts (fontFamily: 'Georgia, serif') anchor headlines and display text, conveying institutional authority and heritage. Body copy uses MyriadPro-Regular and Open Sans at 14px–16px with 22–24px line-height, ensuring readability across desktop and mobile viewports. Display text (48px, 700 weight, -0.02em letter-spacing) is reserved for the hero section title 'RABINDRA BHARATI UNIVERSITY'. Headline-lg (36px, 700 weight) is used for section titles like 'Welcome to Rabindra Bharati University'. Body-md (14px, 400 weight) is the default for paragraph text and list items. Label-md (12px, 600 weight, 0.05em letter-spacing) is applied to button text and badge labels to create visual distinction and improve scannability. O

Layout

The page employs a 12-column Bootstrap grid with a fixed container max-width of 1199px, centered on the viewport with symmetric gutters of 24px. The layout rhythm follows a three-tier hierarchy: the hero banner (full-width, 400px+ height) establishes visual anchor; the welcome section (three-column card layout with 24px gaps) provides primary content; and subsequent sections (notices, recruitments, tenders) use 4-column card grids with 12px internal padding. White-space is generous but not excessive: section separation uses 40px (lg spacing) vertical margins, while card-to-card horizontal spacing is 24px (md spacing). The top navigation bar uses 12px (sm spacing) for link padding, creating a compact but readable menu. Container max-width of 1199px ensures content remains scannable on ultra

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the flat aesthetic while resisting skeuomorphism. Level 1 (Base): the page background is pure white (#ffffff) with no shadow. Level 2 (Standard Card): cards receive box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), creating a subtle lift of 2px. Level 3 (Elevated/Modals): modal overlays and prominent cards receive box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a softer spread shadow suggesting 3px elevation. Hover states intensify the shadow to Level 3 (0 3px 8px) to signal interactivity. No border-radius is applied to shadows (border-radius

Shapes

The design philosophy is 'Structured Minimalism'—sharp, rectilinear forms with minimal ornamentation. Border-radius values are conservative: sm (3px) is used for small UI elements like icon buttons; DEFAULT (4px) is the standard for cards, buttons, and input fields; md (6px) is applied to larger containers and modals; lg (10px) and xl (15px) are reserved for hero sections and prominent call-to-action areas. Most interactive elements (buttons, inputs) use 0px border-radius (sharp corners), reflecting the institutional aesthetic and Bootstrap 3 conventions visible in the codebase. The 4px defaul

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses backgroundColor: #7e3604 (primary), textColor: #ffffff, padding: 11px 20px, fontSize: 12px, fontWeight: 400, fontFamily: 'Open Sans, sans-serif', with box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2). On hover, backgroundColor transitions to #a94442 (primary-container) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) over 200ms. Active state darkens to #6b2d03. Button-secondary uses transparent background with 1px solid border at primary color, maintaining the same padding and font specs. All buttons have border-radius: 0px (sharp corners) and no text-transform, preserving the exact label text. Transition timing is 200ms ease-out for all hover/active states.

Containers & Surfaces Cards (card component) use ba

Do's and Don'ts

**Do**

• Do use primary color (#7e3604) exclusively for primary CTAs ('Read More', 'CONTACT') and interactive elements requiring immediate attention; reserve secondary (#337ab7) for links and informational highlights.
• Do apply box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) to cards and 0 3px 8px rgba(0, 0, 0, 0.15) to modals to maintain the institutional elevation hierarchy.
• Do use Georgia serif for headlines (36px–48px) and MyriadPro-Regular for body text (14px–16px) to preserve the heritage-meets-modern aesthetic.
• Do maintain 24px (md spacing) gutters between card columns and 40px (lg spacing) between major sections to ensure visual breathing room.
• Do apply 200ms ease-out transitions to all hover/active button states to signal interactivity without jarring the user.
• Do use sharp corners (border-radius: 0px) on buttons and primary cards to convey institutional authority; reserve 4px–10px radius for secondary UI.

**Don't**

• Don't use primary color for body text, backgrounds, or non-interactive elements; it is reserved for CTAs and must maintain visual dominance.
• Don't apply border-radius > 10px to any component; the design philosophy rejects soft, rounded aesthetics in favor of structured minimalism.
• Don't mix serif and sans-serif fonts within a single headline or body paragraph; maintain clear typographic hierarchy by pairing Georgia headlines with MyriadPro body.
• Don't reduce padding below 8px (xs spacing) on interactive elements; touch targets must remain at least 44px × 44px for accessibility.
• Don't use shadows deeper than 0 3px 8px rgba(0, 0, 0, 0.15); excessive shadow depth contradicts the institutional aesthetic and creates visual clutter.
• Don't apply text-transform: uppercase to body text; use uppercase only for labels, badges, and navigation items to maintain readability.