Brand Guidelines

This page documents the visual identity system used across the Professor Selva Pankaj website. It serves as a reference for maintaining consistency in colour, typography, imagery, and layout.

1. Colour Palette

The brand uses a dark navy base with gold accents. All colours are defined as HSL CSS custom properties in the design system.

Navy (Background)
hsl(222 47% 11%)
--background
Gold (Primary)
hsl(43 74% 49%)
--gold
Gold Light
hsl(43 74% 58%)
--gold-light
Navy Light
hsl(220 26% 14%)
--navy-light
Foreground (White)
hsl(0 0% 100%)
--foreground
Muted Foreground
hsl(213 27% 84%)
--muted-foreground

2. Typography

Playfair Display — Headings

Used for all headings, the brand name, and display text. Weight: 700 (bold). Tracked via --font-display.

Heading 1 — 48 px
Heading 2 — 36 px
Heading 3 — 24 px

Inter — Body

Used for body copy, UI labels, and secondary text. Weights: 400 (regular) and 500 (medium). Tracked via --font-body.

Body — 16 px / Regular
Small — 14 px / Regular
Caption — 12 px / Regular

3. Logo Usage

The SP monogram is the primary brand mark. It appears in the footer and in the navbar after scroll.

SP monogram logo
Format: WebP
Minimum size: 40 × 40 px
Clear space: Equal to logo height on all sides

4. Spacing & Layout

  • Max content width: 1200 px
  • Section padding: py-[120px] px-[50px]
  • Mobile padding: px-[30px]
  • Border radius: 0.5 rem (8 px)

5. Imagery

  • All images served in WebP format for performance.
  • Background portraits use dark gradient overlays (bg-gradient-to-r from-black/90).
  • Hero image focal point: object-position: 25% 75%.
  • Philanthropy image focal point: object-position: 75% 25%.
  • Lazy loading enabled via loading="lazy" on non-critical images.

6. Accessibility

  • Target standard: WCAG 2.1 Level AA.
  • Minimum contrast ratio: 4.5 : 1 for normal text.
  • All images carry descriptive alt attributes.
  • Animations respect prefers-reduced-motion.
  • Interactive elements have visible focus indicators using var(--gold).