MKC Infracon

Overview

MKC Infracon is a construction and infrastructure company brand system rooted in **Architectural Confidence**—a design philosophy that merges industrial precision with approachable professionalism. The brand serves developers, builders, and property owners across Odisha seeking reliable, high-quality construction delivery. The visual language emphasizes bold, high-contrast color (vibrant green primary accent against neutral whites and grays), clean geometric forms, and structured typography that evokes both technical competence and trustworthiness. The UI evokes a sense of clarity and forward momentum: users feel assured that their vision will be executed with precision and care.

The brand voice is direct, confident, and grounded. Vocabulary favors concrete action verbs ("build," "develop," "deliver") over abstract promises. Tone is professional yet warm—never corporate-stiff, never casual. Example sentence: "We'll develop what you dream—on schedule, on budget, on quality."

Colors

The MKC Infracon color system balances bold accent energy with professional neutrality. **Primary (#25d366, vibrant green)** is the signature accent—applied to call-to-action buttons, active navigation states, focus rings, and key interactive elements. This green conveys growth, stability, and forward progress, essential to a construction brand. It appears on the circular WhatsApp CTA button and primary form submissions. **Secondary (#ffc107, golden yellow)** is the energetic supporting accent, used for the top bar, highlights, and secondary CTAs. It creates visual rhythm and draws attention to secondary actions without competing with primary. **Tertiary (#0d6efd, Bootstrap blue)** serves as an informational accent for links, badges, and status indicators. **Error (#dc3545, red)** is reser

Typography

The type system pairs **Roboto** (headings, display) with **Open Sans** (body, UI labels), creating a hierarchy that balances authority with accessibility. Roboto's geometric precision conveys technical competence; Open Sans's friendliness softens the industrial aesthetic. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements. Headline-lg (40px, 600 weight) is used for section titles and page headings. Body-md (16px, 400 weight, 24px line-height) is the workhorse for paragraph text, maintaining 1.5 line-height for readability on construction-focused content. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, form labels, and UI controls. On small labels over busy backgrounds (e.g., badges on hero images), apply text-shadow: 0 2px 4p

Layout

The layout system uses a **12-column fluid grid** with a max-width of 1320px, scaling fluidly below 1200px breakpoints (960px at tablet, 720px at mobile). The gutter is fixed at 24px (1.5rem), providing consistent breathing room between columns. Container padding is 24px on desktop, 16px on tablet, 12px on mobile. Section separation uses **lg spacing (40px)** between major content blocks (hero to welcome section, welcome to services, etc.), creating a rhythm that feels neither cramped nor excessive. Horizontal rhythm is maintained through consistent left/right padding on text blocks: 24px on desktop, 16px on tablet. The hero carousel spans full-width with an overlay gradient (rgba(0,0,0,0.35)) to ensure text legibility over construction imagery. Card grids use 3 columns on desktop, 2 on ta

Elevation & Depth

Depth is conveyed through a three-level shadow system and subtle vertical translation on interaction. **Level 1 (Base)**: flat surfaces (body background, surface-container) have no shadow; they sit at z-index 0. **Level 2 (Cards & Inputs)**: cards, input fields, and standard containers use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift of ~4px. **Level 3 (Modals & Popovers)**: modals, dropdowns, and elevated panels use box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), suggesting a lift of ~16px. On hover, cards transition from Level 2 to Level 3 (0 6px 16px rgba(0,0,0,0.08)) and tr

Shapes

The shape system follows **Soft-Technical** principles: rounded corners are used strategically to soften industrial geometry while maintaining clarity. **Buttons** use full border-radius (9999px / 50%), creating pill-shaped CTAs that feel modern and clickable. **Cards and containers** use 0.5rem (8px) radius, providing subtle rounding that doesn't distract from content. **Input fields** use 0.375rem (6px) radius, matching Bootstrap's default for consistency. **Modals and elevated surfaces** use 1rem (16px) radius, creating a more pronounced softness for important overlays. The rationale: full-

Components

Action Elements **Button-Primary** (primary CTA): backgroundColor {colors.primary} (#25d366), textColor white, full border-radius (50%), padding 12px 32px, height 48px, box-shadow 0 3px 8px rgba(0,0,0,0.15). On hover, darken to #1fa854 and increase shadow to 0 6px 16px rgba(37,211,102,0.25) over 150ms. On active/press, darken further to #16854a and reduce shadow to 0 2px 4px. Apply transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth state changes. **Button-Secondary** (secondary CTA): backgroundColor {colors.secondary} (#ffc107), textColor black, rounded 0.375rem, padding 12px 24px, height 48px. Hover state: #ffb300 with shadow 0 6px 16px rgba(255,193,7,0.25). **Button-Ghost** (tertiary CTA): transparent background, 2px solid border in {colors.primary}, textColor {colors.prim

Do's and Don'ts

**Do**

• Do use {colors.primary} (#25d366) exclusively for primary CTAs, active states, and focus rings—it's the brand's signature accent and must remain distinctive.
• Do maintain minimum 24px padding inside cards and containers; never allow text to touch edges.
• Do apply box-shadow: 0 3px 8px rgba(0,0,0,0.15) to all elevated surfaces (cards, inputs, dropdowns) for consistent depth.
• Do use Roboto for all headings (h1–h6) and Open Sans for body text and UI labels—never mix or substitute system fonts.
• Do apply transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) to interactive elements (buttons, cards, inputs) for smooth, professional motion.
• Do ensure all text meets WCAG AA contrast: 4.5:1 for body text, 3:1 for large text (18px+, 600 weight).

**Don't**

• Don't use {colors.secondary} (#ffc107) for primary CTAs—it's a supporting accent only; reserve it for secondary actions and highlights.
• Don't apply border-radius: 0 to interactive elements; minimum 0.375rem (6px) for inputs, 0.5rem (8px) for cards, 50% for buttons.
• Don't exceed 1.5rem border-radius on standard UI components; reserve larger radius for special cases (badges, modals).
• Don't apply shadows deeper than 0 16px 40px rgba(0,0,0,0.12) on standard surfaces—it creates visual clutter and reduces hierarchy clarity.
• Don't mix Roboto and Open Sans within a single heading or paragraph; maintain strict font assignment per typography tier.
• Don't use color alone to convey status or meaning—always pair with icons, text labels, or patterns for accessibility.