O'Mishti Infrastructure

Overview

O'Mishti Infrastructure is a civil construction firm delivering highways, bridges, residential complexes, and government projects across Gujarat. The design system embodies **Structural Minimalism**—an aesthetic that prioritizes clarity, precision, and confidence through restrained color and bold typography. The brand personality is authoritative yet approachable: engineering-focused, detail-obsessed, and grounded in real-world delivery. The UI conveys stability and competence through a clean white canvas (surface: #ffffff) punctuated by a signature burnt-orange accent (primary: #e85d3a) that appears on all call-to-action elements, creating visual hierarchy without noise. Voice: direct, factual, solution-oriented. Example: 'We deliver 40,000 sq ft of RCC framing on schedule, every time.'

Colors

The color system is anchored in a high-contrast, light-first philosophy. **Primary (#e85d3a)** is the burnt-orange accent reserved exclusively for interactive elements—buttons, links, focus states, and brand highlights. It appears sparingly but decisively, ensuring every use carries weight. **On-Primary (#ffffff)** provides maximum contrast for text and icons on primary backgrounds. **Secondary (#505050)** is a near-black used for dark CTAs and secondary navigation; **On-Secondary (#ffffff)** ensures legibility. The surface stack progresses from pure white (surface: #ffffff) through subtle grays (surface-container: #e9ecef, surface-container-high: #e0e0e0) to support layering without visual clutter. **On-Surface (#161616)** is the primary text color—a true dark gray, not pure black, reduci

Typography

The type system pairs **Space Grotesk** (geometric, modern, engineered) for headlines and display text with **Inter** (humanist, readable, neutral) for body and UI labels. This pairing communicates precision (Grotesk) grounded in accessibility (Inter). Display (88px, 600 weight, -0.02em tracking) commands attention on hero sections; Headline-LG (48px, 600 weight) anchors section introductions. Body-MD (16px, 400 weight, 24px line-height) is the default UI text, set at 1.5 line-height for comfortable reading. Label-MD (14px, 500 weight, 0.01em tracking) is used for buttons and form labels, with tighter tracking to reinforce hierarchy. All headlines use negative letter-spacing (-0.02em to -0.01em) to tighten their visual mass; body text uses 0em tracking for neutrality. Apply text-rendering:

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered with symmetric margins. The gutter is 32px (spacing.gutter), creating breathing room between sections. Hero sections use full-width backgrounds (white or light gray) with content constrained to the container; this prevents visual sprawl while maintaining the clean aesthetic. Spacing follows the 8px unit system: sections are separated by lg spacing (40px), cards by md spacing (24px), and inline elements by sm spacing (12px). The container-max-width of 1280px ensures readability on large screens without excessive line lengths. Padding inside cards is consistently md (24px), creating a predictable rhythm. Margins between headline and body copy are 16px (2 × unit); margins between body and CTA are 24px (md). This creates a c

Elevation & Depth

Depth is achieved through subtle shadows and layering, not through dark overlays or glassmorphism. **Level 1 (Base)**: flat surfaces with no shadow, used for the main background and card backgrounds. **Level 2 (Raised Cards)**: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), applied to cards, modals, and floating elements. This shadow has a 4px blur and 12px spread, creating a soft, diffuse effect that suggests elevation without drama. **Level 3 (Hover/Active)**: box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), applied on hover to cards and on active buttons. The increased blur (16px) and spread (40px)

Shapes

The shape philosophy is **Technical Clarity**—rounded corners are used strategically to soften hard edges while maintaining a structured, engineered feel. **Buttons and CTAs** use full (9999px) border-radius, creating pill-shaped forms that feel modern and approachable. **Cards and containers** use lg (1rem / 16px) border-radius, a moderate curve that suggests containment without appearing organic. **Input fields** use DEFAULT (0.5rem / 8px) border-radius, a subtle curve that maintains the form's rectangular integrity while avoiding sharp corners. **Badges and tags** use full (9999px) radius t

Components

Action Elements **Button-Primary** (primary: #e85d3a, on-primary: #ffffff, 48px height, 14px 24px padding, full radius, 500 weight) is the dominant CTA. On hover, the background darkens to #d64d28 with a 200ms ease transition. On focus, apply a 3px inset box-shadow: 0 0 0 3px rgba(232, 93, 58, 0.1). **Button-Secondary** (transparent background, primary text, 1px outline-variant border, same dimensions) is used for secondary actions. On hover, the background becomes surface-container-low (#efefef). **Button-Dark** (secondary: #505050, on-secondary: #ffffff) is used for tertiary actions or dark-themed sections; on hover, it darkens to #3a3a3a. All buttons use Inter 500 weight and transition all properties over 200ms ease.

Containers & Surfaces **Card** (surface background, lg radius

Do's and Don'ts

**Do**

• Do use primary (#e85d3a) exclusively for interactive elements—buttons, links, focus states, and brand accents. Never use it for backgrounds or body text.
• Do maintain at least 40px (lg spacing) between major sections to create visual breathing room and reduce cognitive load.
• Do pair Space Grotesk headlines with Inter body text to communicate precision grounded in accessibility.
• Do apply a 1px outline-variant border to all cards and containers to define edges without heaviness.
• Do use full (9999px) border-radius on buttons and pill-shaped elements to signal interactivity.
• Do transition all interactive state changes (hover, focus, active) over 200ms ease for responsive but not jarring feedback.

**Don't**

• Don't use primary color for backgrounds, body text, or non-interactive elements—reserve it for CTAs and focus states only.
• Don't apply shadows stronger than lg (0 16px 40px rgba(0, 0, 0, 0.12)) to avoid creating visual clutter or a dated 'material design' appearance.
• Don't mix Space Grotesk and Inter within the same text block; use Grotesk for headlines and Inter for body.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; use on-primary (#ffffff) and on-primary-container (#8b3a1f) for contrast and readability.
• Don't apply border-radius smaller than DEFAULT (0.5rem / 8px) to buttons or cards; sharp corners conflict with the refined aesthetic.
• Don't use more than 2–3 accent colors in a single view; the system relies on restraint and clarity, not visual noise.