Hasiru Dala Innovations

Overview

Hasiru Dala Innovations is a professional waste management company serving corporate offices and institutional campuses in Bangalore with compliant, traceable, and reliable services. The design system embodies 'Sustainable Minimalism'—a visual language that prioritizes clarity, trust, and environmental responsibility through a carefully curated palette of nature-inspired greens (#199f67 primary, #55cd6c accent), calm neutrals (#333333 text, #707070 secondary text), and soft surface containers (#e8f6f0, #f3ffe3). The aesthetic communicates operational excellence and ecological consciousness without sacrificing accessibility or warmth.

The brand voice is professional yet approachable, precise yet human. Tone patterns include: direct statements of capability ('99% Quality of Service'), emphasis on partnership ('Partner With Us'), and transparent communication about processes and impact. The vocabulary favors concrete, measurable language—'compliant,' 'traceable,' 'authorized destinations,' 'Green Collar® Professionals'—avoiding corporate jargon while maintaining credibility. Example sentence: 'Our ground teams are run by waste picker/worker turned Green Collar® Professionals, ensuring responsible waste management with authorised destinations.'

Colors

The color system is rooted in environmental trust and operational clarity. Primary (#199f67) is the signature accent used on all call-to-action buttons ('PARTNER WITH US', 'CONTACT US'), interactive states, and brand-critical UI elements. It conveys growth, sustainability, and reliability—the core promise of the waste management service. Secondary (#204ce5) serves as a supporting accent for form focus states, secondary CTAs, and data visualization, adding a professional, tech-forward dimension. Tertiary (#244051) anchors the system as a deep, stable color for headings and structural elements, grounding the interface in authority.

The surface stack is deliberately light and airy to communicate transparency and cleanliness. Surface-container (#e8f6f0) and surface-container-low (#f3ffe3) are

Typography

The type system pairs Onest (headlines, labels, UI text) with Open Sans (body copy) and Poppins (supporting titles), creating a hierarchy that balances personality with legibility. Onest's geometric, friendly character conveys approachability and modernity—ideal for headlines (45px, 700 weight) and call-to-action labels (14px, 600 weight, 0.05em letter-spacing). Open Sans provides neutral, highly readable body copy at 16px (body-md) and 18px (body-lg) with 24px and 28px line-heights respectively, ensuring comfortable reading at all sizes. Letter-spacing is conservative (0.01–0.02em on body text) to maintain density and professionalism, while labels use 0.04–0.05em to add visual distinction and emphasis. On small labels over busy backgrounds (e.g., badges on cards), apply text-shadow: 0 1px

Layout

The layout follows a 12-column grid with a max-width of 1200px, providing a fluid yet controlled canvas. The page rhythm is built on a 24px gutter (md spacing) for section separation and 40px (lg spacing) for major section breaks, creating a breathing room that reflects the brand's calm, deliberate approach. Container widths are constrained to 1200px to maintain focus and readability; narrower sections (e.g., hero text blocks) use 800px max-width for optimal line length (~60–70 characters). White-space is generous: hero sections use 80px vertical padding, card stacks use 24px gaps, and text blocks have 16px margins between paragraphs. The spacing scale is semantic: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for standard section gaps, lg (40px) for major sec

Elevation & Depth

Depth is conveyed through subtle, naturalistic shadows and soft color transitions rather than dramatic layering. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.04)) for subtle dividers and micro-interactions, md (0 8px 20px rgba(0, 0, 0, 0.06)) for standard cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.08)) for elevated modals and hero overlays. Shadows are soft and diffuse, with low opacity (4–8%) to maintain the calm aesthetic. The hero section uses a subtle linear gradient (135deg, #e8f6f0 to #f3ffe3) layered with organic background shapes (visible in the scre

Shapes

The shape philosophy is 'Organic Accessibility'—combining soft, rounded corners with precise geometric control to communicate both approachability and professionalism. Buttons use full radius (9999px) to create pill-shaped, friendly CTAs that invite interaction; this is applied consistently to 'PARTNER WITH US' (primary), 'CONTACT US' (secondary), and all form submit buttons. Cards and containers use md (5px) or lg (20px) radius depending on prominence: standard content cards use 5px for subtle definition, while testimonial cards and featured sections use 20px for visual emphasis. Input fields

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (#199f67, full radius, 48px height, 14px 35px padding) use Onest 600 weight with white text and no shadow, creating a clean, confident CTA. On hover, the background transitions to primary-fixed-dim (#2db742) over 200ms, providing clear feedback. Secondary buttons use surface-container (#e8f6f0) background with primary text, allowing users to explore without committing. Ghost buttons (transparent, 1px primary border) are used for tertiary actions like 'Learn More' links. All buttons maintain 48px minimum height for touch accessibility and use 0.05em letter-spacing on labels for visual distinction.

Containers & Surfaces Cards are the primary content container, using white background (#ffffff) with a 1px out

Do's and Don'ts

**Do**

• Do use primary (#199f67) exclusively on CTAs, focus states, and brand-critical interactive elements—it is the signature accent and should never be diluted or overused.
• Do maintain 24px gutter spacing between sections and 40px for major breaks; this rhythm creates the calm, professional atmosphere that defines the brand.
• Do apply full (9999px) border-radius to all buttons and pill-shaped containers to reinforce the approachable, friendly brand personality.
• Do use Onest for headlines, labels, and UI text (600–700 weight) and Open Sans for body copy (400 weight, 16–18px) to maintain clear hierarchy and readability.
• Do apply soft shadows (md: 0 8px 20px rgba(0, 0, 0, 0.06)) to cards and containers; avoid harsh, high-opacity shadows that contradict the calm aesthetic.
• Do use surface-container (#e8f6f0) and surface-container-low (#f3ffe3) for backgrounds and subtle containers to reinforce the environmental mission without overwhelming the page.

**Don't**

• Don't use primary (#199f67) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and focus states to maintain visual hierarchy.
• Don't apply border-radius of 0px to any interactive element; even 3–4px softens the interface and reduces cognitive friction.
• Don't exceed lg elevation (0 16px 40px rgba(0, 0, 0, 0.08)) on standard cards; deeper shadows create visual clutter and contradict the minimalist aesthetic.
• Don't mix font families within a single component (e.g., Onest label + Poppins value); maintain consistency within component families.
• Don't use error (#cf2e2e) for non-critical messaging; reserve it for validation failures and warnings to maintain its impact.
• Don't reduce letter-spacing below 0em on body text; maintain at least 0.01em to preserve legibility and professionalism.