Universal Plastic

Overview

Universal Plastic is a B2B wholesale plastic bag and packaging supplier serving industrial and commercial buyers. The brand embodies **Industrial Pragmatism**—a design aesthetic that prioritizes clarity, efficiency, and direct communication over decoration. The UI evokes a no-nonsense manufacturing environment: clean white backgrounds, bold orange CTAs, and a deep navy blue wordmark that signals trust and industrial authority. The emotional response is one of confidence and reliability: users should feel they are dealing with a serious, established manufacturer, not a consumer-facing retailer. The brand personality is direct, factual, and action-oriented. Vocabulary favors concrete terms: "bulk orders," "wholesale discount," "custom bags," "quote." Tone is professional but approachable—never flowery, never vague. Example sentence: "Get 5% to 60% off on bulk orders. Request a quote in under 60 seconds."

Colors

The color system is built on high contrast and functional clarity. **Primary (rgb(255, 114, 0) / #ff7200)** is the brand's signature accent—a warm, energetic orange deployed on all primary CTAs ("Explore Custom Plastic Bags," "Quote" button), links, and interactive highlights. This color commands attention and signals action in a sea of neutral backgrounds. **On-Primary (rgb(255, 255, 255) / #ffffff)** ensures text on orange buttons remains legible at 18px+ sizes. **Secondary (rgb(16, 132, 116) / #108474)** is a teal accent used for review badges, status indicators, and secondary interactive elements—it provides a cooler counterpoint to the warm primary. **On-Surface (rgb(25, 52, 85) / #193455)** is the deep navy blue used for body text, headings, and primary UI text; it conveys profession

Typography

The type system uses a single typeface—**Poppins**—across all scales, creating visual cohesion and reducing cognitive load. Poppins is a geometric sans-serif with friendly proportions and excellent legibility at small sizes, making it ideal for B2B interfaces where users scan quickly for information. **Display (56px, weight 700, line-height 64px)** is reserved for hero headlines and major section breaks; **Headline-LG (40px, weight 600, line-height 48px)** anchors page sections; **Headline-MD (30px, weight 600)** is used for subsection titles and card headers; **Title-LG (22px, weight 600)** marks feature blocks and product category headers. **Body-LG (18px, weight 400, line-height 28px)** is used for introductory copy and hero subheadings; **Body-MD (16px, weight 400)** is the default bod

Layout

The layout follows a **12-column fluid grid** with a max-width of 1300px (--page-width: 146rem in CSS). Horizontal and vertical grid spacing is uniform at 20px (--grid-desktop-horizontal-spacing: 20px). The page rhythm uses a **semantic spacing scale**: section separation uses lg spacing (40px), card-to-card padding uses md spacing (24px), and internal component padding uses sm spacing (12px). The hero section spans full width with a bright blue background (rgb(100, 180, 255) approximate) and left-aligned text overlay; the CTA button sits at the bottom-left of the hero, creating a clear visual entry point. Below the hero, a white background section with centered headline ("Universal Plastic: A Leading U.S. Manufacturer...") introduces the brand value proposition. Product cards and category

Elevation & Depth

Depth is conveyed through **subtle layering and minimal shadows**, reflecting the industrial aesthetic. The design avoids heavy drop shadows; instead, it uses a three-level shadow system. **Level 1 (Base)**: no shadow; flat white surface at rgb(255, 255, 255). **Level 2 (Cards & Inputs)**: box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), a barely perceptible lift that separates cards from the background. **Level 3 (Modals & Elevated Surfaces)**: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), used for modals, dropdowns, and hover states on interactive cards. On hover, cards transition from Level 2 to Lev

Shapes

The shape philosophy is **Minimal Geometric Precision**—sharp, functional corners with minimal rounding. **Buttons use 4px border-radius** (--buttons-radius: 4px), providing just enough softness to feel contemporary without sacrificing industrial clarity. **Cards and containers use 3px border-radius** (--border-radius-base: 3px), maintaining a crisp, technical appearance. **Input fields use 0px border-radius** (--inputs-radius: 0px), emphasizing their functional, form-like nature. **Badges and pills use 50% border-radius** (--color-swatches-radius: 50%), creating perfect circles for status ind

Components

Action Elements Buttons are the primary interaction mechanism. **Button-Primary** uses rgb(255, 114, 0) background with white text, 15px font-weight 600, 10px vertical / 32px horizontal padding, and 4px border-radius. On hover, the background shifts to #e66a00 (darkened by ~15%) with a 150ms transition. On active/pressed, background becomes #cc5c00. The button height is 44px, accommodating touch targets on mobile. **Button-Secondary** is transparent with a 2px solid border in primary orange, same text color, and same padding; on hover, it fills with primary-container (rgb(255, 228, 204)) background. Both button variants use Poppins 600 weight for visual weight and scannability.

Containers & Surfaces **Card** component uses white background (rgb(255, 255, 255)), 1px solid border at

Do's and Don'ts

**Do**

• Do use primary orange (#ff7200) exclusively for CTAs and high-priority actions—it is the visual anchor that guides users toward conversion.
• Do maintain 20px gutters and 40px section spacing consistently; whitespace is a design tool that reduces cognitive load in data-heavy interfaces.
• Do apply the 2px input border and 0px border-radius to all form fields; this sharp, technical appearance reinforces the industrial brand identity.
• Do use Poppins weight 600 for all button and label text; the heavier weight ensures scannability in busy product listings.
• Do test all CTAs and interactive elements at 44px minimum height to ensure touch-friendly targets on mobile devices.

**Don't**

• Don't use gradients, blur effects, or glassmorphism; the brand aesthetic is flat, direct, and industrial—no decorative effects.
• Don't apply shadows heavier than 0 4px 12px rgba(0, 0, 0, 0.1); excessive depth contradicts the minimalist, functional philosophy.
• Don't round corners on input fields or form containers; 0px border-radius reinforces the technical, manufacturing-focused identity.
• Don't use secondary or tertiary colors for primary CTAs; orange is reserved for high-priority actions—using it elsewhere dilutes its impact.
• Don't exceed 1300px container width; the fixed max-width ensures readability and prevents content from sprawling across ultra-wide displays.