JUGMUG

Overview

JUGMUG is a precision industrial equipment manufacturer specializing in roll forming machinery, serving global markets since 1982. The design system embodies **Industrial Directness**—a no-nonsense aesthetic that prioritizes clarity, action, and technical credibility over decoration. The brand personality is authoritative yet approachable: confident in expertise, direct in communication, and focused on solving manufacturing challenges. The UI uses bold accent colors (vibrant red #ee3a25 for CTAs, electric blue #00b3ff for secondary actions) against clean white surfaces and neutral grays, creating visual hierarchy that guides users toward critical information and conversion points. Voice: precise, solution-oriented, and outcome-focused. Example: "Our roll forming machines deliver ±0.5mm tolerance across 2000+ installations worldwide."

Colors

The color system balances industrial authority with modern accessibility. **Primary (#ee3a25)** is a bold, high-contrast red deployed exclusively on primary CTAs ("Get Quote", "Contact Now"), form submit buttons, and critical alerts—it commands attention without aggression. **Secondary (#00b3ff)** is a vivid cyan used for secondary actions, links, and informational badges; it provides visual relief and guides users through multi-step workflows. **Tertiary (#ff6900)** is a warm orange reserved for highlights, accent text, and status indicators. The surface stack uses a clean white base (#ffffff) with subtle gray containers (#f3f3f3 for lowest, #cccccc for highest) to create depth without darkness. **On-surface (#1d2939)** is a near-black for body text and ensures 16:1 contrast on white back

Typography

The type system uses the Gilroy family (Gilroy-Regular, Gilroy-Medium, Gilroy-Semibold) as the primary typeface, paired with system sans-serif fallbacks for reliability. **Display (51.2px, 600 weight)** is reserved for hero headlines and page titles, set in white on dark overlays or dark on light backgrounds with -0.02em letter-spacing for tightness. **Headline-lg (40px, 600 weight)** and **headline-md (28px, 600 weight)** structure section breaks and card titles, using -0.01em tracking to maintain visual weight. **Body-lg (18px, 400 weight)** and **body-md (16px, 400 weight)** form the reading layer for product descriptions and feature lists, with 24–28px line-height for comfortable scanning. **Label-md (14px, 500 weight)** and **label-sm (12px, 400 weight)** are applied to form labels, b

Layout

The layout uses a 12-column responsive grid with a max-width of 1300px, centered on the viewport. The design employs a **fluid-to-fixed** breakpoint strategy: below 992px, the grid collapses to 6 columns; below 600px, to 4 columns. Container padding uses the gutter token (24px) on desktop, reducing to 12px (sm spacing) on mobile. Section separation follows the lg spacing scale (40px) between major content blocks, with md spacing (24px) between cards and subsections. The hero section spans full-width with a dark overlay (rgba(0, 0, 0, 0.4)) to ensure text contrast; body copy within cards uses md padding (24px) to create breathing room. Form fields and inputs are full-width within their containers, with sm spacing (12px) between label and input. Lists use sm padding (12px) per item with md s

Elevation & Depth

Depth is achieved through subtle shadows and border definition rather than layering or blur effects. **Level 1 (Base)**: flat white surface (#ffffff) with no shadow, used for primary content areas and form backgrounds. **Level 2 (Raised Cards)**: 1px solid border in outline-variant (#c4c7c8) + box-shadow: 0 1px 2px 0 rgba(18, 18, 23, 0.05), applied to cards, input fields, and list items. **Level 3 (Elevated/Modals)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) + 1px border, used for hover states on cards and modal overlays. **Level 4 (Floating)**: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), res

Shapes

The shape philosophy is **Technical Precision**—minimal rounding that suggests engineering rigor without appearing cold. **Buttons and inputs** use 4px border-radius (DEFAULT), creating subtle softness while maintaining a structured, industrial feel. **Cards and containers** use 8px (md), providing slightly more breathing room for grouped content. **Badges and pills** use 9999px (full) for maximum softness, differentiating them as secondary UI elements. **Dividers and borders** are 1px straight lines with no rounding, emphasizing clean separation. This hierarchy—sharp dividers, slightly rounde

Components

Action Elements **Button-primary** (#ee3a25 background, white text, 44px height, 12px 21px padding, 4px radius) is the dominant CTA for quote requests and contact actions. On hover, shift to #d62f1f (darker red) with 200ms transition; on active/press, use #b8261a. Never use primary buttons for secondary actions (e.g., "Cancel", "Learn More"). **Button-secondary** uses transparent background with 2px solid primary border and primary text; on hover, fill the background with primary-container (#ffebe8) to indicate interactivity. Both button variants must have minimum 44px height for touch targets and 48px on mobile.

Containers & Surfaces **Card** component uses surface-container-lowest (#f1f1f1) background, 8px border-radius, 24px padding, and a 1px outline-variant border. On hover,

Do's and Don'ts

**Do**

• Do use primary red (#ee3a25) exclusively for high-priority CTAs (quote, contact, submit); overuse dilutes urgency.
• Do maintain 44px minimum height on all interactive elements (buttons, inputs, list items) for mobile accessibility.
• Do apply md-level shadow (0 3px 8px rgba(0, 0, 0, 0.15)) on card hover to signal elevation without changing color.
• Do use Gilroy-Semibold (600 weight) for headlines and Gilroy-Regular (400 weight) for body text; avoid mixing weights within a single text block.
• Do enforce 1300px max-width on desktop layouts and use 24px gutter padding to prevent edge-to-edge content.
• Do apply 200ms ease-in-out transitions on all state changes (hover, focus, active) for perceived responsiveness.

**Don't**

• Don't use primary red for secondary actions, links, or decorative elements; reserve it for conversion moments.
• Don't apply shadows deeper than lg-level (0 8px 24px rgba(0, 0, 0, 0.12)) or use color-tinted shadows; maintain neutral dark shadows only.
• Don't round borders on dividers, form labels, or structural elements; reserve rounding for interactive components (buttons, inputs, badges).
• Don't mix typefaces; Gilroy is the sole brand typeface; use weight variation (400, 500, 600) instead of switching families.
• Don't set body text smaller than 16px or line-height below 24px; readability is non-negotiable for technical content.
• Don't apply primary color to more than 15% of a page's interactive elements; visual hierarchy depends on restraint.