Jupiter Rollform Machines

Overview

Jupiter Rollform Machines is an industrial B2B manufacturer of precision roll forming, slitting, and cut-to-length production lines serving India's metal fabrication sector. The design system embodies 'Industrial Precision Minimalism'—a visual language that prioritizes clarity, technical authority, and trustworthiness through a confident palette of deep corporate blue (#004f8a) paired with vibrant accent green (#8BC34A). The UI evokes reliability and engineering excellence, communicating that Jupiter's machinery is built to exacting standards and operates with mechanical precision. The brand personality is direct, knowledgeable, and solution-focused: no flourish, no ambiguity, only the information engineers and procurement teams need. Voice example: 'Our CZ Purlin Roll Forming Line delivers 120 meters per minute with ±0.5mm tolerance—engineered for consistency across 50,000+ cycles.'

Colors

The color system reflects industrial authenticity and corporate trust. Primary (#004f8a, rgb(0, 79, 138)) is the dominant brand color, used for headers, navigation, primary CTAs, and all interactive focus states—it commands attention without aggression. Secondary (#25d366, the WhatsApp green) serves as the accent for 'Book a Factory Visit' and other high-intent actions, creating visual contrast and urgency. Tertiary (#337ab7) supports secondary information hierarchies and status indicators. The surface stack uses clean whites (#ffffff) and light grays (#f5f5f5, #eeeeee, #dddddd) to maintain legibility and reduce cognitive load on dense product specification pages. On-surface text is set to #282828 (near-black) for 98% contrast compliance; on-surface-variant (#777777) is reserved for second

Typography

The type system uses Roboto exclusively, a geometric sans-serif that conveys technical precision and modern professionalism. Display (60px, 700 weight, -0.04em tracking) anchors hero headlines and brand statements; Headline-lg (40px, 600 weight) breaks major sections; Headline-md (28px, 600 weight) introduces subsections and product categories. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and feature descriptions, while Body-md (16px, 400 weight, 24px line-height) handles standard body copy and form labels. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, navigation items, and form field labels; Label-sm (12px, 500 weight, 0.05em tracking) is reserved for metadata, badges, and helper text. All headlines use -0.02em to -0.04em negat

Layout

The layout uses a 12-column grid with a max-width of 1200px, centered on the viewport. The hero section spans full-width with a background image of machinery (reinforcing industrial authenticity), overlaid with a semi-transparent blue gradient (rgba(0, 79, 138, 0.7)) to ensure text legibility. Content sections use lg spacing (40px) for vertical rhythm between major blocks, md spacing (24px) for subsection separation, and sm spacing (12px) for internal card/list padding. The gutter (24px) is applied consistently to left/right margins on all container elements. Product specification tables and feature lists use a 2-column or 3-column layout on desktop, collapsing to single-column on mobile. Whitespace is generous—never crowding more than 3 product cards per row—to allow the eye to rest and e

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the 'floating card' aesthetic common in consumer apps. The base surface (Level 1) is pure white (#ffffff) with no shadow. Level 2 (standard cards, input fields, dropdown panels) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift that distinguishes interactive elements from the background without distraction. Level 3 (modals, hero overlays, elevated buttons on hover) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger blur radius that suggests greater distance. Buttons transition between shadow levels on

Shapes

The shape philosophy is 'Technical Softness'—sharp enough to feel engineered, rounded enough to feel approachable. Buttons use border-radius: 0.5rem (8px), a subtle rounding that softens the rectangular form without compromising the industrial aesthetic. Cards and containers use 0.75rem (12px) for a slightly more pronounced curve that distinguishes them from buttons. Input fields and select dropdowns use the DEFAULT radius (0.5rem / 8px) to align with button styling and create a cohesive form language. Modals and elevated panels use 1rem (16px) for a more generous curve that signals importance

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (background: {colors.primary} #004f8a, text: white, height: 48px, padding: 12px 24px, border-radius: 8px) are used for main CTAs like 'Book a Factory Visit' and form submissions. On hover, the background transitions to {colors.primary-container} (#0453a1) with a 200ms ease transition and elevation increases from md to lg shadow. Secondary buttons (transparent background, 2px solid border in primary, same text color) are used for alternative actions like 'Learn More' or 'Download Brochure'—on hover, the background fills with {colors.surface-container-high} (#dddddd). The accent button (background: {colors.secondary} #25d366, text: white, border-radius: 50%) is reserved for the WhatsApp contact button in the foo

Do's and Don'ts

**Do**

• Do use the primary blue (#004f8a) for all primary CTAs, focus states, and interactive elements—it is the brand's signature and must remain consistent across all touchpoints.
• Do apply the md shadow (0 3px 8px rgba(0,0,0,0.15)) to cards and dropdown panels to create subtle depth without the 'floating' aesthetic of consumer apps.
• Do maintain 24px (md spacing) between major sections and 12px (sm spacing) within cards to create a clear visual hierarchy and reduce cognitive load.
• Do use Roboto exclusively at 14px 600 weight (label-md) for all button text and form labels to maintain technical precision and consistency.
• Do include a 3px focus ring in primary color (rgba(0, 79, 138, 0.1)) on all interactive elements for keyboard navigation accessibility.
• Do use the secondary green (#25d366) sparingly—only for high-intent actions like 'Book a Factory Visit' or WhatsApp contact buttons to create visual urgency.
• Do apply 0.5rem (8px) border-radius to buttons and inputs, 0.75rem (12px) to cards, and 1rem (16px) to modals to maintain the 'Technical Softness' aesthetic.

**Don't**

• Don't use the secondary green (#25d366) for low-priority actions or background fills—reserve it exclusively for high-intent CTAs to maintain visual hierarchy.
• Don't apply shadows larger than lg (0 8px 24px rgba(0,0,0,0.12)) to any element; the industrial aesthetic rejects the 'floating card' look of consumer design.
• Don't use border-radius values larger than 1rem (16px) on any component; excessive rounding contradicts the precision-engineering brand personality.
• Don't mix typefaces—Roboto is the only approved font family; system fonts or serif typefaces undermine the technical authority of the brand.
• Don't set text color to pure black (#000000) or pure white (#ffffff) for body copy; use #282828 (on-surface) for text and #ffffff for backgrounds to reduce eye strain.
• Don't apply more than two levels of shadow hierarchy in a single view; excessive depth creates visual noise and distracts from product information.
• Don't use the primary blue (#004f8a) for background fills on large areas; reserve it for headers, buttons, and accent elements to maintain contrast and readability.