CNI Manufacturing

Overview

CNI Manufacturing is a precision custom fabrication brand with 60 years of American industrial heritage, serving engineers and manufacturers who demand uncompromising quality and reliability. The design system embodies 'Industrial Confidence'—a movement that marries technical authority with approachable clarity, using a bold navy-and-red palette (primary #CD1824, secondary #2A3C6B) to convey both heritage and forward momentum. The aesthetic rejects sterile minimalism in favor of purposeful substance: every visual element earns its place through functional clarity and emotional resonance. Users encounter a brand that feels simultaneously established and dynamic, inviting them into a partnership built on precision and trust.

The voice is direct, knowledgeable, and respectful of the user's time. CNI speaks in concrete terms—'custom fabricating parts for your next project'—avoiding jargon while demonstrating deep technical competence. The tone is confident without arrogance, collaborative without condescension. Example sentence: 'We've been manufacturing precision components since 1965. Tell us what you need, and we'll build it right.'

Colors

The color system is anchored by a deep navy foundation (#283964 surface, #2A3C6B secondary) that evokes industrial stability and technical precision, paired with a vivid red accent (#CD1824 primary, #F60D1C primary-container) that commands attention on CTAs and critical UI elements. The primary red is deployed sparingly but decisively: on 'Contact Us' buttons (rgba(165, 22, 31, 0.1) background with rgb(165, 22, 31) text for outline variants), focus states, and status indicators. The secondary navy anchors the hero section and navigation, creating visual weight and authority. Surface colors range from #0F1A2E (surface-container-lowest, used for deep backgrounds) to #4A5F8A (surface-container-highest, for elevated cards and modals), providing a full tonal range within the cool, professional

Typography

The type system pairs Lato (serif-influenced, warm, authoritative) for display and headline levels with Inter (geometric, modern, precise) for body and label text, creating a visual hierarchy that balances heritage with contemporary clarity. Display (60px, 400 weight, -0.02em tracking) commands hero sections and major announcements; Headline-lg (44px, 400 weight) anchors section introductions; Headline-md (32px, 400 weight) organizes content blocks. 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) serves as the default reading text. Label-md (14px, 600 weight, 0.02em tracking) is applied to buttons, badges, and form labels, with Label-sm (12px, 600 weight, 0.03em tracking) for secon

Layout

The layout operates on a 12-column grid with a max-width of 1280px, providing a flexible, responsive canvas that scales from mobile (single column, 24px gutter) to desktop (full 12 columns, 24px gutter maintained). The hero section spans full-width with 80px vertical padding and a 24px horizontal gutter, creating breathing room around the headline 'Custom fabricating parts for your next project' (44px Lato, white text, centered). Content sections use lg spacing (40px) for vertical separation between major blocks, md spacing (24px) for subsection breaks, and sm spacing (12px) for tight groupings within cards. The container max-width of 1280px ensures readability on ultra-wide displays while maintaining visual focus. White-space is treated as a structural element: the 40px lg spacing between

Elevation & Depth

Visual hierarchy is conveyed through a restrained shadow system and layered backgrounds rather than dramatic depth. Level 1 (Base): The hero section uses a linear gradient (135deg, rgba(42, 60, 107, 0.95) to rgba(40, 57, 100, 0.85)) over a background image, with a 0.3 opacity overlay (rgba(0, 0, 0, 0.3)) and subtle blur (2px backdrop-filter) to ensure text legibility. Level 2 (Standard Card): Cards use surface-container (#283964) background with a 1px border at rgba(255, 255, 255, 0.08) and box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), creating a subtle lift from the page. Level 3 (Elevated/Hover

Shapes

The shape philosophy is 'Technical Precision with Approachability'—sharp corners where structure matters, rounded corners where interaction happens. Buttons use border-radius: 9999px (full roundness) to signal clickability and soften the industrial aesthetic; this applies to all primary, secondary, and ghost buttons. Cards and containers use border-radius: 1rem (16px) for a modern, approachable feel that avoids harsh corners while maintaining visual clarity. Input fields use border-radius: 0.5rem (8px) for a balanced, functional appearance. Small UI elements like badges use border-radius: 9999

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 48px height with 12px vertical and 32px horizontal padding. Primary buttons (#CD1824 background, white text, 9999px border-radius) are reserved for the most important actions: 'Contact Us', 'View Capabilities', and form submissions. On hover, the background transitions to #A51617 (primary-fixed-dim) with a 0.24 opacity red shadow (box-shadow: 0 4px 12px rgba(205, 24, 36, 0.24)) and a -2px vertical translate, all over 200ms. On focus, a 2px outline in primary-container (#F60D1C) appears 2px outside the button boundary. Secondary buttons use a transparent background with a 2px solid border in #CD1824 and matching text color; on hover, the background becomes rgba(205, 24, 36, 0.08) and the border shifts to

Do's and Don'ts

**Do**

• Do use primary red (#CD1824) exclusively on primary CTAs, focus states, and critical alerts—never on secondary or decorative elements.
• Do maintain 24px gutters and 40px section spacing to create visual breathing room and guide users through the content hierarchy.
• Do apply 200ms ease-in-out transitions to all interactive elements (buttons, cards, inputs) to signal responsiveness without feeling sluggish.
• Do use Lato for headlines and Inter for body text to balance heritage authority with modern clarity—never mix them within a single text block.
• Do ensure all text on dark navy backgrounds (#283964) uses white (#FFFFFF) at 400 weight with 24px+ line-height for comfortable reading.
• Do apply 9999px border-radius to buttons and badges to lower the cognitive barrier to interaction and soften the industrial aesthetic.

**Don't**

• Don't use primary red (#CD1824) on non-interactive elements or backgrounds—it must remain reserved for actions and focus states to maintain visual clarity.
• Don't apply shadows deeper than 0 16px 40px rgba(0, 0, 0, 0.16) or use blur effects beyond 2px backdrop-filter, as they conflict with the technical precision aesthetic.
• Don't mix rounded and sharp corners within a single component (e.g., a button with 9999px radius and a 0px border)—maintain consistency within the shape hierarchy.
• Don't use secondary navy (#2A3C6B) for text on dark backgrounds; it will disappear. Reserve it for structural elements, hero sections, and containers only.