Om Kosh

Overview

Om Kosh is a festival fund and contribution management platform built specifically for Indian housing societies, festival mandals, and NGOs. It embodies a "Warm Pragmatism" aesthetic—combining the earthy, celebratory warmth of Indian festival culture with clean, functional design that prioritizes transparency and trust. The visual language uses warm terracotta and saffron accents (#e8842b, #f6b06a) against a soft, cream-colored canvas (#faf7f1), evoking the handmade, community-driven nature of festival organization while maintaining modern clarity. The UI conveys calm authority: every rupee is tracked, every receipt is instant, every report is audit-ready.

The brand voice is direct, respectful, and deeply practical. Om Kosh speaks to committee treasurers and mandal organizers in their language—no jargon, no corporate platitudes. The tone is reassuring without being patronizing, precise without being cold. Example: "The moment a committee member records a collection, a branded, numbered receipt is generated, ready to show, print or save as a PDF." This is not marketing copy; it is a promise delivered in plain language.

Colors

The color system centers on a warm, earthy primary (#e8842b—a burnt orange/terracotta) that signals trust, tradition, and action. This is the accent for all CTAs, interactive elements, and brand moments. It appears on the "Start free" button, form focus states, and key highlights, creating a consistent visual anchor across the interface. The secondary color (#12a67e—a deep teal-green) represents completion, success, and transparency; it is used for success badges, checkmarks, and the live-collection indicator. The tertiary blue (#3b82c4) provides a cool counterpoint for informational elements and secondary data visualizations.

The surface stack is built on warm neutrals: the background is a soft cream (#faf7f1), surfaces are pure white (#ffffff), and the border color is a barely-perceptib

Typography

The type system pairs Space Grotesk (a geometric, modern sans-serif) for headlines and display text with Poppins (a friendly, rounded sans-serif) for body copy and UI labels. This pairing creates visual hierarchy while maintaining warmth: Space Grotesk's geometric precision signals clarity and structure, while Poppins's rounded terminals feel approachable and human. Display text (52px, 600 weight, -0.02em letter-spacing) is used for hero headlines and major section titles, commanding attention without aggression. Headline-lg (38px, 600 weight) breaks up major sections; headline-md (28px, 600 weight) introduces subsections. Body text (16px, 400 weight, 24px line-height) is set with generous line-height for readability on mobile and desktop. Labels (15px, 600 weight) are used for button text

Layout

The layout uses a 12-column grid with a max-width of 1200px and a consistent 28px gutter on all sides. The page rhythm alternates between full-width hero sections (with asymmetric image placement), content sections with 40px (lg spacing) vertical separation, and card grids (typically 3 or 4 columns on desktop, 2 on tablet, 1 on mobile). The hero section uses a cream background (#faf7f1) with decorative floating shapes (animated via CSS keyframes: bffloat, bfdrift) to create visual interest without clutter. Section eyebrows (13px, 700 weight, uppercase, 0.6px letter-spacing) in the primary color introduce each major section. White-space is generous: 60px padding on section containers, 22px gap between grid items, and 12px margin between related elements. This breathing room reflects the bra

Elevation & Depth

Depth is conveyed through a three-level shadow system and subtle border treatment. Level 1 (Base/Cards): 0 3px 8px rgba(31, 45, 56, 0.15) with a 1px solid border at #ece5d8. This is used for standard cards, input fields, and FAQ items. Level 2 (Elevated/Modals): 0 10px 30px rgba(31, 45, 56, 0.2) with the same border. This is used for demo forms, success cards, and floating elements. Level 3 (Hover/Lifted): 0 22px 44px -26px rgba(31, 45, 56, 0.45), applied on :hover to cards and buttons, creating a subtle lift effect (transform: translateY(-4px)). The shadows use warm-tinted black (rgba(31, 45,

Shapes

The shape language is "Warm Geometric"—rounded corners that feel modern and approachable without being overly soft. Buttons and primary CTAs use 13px border-radius (approximately 1rem), creating a pill-like appearance that feels friendly and clickable. Cards and containers use 18px border-radius (1.5rem), providing visual softness while maintaining structure. Input fields use 11px border-radius (0.75rem), slightly less rounded than buttons to signal a different interaction model. FAQ items and smaller containers use 14px border-radius (1rem). The full-circle radius (50% or 9999px) is reserved

Components

**Action Elements.** Primary buttons (button-primary) use the brand orange (#e8842b) background with white text, 15px 24px padding, 13px border-radius, and a branded shadow (0 12px 26px -10px rgba(232, 132, 43, 0.75)). On hover, the button lifts (transform: translateY(-1px)) and the shadow intensifies (0 16px 32px -10px rgba(232, 132, 43, 0.85)), with a 150ms transition (transition: transform 0.15s, box-shadow 0.15s). Secondary buttons (button-secondary) use a white background with a 1px border at #ece5d8, dark text, and a subtle shadow (0 8px 20px -14px rgba(31, 45, 56, 0.5)). On hover, the border color shifts to the primary orange and text color follows, creating a visual "warm-up" effect. Ghost buttons (cta-ghost) are transparent with only a border, used for tertiary actions.

**Contain

Do's and Don'ts

**Do**

• Do use the warm orange (#e8842b) exclusively for primary CTAs and interactive focus states—it is the brand's signature and must remain distinctive.
• Do maintain the 28px gutter and 40px section spacing consistently; this breathing room is core to the brand's transparency philosophy.
• Do apply the three-level shadow system (0 3px 8px / 0 10px 30px / 0 22px 44px) to create depth without glassmorphism or blur effects.
• Do pair Space Grotesk headlines with Poppins body text; never reverse or mix them within a single component.
• Do use the secondary green (#12a67e) only for success states, completion indicators, and transparency badges—never for primary actions.
• Do apply the lift effect (transform: translateY(-4px)) on card and button hover with a 150ms transition for consistent micro-interaction feedback.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; stick to the warm palette (#1f2d38 for text, #faf7f1 for background).
• Don't apply glassmorphism, blur effects, or transparency overlays; the design relies on solid surfaces and precise shadows.
• Don't mix rounded radii arbitrarily; follow the graduated scale (11px for inputs, 13px for buttons, 18px for cards, 14px for FAQ items).
• Don't use the primary orange for secondary or tertiary elements; reserve it exclusively for CTAs and focus states to maintain visual hierarchy.
• Don't reduce line-height below 24px for body text or below 22px for labels; generous line-height is essential for readability and warmth.
• Don't apply shadows with pure black (rgba(0, 0, 0, ...)); always use the warm-tinted ink color (rgba(31, 45, 56, ...)) to maintain aesthetic cohesion.