Chrome Industries

Overview

Chrome Industries is a heritage brand born from the intersection of urban movement and self-expression, rooted in the design of durable, functional gear for riders and creators. The visual language embraces **Utilitarian Minimalism**—a design philosophy that strips away ornament to reveal essential form, combining industrial precision with approachable warmth. The aesthetic draws from workwear traditions and contemporary streetwear, using a stark black-and-white foundation punctuated by a vivid yellow accent (#ffeb00) that signals action, urgency, and the brand's rebellious spirit. The UI evokes clarity and directness: high-contrast typography in Archivo Narrow (uppercase, 700 weight) commands attention, while generous white space and a 4–8px border-radius vocabulary create breathing room without softness. Users feel empowered, not coddled—this is gear for people who move with purpose.

The brand voice is confident, unpretentious, and grounded in real-world utility. Chrome speaks in short, declarative sentences: "Made for what's ahead. Since 1995." "Back in stock and ready to roll." The tone avoids marketing hyperbole; instead, it celebrates the product's durability and the community of riders who depend on it. Vocabulary leans toward action verbs (sling, roll, move, carry) and material honesty (ballistic nylon, weatherproof, tested). The brand personality is that of a trusted collaborator—someone who understands the friction of urban life and has engineered a solution.

Colors

The color system is built on a high-contrast, utilitarian foundation: **Primary surface (#ffffff)** and **on-surface (#0b0b0b)** create maximum legibility and visual hierarchy. The accent color, **primary (#ffeb00)**, is Chrome's signature yellow—a bold, energetic hue used exclusively for Call-To-Action buttons, key highlights, and moments requiring immediate attention. This yellow is never used for passive elements; it signals "act now." **Secondary (#262626)** is a near-black charcoal that anchors the interface, used for primary buttons, navigation, and heavy typography. **Tertiary (#00caaa)** is a teal accent reserved for status indicators, badges, and secondary highlights—it appears sparingly to avoid visual noise. The surface stack progresses from #ffffff (base) through #f7f7f8 (dim)

Typography

The type system enforces a clear hierarchy through weight and scale rather than color variation. **Archivo Narrow** (700 weight, uppercase) is reserved for headlines and display text, creating a distinctive, commanding presence that reflects the brand's industrial heritage. At sizes 32px–80px with 0em letter-spacing, it reads as bold and direct. **Archivo** (400 weight for body, 700 for emphasis) handles all body copy and UI labels, maintaining legibility at 16px on light backgrounds with 24px line-height. Labels use 14px with 0.05em letter-spacing and uppercase transformation, creating visual separation from body text. The system scales responsively: at mobile (< 700px), headlines compress to 32px; at desktop (≥ 1400px), display text expands to 80px. Apply text-shadow: 0 2px 4px rgba(0, 0

Layout

Chrome Industries uses a **fluid 12-column grid** with a max-width of 1600px, scaling container gutters from 20px (mobile) to 24px (tablet) to 32px (desktop). The layout philosophy prioritizes breathing room: section-outer spacing is 32px on mobile, scaling to 56px on large screens, creating rhythm without claustrophobia. The narrow container (1350px) is used for editorial content and product detail pages, while the full-width container (1600px) accommodates hero imagery and category grids. Spacing tokens follow a Tailwind-inspired scale (4px, 12px, 24px, 40px, 64px), with md (24px) as the default margin between sections. Product grids use 20px column gaps and 32px row gaps, allowing cards to breathe while maintaining visual cohesion. White space is intentional: a hero section might have 8

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than color shifts. **Level 1 (Base)**: flat white surface (#ffffff) with no shadow, establishing the foundation. **Level 2 (Cards, Inputs)**: 1px solid border (#b6b6b6) + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), creating a crisp, defined edge without heaviness. **Level 3 (Modals, Dropdowns)**: box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), providing clear separation from the background. **Level 4 (Hero Overlays, Floating Elements)**: box-shadow: 0 18px 50px rgba(0, 0, 0, 0.1), reserved for the most prominent interactive elements. On hov

Shapes

The shape language is **Geometric Precision**—sharp corners dominate, with minimal rounding reserved for specific contexts. **Buttons and inputs** use 4px border-radius (DEFAULT), creating a subtle softness that prevents the interface from feeling harsh while maintaining industrial character. **Cards and containers** use 5px (md) or 8px (lg) for slightly more breathing room on larger surfaces. **Badges and pills** use 9999px (full) for circular or fully-rounded treatments, creating visual distinction from rectangular UI elements. **Hero sections and full-width blocks** use 0px (no rounding), e

Components

Action Elements Buttons are the primary interaction mechanism and must command attention. **button-primary** uses #ffeb00 (primary) background with #0b0b0b text, 48px height, 12px vertical / 24px horizontal padding, and 4px border-radius. On hover, the background shifts to #e6d700 (primary-fixed-dim) and an inset 2px border appears (inset 0 0 0 2px #0b0b0b), creating a tactile pressed effect over 150ms. **button-secondary** uses #262626 background with white text, identical sizing, and the same hover inset-border treatment. **button-outline** has a transparent background, 2px solid #b6b6b6 border, and #262626 text; on hover, it fills with #262626 background and white text, inverting the visual weight. All buttons use label-md typography (14px, 700 weight, uppercase, 0.05em letter-spaci

Do's and Don'ts

**Do**

• Do use #ffeb00 (primary yellow) exclusively for CTAs and moments requiring immediate action—never for passive elements or backgrounds.
• Do maintain high contrast: #0b0b0b on #ffffff for all body text, ensuring WCAG AAA compliance (contrast ratio 21:1).
• Do use Archivo Narrow uppercase for headlines (32px+) and Archivo regular for body copy (16px–18px) to establish clear visual hierarchy.
• Do apply 4px border-radius to buttons and inputs, 5px to cards, and 9999px to badges—no intermediate values.
• Do use inset shadows (inset 0 0 0 2px) on button hover to create tactile feedback without lifting the element.
• Do scale container gutters responsively: 20px mobile, 24px tablet, 32px desktop—never use fixed gutters across all breakpoints.
• Do reserve tertiary color (#00caaa) for status indicators and secondary highlights; use it sparingly to avoid visual noise.

**Don't**

• Don't use primary yellow (#ffeb00) for backgrounds, body text, or passive UI elements—it's reserved for CTAs and alerts only.
• Don't apply border-radius values outside the defined scale (sm: 0px, DEFAULT: 4px, md: 5px, lg: 8px, xl: 10px, full: 9999px).
• Don't use drop shadows larger than 0 18px 50px rgba(0, 0, 0, 0.1)—excessive shadow depth contradicts the utilitarian aesthetic.
• Don't mix Archivo Narrow and Archivo in the same text block; use Narrow for headlines and Archivo for body, never vice versa.
• Don't reduce contrast below 7:1 for any text on colored backgrounds—Chrome's industrial character demands legibility.
• Don't use rounded corners on hero sections, full-width blocks, or architectural elements—preserve sharp edges for impact.
• Don't apply color transitions longer than 200ms on interactive elements; faster feedback (150ms) feels more responsive and industrial.