KisanKraft

Overview

KisanKraft is India's premier agricultural machinery manufacturer, serving farming communities with affordable, high-quality equipment designed for durability and performance in the field. The brand embodies 'Functional Pragmatism'—a design philosophy that prioritizes clarity, accessibility, and trust through bold typography, vibrant accent colors, and industrial-strength visual hierarchy. The UI evokes confidence and reliability: farmers and dealers encounter a no-nonsense interface that communicates expertise and dependability. Voice: direct, empowering, and grounded in real-world agricultural challenges. Example sentence: 'Twenty years of proven performance. Built to last through every season.'

Colors

The color system balances industrial robustness with agricultural vitality. Primary (#91e944) is a luminous lime-green—the signature accent used on all CTAs ('ENQUIRE', 'JOIN NOW'), interactive states, and brand highlights. It signals growth, sustainability, and forward momentum. Secondary (#0066cc) is a professional blue reserved for navigation, links, and secondary actions, providing visual contrast and trust. Tertiary (#45750f) is a deep forest-green representing agricultural heritage and soil. The surface stack uses clean whites (#ffffff) and subtle grays (surface-container: #e9ecef, outline: #6c757d) to maintain legibility over hero images with dark overlays. Status colors follow semantic conventions: success backgrounds use hsl(143, 85%, 96%) with hsl(140, 100%, 27%) text; error uses

Typography

The type system pairs Barlow Condensed (headlines, CTAs) with Albert Sans (body, inputs) to create visual tension between authority and approachability. Display (80px, 600 weight, -0.02em tracking) commands attention on hero sections; headline-lg (48px) anchors section introductions; body-md (16px, 400 weight) ensures readability at standard viewing distance. The condensed headline family compresses vertical space, allowing bold messaging like 'EMPOWERING COMMUNITIES WITH FUTURE-READY SOLUTIONS' to occupy hero real estate without overwhelming. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white headlines over photographic backgrounds to maintain contrast; use letter-spacing: -0.02em on display text to tighten the visual mass and reinforce urgency.

Layout

The page uses a 12-column fluid grid with a max-width of 1350px, centered on viewport. Hero sections span full-width with 40px (lg spacing) padding on desktop, collapsing to 24px (md spacing) on tablet. Section separation uses 64px (xl spacing) vertical margins to create breathing room between content blocks. Container padding follows the gutter token (24px) on all sides, with nested content using 12px (sm spacing) for internal rhythm. The layout prioritizes hero imagery with semi-transparent overlays (rgba(0, 0, 0, 0.4) typical) to ensure text legibility while maintaining visual impact. Product cards and form sections use 24px (md spacing) padding with consistent 8px (md rounded) corners, creating a modular, scannable interface.

Elevation & Depth

Depth is achieved through subtle layering and shadow hierarchy rather than dramatic depth effects. Level 1 (Base): flat surfaces with no shadow, used for primary content areas and hero backgrounds. Level 2 (Standard Cards): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) applied to product cards, modals, and dropdown panels—creates gentle lift without distraction. Level 3 (Elevated/Interactive): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover states and focused elements, signaling interactivity. Dropdowns and select panels use z-index: 999999 to float above page content. Focus states add a 3px ri

Shapes

The shape philosophy is 'Industrial Softness'—sharp corners on functional elements (inputs, cards at 4px) paired with fully rounded CTAs (border-radius: 9999px) to signal action and approachability. Buttons use pill-shaped geometry (8px 24px padding, full radius) to stand out as primary interaction points; this contrasts with the rectilinear card grid (8px radius) and creates visual hierarchy. Select dropdowns and modals use 4px radius for a clean, utilitarian feel. The 22px radius (xl token) is reserved for large container elements and hero overlays, softening the overall aesthetic without co

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#91e944) background with {colors.on-primary} (#121212) text, 24px font-size (Barlow Condensed, 600 weight), 8px 24px padding, and full border-radius. On hover, transition to {colors.primary-fixed-dim} (#91e944 at reduced opacity) over 200ms. Button-secondary mirrors the structure but uses {colors.secondary} (#0066cc) with white text. All buttons include a 200ms ease-in-out transition on background-color and box-shadow for smooth state changes.

Containers & Surfaces Cards use {colors.surface} (#ffffff) background with 1px border in {colors.outline-variant} (#adb5bd), 24px padding, and {rounded.md} (8px). Apply {elevation.md} (0 4px 12px rgba(0, 0, 0, 0.1)) by default; on hover, upgrad

Do's and Don'ts

**Do**

• Do use {colors.primary} (#91e944) exclusively for primary CTAs and interactive highlights—it is the brand's signature accent and must remain distinctive.
• Do apply 200ms ease-in-out transitions on all interactive state changes (hover, focus, active) to create a cohesive, responsive feel.
• Do pair Barlow Condensed headlines with Albert Sans body text to maintain visual hierarchy and readability across all screen sizes.
• Do use {elevation.md} (0 4px 12px rgba(0, 0, 0, 0.1)) as the default card shadow; reserve {elevation.lg} for hover and elevated states only.
• Do maintain 24px (md spacing) gutters and 40px (lg spacing) section separation to create breathing room and visual rhythm.

**Don't**

• Don't use {colors.primary} (#91e944) for body text or non-interactive elements—reserve it for CTAs, badges, and focus states to preserve its signal strength.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or blur effects; the design system favors clarity and legibility over atmospheric depth.
• Don't mix Barlow Condensed and Albert Sans within a single text block; use Barlow for headlines/labels and Albert for body/inputs exclusively.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the modular system.
• Don't apply transitions longer than 300ms or use easing functions other than ease-in-out; faster, predictable motion feels more responsive and agricultural-grade.