Godrej Enterprises Group

Overview

Godrej Enterprises Group operates at the intersection of heritage and innovation, serving 1.1 billion consumers across diversified industries including consumer goods, real estate, appliances, aerospace, and agriculture. The design system embodies "Responsible Minimalism"—a visual philosophy that prioritizes clarity, sustainability, and corporate authority without sacrificing warmth. The aesthetic draws from the brand's commitment to environmental stewardship (evident in the hero's lush forest imagery and EcoVadis certification) while maintaining the professional rigor expected of a century-old conglomerate. The UI evokes trust through generous whitespace, restrained color application, and typography that communicates both heritage (the custom GB typeface) and modernity (Montserrat accents).

The brand voice is measured, purposeful, and grounded in impact. Godrej speaks with the confidence of a market leader but the humility of a steward—never breathless, always substantive. Vocabulary favors concrete outcomes over aspirational abstractions: "Unlocking Responsible Progress" rather than "Enabling Tomorrow." The tone is conversational yet authoritative, accessible to a global audience while respecting the brand's Indian roots and 125-year legacy. Example sentence in brand voice: "We serve 1.1 billion consumers by building products and communities that last—because progress without responsibility is just noise."

Colors

The color system centers on a deep plum primary (#810055) that signals the brand's distinctive identity across all interactive elements—CTAs, focus states, and brand moments. This is paired with a sophisticated neutral palette anchored by cool greys (#707070, #adadad) and warm off-whites (#f1f1ed) that create visual breathing room. The primary color appears on all primary buttons (backgroundColor: #810055, textColor: #ffffff, borderRadius: 1000px, padding: 8px 12px), while its lighter variant (#c080aa) is reserved for hover states and container backgrounds. Secondary colors—a vibrant green (#33c037) for positive actions and a bold red (#e1142e) for alerts—are used sparingly to maintain hierarchy. The surface stack progresses from pure white (#ffffff) for primary surfaces through cool greys

Typography

The type system employs a two-font strategy: GB (custom proprietary typeface) for body and headlines, and Montserrat for accents and labels. This pairing communicates heritage through the distinctive GB letterforms while maintaining contemporary legibility via Montserrat's geometric clarity. Display text (60px, fontWeight: 400, lineHeight: 68px, letterSpacing: -0.02em) anchors hero sections with commanding presence; headline-lg (40px, lineHeight: 48px) structures major sections; body-md (16px, lineHeight: 24px) ensures comfortable reading at standard viewport sizes. All type uses fontWeight: 400 as the default, with 500 (gb-medium) reserved for labels and interactive elements to create subtle emphasis without visual heaviness. Apply text-shadow: 0 2px 4px rgba(0,0,0,0.15) on display text o

Layout

The layout system uses a responsive 12-column grid (4 columns on mobile, 10 on tablet, 12 on desktop, expanding to 20 columns at 1600px+) with a container max-width of 1600px. Gutter width is consistently 16px across all breakpoints, while container padding is 24px on desktop and 16px on mobile, creating a flexible yet controlled rhythm. Section spacing follows the lg token (40px on desktop, 24px on mobile) for major content blocks, with md spacing (24px) used for component-level separation. The hero section spans full-width with a background image and overlay gradient, establishing visual dominance; subsequent sections nest within the container to create a clear content hierarchy. White-space is treated as a design material—generous margins around text blocks (minimum 24px vertical spacin

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the heavy drop-shadows common in consumer apps. Level 1 (base surfaces) uses no shadow, relying on background color and border definition. Level 2 (cards, modals) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift that distinguishes interactive surfaces from the background. Level 3 (elevated modals, overlays) uses a composite shadow: -1px 3px 3px rgba(0,0,0,0.1), 1px 3px 3px rgba(0,0,0,0.1), which creates a soft, diffused depth effect without harsh directionality. The modal background applies a semi-transpa

Shapes

The shape philosophy is "Architectural Clarity"—rounded corners are applied strategically to soften the interface without sacrificing the corporate authority the brand requires. Buttons use the full radius (1000px, borderRadius: 1000px) to create pill-shaped CTAs that feel approachable and modern; this is the most distinctive shape in the system and appears on all primary and secondary buttons. Cards and containers use lg radius (16px, borderRadius: 16px) to provide subtle rounding that feels refined without being playful. Input fields and smaller components use the DEFAULT radius (8px, border

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 40px minimum height (padding: 8px 12px, minHeight: 40px) to meet touch-target accessibility standards. Primary buttons (backgroundColor: #810055, textColor: #ffffff, borderRadius: 1000px) appear on all major CTAs ("Know More", "Read privacy policy"); hover state transitions to the primary-fixed-dim color (#a85a8a) with a 150ms ease-out animation. Secondary buttons (backgroundColor: transparent, border: 1px solid #810055, textColor: #810055) are used for alternative actions and maintain the same dimensions and border-radius. Tertiary buttons (backgroundColor: transparent, textColor: #333333) appear in less prominent contexts ("See All" links) and use the DEFAULT radius (8px) rather than full radius. All b

Do's and Don'ts

**Do**

• Do use the primary plum (#810055) exclusively for CTAs, focus states, and brand moments—never dilute it with secondary uses.
• Do maintain minimum 24px vertical spacing between major sections and 16px between component groups to create visual breathing room.
• Do apply the full radius (1000px) only to buttons; use lg radius (16px) for cards and DEFAULT (8px) for inputs to maintain clear visual hierarchy.
• Do use GB typeface for all body and headline text; reserve Montserrat for labels, badges, and accent typography only.
• Do apply the md shadow (0 3px 8px rgba(0,0,0,0.15)) to cards and modals; avoid heavier shadows that create visual clutter.
• Do test all interactive elements at 40px minimum height to ensure touch accessibility on mobile devices.

**Don't**

• Don't use the primary color on non-interactive elements—it must always signal actionability.
• Don't apply rounded corners to text blocks or content areas; reserve rounding for interactive and container elements.
• Don't use glassmorphism, blur effects, or translucent overlays; the design system prioritizes clarity through color contrast and spatial separation.
• Don't mix typefaces within a single text block; GB and Montserrat are used at the component level, not the character level.
• Don't apply shadows to elements smaller than 80px in width; use color and border definition instead.
• Don't use the secondary colors (green, red) as primary brand colors; they are reserved for status indication and alerts only.