Pavan Institutions

Overview

Pavan Institutions is a multi-disciplinary educational organization serving students across nursing, pharmacy, allied health sciences, engineering, and polytechnic programs. The design system embodies Institutional Formalism—a visual language that combines professional authority with approachable clarity, using bold primary accents (golden yellow #f1c40f) against institutional navy (#17205f) to signal trustworthiness and academic rigor. The brand evokes confidence, clarity, and forward momentum: students see a pathway to career success, not bureaucratic complexity. The tone is direct and motivational without being breathless: 'Take the next step in your career' (not 'Transform your life'). Voice patterns favor imperative action verbs (Apply, Register, Enroll, Learn) paired with concrete outcomes (career advancement, placement success, institutional recognition). Example sentence in brand voice: 'With 10,000+ graduates and placement partnerships across India, your next opportunity starts here.'

Colors

The color system operates on a three-tier hierarchy: institutional anchors (navy #17205f for authority, white #ffffff for clarity), primary action (golden yellow #f1c40f for CTAs and emphasis), and supporting roles (sky blue #337ab7 for secondary actions, red #e3252e for alerts and urgent messaging). Primary (#f1c40f) is deployed on all call-to-action buttons, hero overlays, and navigation highlights—it commands attention without aggression. Secondary (#337ab7) supports form interactions, links, and secondary buttons, providing visual relief and hierarchy. Tertiary (#e3252e) is reserved for error states, alerts, and critical messaging (e.g., 'Admissions Open'). The surface stack uses near-white (#f8f7fd, #f5f5f5, #eeeeee) to create subtle depth without introducing gray monotony. On-surface

Typography

The type system uses Roboto across all weights (400, 500, 700) to project modern professionalism while maintaining institutional credibility. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 700 weight) titles course offerings and institutional pages; Headline-md (28px, 700 weight) breaks content into scannable sections. Body-lg (18px, 400 weight, 28px line-height) handles descriptive copy and testimonials; Body-md (16px, 400 weight, 24px line-height) is the default for form labels, metadata, and supporting text. Label-md (14px, 600 weight, 0.01em tracking) emphasizes button text and badges; Label-sm (12px, 500 weight, 0.05em tracking) is used for fine print, disclaimers, and icon labels. All headings use -0.02em to -0.04em nega

Layout

The layout uses a 12-column grid with a max-width of 1199px, providing a balanced container for both desktop and tablet viewports. Horizontal rhythm is established through the gutter spacing (24px) between columns and sections. Vertical spacing follows a lg (40px) scale for major section breaks (hero to course cards, course cards to testimonials), md (24px) for subsection separation (course title to description), and sm (12px) for inline element spacing (icon to label). The header occupies a fixed 60px height (including 8px padding top/bottom), with the primary navigation bar using a golden yellow background (#f1c40f) to create immediate visual hierarchy. Hero sections span full-width with a 1200px content container centered inside, allowing background images to bleed edge-to-edge while te

Elevation & Depth

Depth is conveyed through a three-level shadow system that reflects institutional clarity rather than atmospheric depth. Level 1 (sm): 0 1px 2px rgba(0, 0, 0, 0.06) is applied to subtle surface separations (input fields, small badges, inline elements) to suggest a thin layer above the background. Level 2 (md): 0 3px 8px rgba(0, 0, 0, 0.15) is the default for interactive elements (buttons, cards, form groups) and hover states—this shadow is visible enough to signal interactivity without creating visual clutter. Level 3 (lg): 0 8px 24px rgba(0, 0, 0, 0.12) is reserved for modals, dropdowns, and

Shapes

The shape philosophy is Institutional Sharpness: minimal border-radius that signals precision and professionalism without appearing cold or austere. Buttons use rounded.DEFAULT (0.5rem / 8px) for a subtle softness that feels modern but not playful. Cards and containers use rounded.md (0.75rem / 12px) to create visual breathing room while maintaining geometric clarity. Input fields use rounded.DEFAULT (0.5rem / 8px) to align with button styling and create a cohesive form language. Badges and pills use rounded.full (9999px) to signal completeness and status (e.g., 'Admissions Open', 'Placement S

Components

Action Elements Buttons are the primary interaction mechanism and must be instantly recognizable. Primary buttons use {colors.primary} (#f1c40f) background with {colors.on-primary} (#011e40) text, 10px 26px padding, 44px height, and {rounded.DEFAULT} (8px). On hover, shift to {colors.primary-fixed-dim} (#f1c40f with 8% opacity reduction) and apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)). All button text uses {typography.label-md} (14px, 600 weight) with 0.01em letter-spacing. Secondary buttons (#337ab7) follow the same padding and height but use white text; on hover, darken to #2d5f8d. Tertiary buttons (#e3252e) are used for destructive or urgent actions (e.g., 'Cancel Admission'); on hover, darken to #c91b21. All buttons must have a 200ms transition on background-color and box-

Do's and Don'ts

**Do**

• Do use {colors.primary} (#f1c40f) exclusively for primary CTAs (Apply, Register, Learn More) to create a consistent call-to-action language across all pages.
• Do apply {typography.headline-lg} (40px, 700 weight) to major page titles and hero headlines to establish immediate visual hierarchy and institutional authority.
• Do maintain {spacing.lg} (40px) between major sections (hero, course cards, testimonials, footer) to create breathing room and improve content scannability.
• Do use {rounded.DEFAULT} (8px) for buttons and inputs to create a cohesive, modern interaction language without appearing playful.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) on hover states for cards and buttons to provide tactile feedback and signal interactivity.
• Do use Roboto 700 weight for all headings (Display, Headline-lg, Headline-md) to project confidence and institutional credibility.

**Don't**

• Don't use {colors.secondary} (#337ab7) or {colors.tertiary} (#e3252e) for primary CTAs; these are reserved for secondary actions and alerts, and will dilute the primary action signal.
• Don't apply border-radius > 16px to buttons or form inputs; it reads as playful and undermines institutional authority.
• Don't use opacity < 0.8 on body text; Pavan's audience includes mature students and parents who require maximum legibility.
• Don't mix Roboto with system fonts (Arial, Helvetica) in the same component; always use Roboto from Google Fonts (weights 400, 500, 700) for consistency.
• Don't apply text-shadow to body copy or large headings; reserve it only for small labels (label-sm) over photographic backgrounds.
• Don't use {colors.surface-container-highest} (#dddddd) as a background for interactive elements; it reads as disabled or inactive.