Factronics USA, LLC

Brand Identity

Factronics USA is a Florida-based supplier of coding, marking, inspection, and packaging equipment for food, beverage, pharma, cosmetics, and industrial manufacturers. The brand voice is Hormozi-style direct response — short sentences, one idea per sentence, practical. No em dashes. No jargon.

Color Palette

CSS Variable Reference

:root {
  --primary:        #0D70CC;   /* hsl(211 96% 42%) */
  --primary-hover:  #045cb4;   /* hsl(211 96% 36%) */
  --primary-glow:   #3a8fdf;   /* hsl(211 96% 55%) */
  --navy:           #00337A;
  --lime:           #C7D759;
  --amber:          #F59E0B;
  --background:     #FFFFFF;
  --surface:        #F0F5FA;
  --foreground:     #1e293b;
  --muted:          #94a3b8;
  --border:         #D1D5DB;
  --destructive:    #d94a4a;
  --radius:         0.625rem;
}

Typography

Logos

Primary Wordmark — Blue

Navy blue wordmark on transparent background. Use on light backgrounds (white, surface). Minimum clear space: 20px on all sides.

↓ SVG ↓ PNG

Primary Wordmark — White

White wordmark on transparent background. Use on dark backgrounds (industrial gradient, navy hero).

↓ SVG ↓ PNG

F-Mark (Isologo)

Standalone "F" lettermark for favicon, app icon, social media avatar, or small-scale applications.

↓ PNG

Favicon

Browser tab icon. Square format, white F-mark on navy background.

↓ PNG

Source files: 02_brand_kit/ directory — SVG preferred for web, PNG for legacy

Gradients

/* Gradient variables */
--gradient-primary:  linear-gradient(135deg, hsl(211 96% 42%), hsl(211 96% 30%));
--gradient-hero:     linear-gradient(140deg, hsl(215 28% 17%) 0%, hsl(215 35% 12%) 60%, hsl(211 96% 18%) 100%);
--gradient-soft:     linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(210 40% 97%) 100%);
--gradient-industrial: linear-gradient(135deg, hsl(215 35% 12%) 0%, hsl(215 40% 16%) 45%, hsl(211 96% 22%) 100%);

Use .industrial-gradient for hero sections and the final CTA. Use .gradient-soft for subtle surface transitions. Phyllo theme is deep forest green (see Pharma section).

Shadows

/* Shadow variables */
--shadow-card:     0 1px 2px hsl(215 28% 17% / 0.04), 0 4px 16px hsl(215 28% 17% / 0.06);
--shadow-elevated: 0 8px 24px hsl(215 28% 17% / 0.08), 0 2px 8px hsl(215 28% 17% / 0.06);
--shadow-blue:     0 12px 32px hsl(211 96% 42% / 0.25);

Use .shadow-card on cards, .shadow-elevated on hover states, .shadow-blue on hero images.

Background Styles

Class: .industrial-gradient

Used on alternating sections. Class: bg-surface

Background Patterns

/* Grid pattern — used on hero overlays */
.grid-bg {
  background-image:
    linear-gradient(hsl(var(--border) / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--border) / 0.5) 1px, transparent 1px);
  background-size: 48px 48px;
}
/* Dot pattern */
.dot-bg {
  background-image: radial-gradient(hsl(var(--border)) 1px, transparent 1px);
  background-size: 24px 24px;
}

Grid pattern is applied at opacity-10 over industrial-gradient hero sections. Dot pattern is available but less frequently used.

Fade-In Section Animation

.fade-in-section {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.fade-in-section.is-visible { opacity: 1; transform: translateY(0); }

Line Technology Pattern

A perspective-line motif representing product flow on a production line. Lines converge at a distant vanishing point on the left, arch upward from bottom to top-right, then curve back down — like a production line winding through a facility.

Use this SVG pattern in page headers, section dividers, or as a subtle watermark on dark industrial-themed sections. All 9 lines converge at a common origin off-screen left and arc upward before descending — like looking down a production line that winds through a plant. Can be flipped horizontally (via transform: scaleX(-1)) for a mirror effect.

<!-- Line technology pattern SVG — place over industrial-gradient -->
<div style="position: relative; overflow: hidden; background: linear-gradient(135deg, #1a2536, #0a4a7a);">
  <svg viewBox="0 0 800 180" preserveAspectRatio="xMidYMid meet"
       style="position: absolute; width: 100%; height: 100%;">
    <g fill="none" stroke="white" stroke-linecap="round">
      <path d="M -20 150 C 200 15, 450 5,  820 70"  stroke-width="2"   opacity="0.12" />
      <path d="M -20 152 C 200 30, 450 25, 820 82"  stroke-width="1.4" opacity="0.09" />
      <path d="M -20 154 C 200 45, 450 45, 820 94"  stroke-width="1"   opacity="0.07" />
      <path d="M -20 156 C 200 62, 450 65, 820 106" stroke-width="0.8"  opacity="0.055" />
      <path d="M -20 158 C 200 80, 450 84, 820 118" stroke-width="0.6"  opacity="0.045" />
      <path d="M -20 160 C 200 98, 450 102,820 130" stroke-width="0.5"  opacity="0.035" />
      <path d="M -20 162 C 200 114,450 118,820 142" stroke-width="0.4"  opacity="0.028" />
      <path d="M -20 164 C 200 130,450 134,820 154" stroke-width="0.3"  opacity="0.022" />
      <path d="M -20 166 C 200 146,450 150,820 166" stroke-width="0.25" opacity="0.018" />
    </g>
  </svg>
</div>

Buttons & CTAs

Lime Green CTA (Primary)

<a href="#lead-form" class="inline-flex items-center gap-2 bg-lime text-lime-foreground font-bold uppercase tracking-wide text-sm px-6 py-4 rounded-md hover:brightness-95 transition-all shadow-md">
  Request a Quote <ArrowRight class="h-4 w-4" />
</a>

Used on: hero sections, value stack cards, inline promotions.

Outline Button (Secondary)

<a href="#lead-form" class="inline-flex items-center gap-2 border border-primary/30 text-primary font-semibold uppercase tracking-wide text-xs px-4 py-2.5 rounded-md hover:bg-primary hover:text-primary-foreground transition-all">
  Book Free Audit
</a>

Used in the navigation bar as a secondary action.

CTA Button States

• Default: Lime Green (#C7D759) bg, dark text, uppercase, bold, tracking-wide
• Hover: brightness-95 (slight darken)
• Disabled: opacity-70, cursor-not-allowed
• Submitted form: Loading spinner + "Sending..." text
• All CTAs include an arrow icon (Check icon on checklist links)

Cards

/* Standard card */
<div class="bg-background border border-border rounded-lg p-6 hover:border-accent transition-colors">

/* Surface card (alternate background) */
<div class="bg-surface border border-border rounded-lg p-6 hover:border-accent hover:shadow-md transition-all">

/* Industry card (mega menu) */
<a class="block p-5 rounded-lg border border-border hover:border-accent hover:bg-background transition-colors">

/* Service highlight card */
<div class="rounded-lg border border-accent bg-accent/10 p-6">

Card with Photo Header

<div class="rounded-lg border border-border overflow-hidden bg-surface shadow-card">
  <div class="relative h-36 overflow-hidden">
    <img class="w-full h-full object-cover" />
    <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
  </div>
  <div class="p-5">...</div>
</div>

Section Labels (Eyebrows)

Every section starts with an eyebrow label composed of a short accent line + monospace label.

<div class="flex items-center gap-3 mb-4">
  <span class="h-px w-8 bg-accent" />
  <span class="font-mono-label text-muted-foreground">Industries We Serve</span>
</div>

On dark backgrounds (hero), the label text uses text-lime instead of text-muted-foreground, and the line uses bg-lime.

Inline Badge

<span class="font-mono-label bg-lime text-lime-foreground px-2 py-0.5 rounded">FREE</span>

Forms & Lead Capture

/* Input field */
<input type="text" class="w-full px-4 py-3 rounded-md border bg-background text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-2 focus:ring-accent focus:border-accent transition border-border" />

/* Input label */
<span class="font-mono-label text-muted-foreground block mb-1.5">Name *</span>

/* Error state */
<input class="border-destructive focus:ring-destructive/40 focus:border-destructive" aria-invalid="true" />

Success State

After submission, the form is replaced with a centered success message showing a green check icon, the user's name, a confirmation notice, and a message about being contacted within one business day.

Hero Blocks

<!-- Hero structure -->
<section class="relative overflow-hidden border-b border-border industrial-gradient text-white">
  <div class="absolute inset-0 grid-bg opacity-10" />
  <div class="absolute -top-40 -right-40 h-[500px] w-[500px] rounded-full bg-primary/30 blur-3xl" />
  <div class="container-tight relative py-16 md:py-24 grid lg:grid-cols-[1.2fr_1fr] gap-12 items-center">
    /* Left: eyebrow + h1 + sub + bullets + CTA */
    /* Right: image (rounded-xl, shadow-blue, gradient overlay) + 3 stats */
  </div>
</section>

Urgency Bar (Top of Page)

Amber (#F59E0B) is reserved for urgency bars and limited-time alerts — not for primary CTAs.

Navigation

• Sticky nav: sticky top-0 z-50 bg-surface/95 backdrop-blur border-b border-border
• Mobile: Hamburger menu (3 lines, w-5 h-0.5 bg-primary), full-height panel below header
• Desktop: Mega menu panels (Industries, Products, Services, Company) on mouseEnter
• Nav link style: px-3 py-2 text-sm font-medium rounded-md, active = text-primary, default = text-muted-foreground hover:text-primary
• Mega menu container: absolute left-0 right-0 top-full bg-surface border-b border-border shadow-lg
• Products menu: 5-column grid of groups with font-mono-label text-accent group headers

Pharma Theme (Theme Variation)

A dark forest green variant used on the Pharma Manufacturing page.

.theme-pharma {
  --pharma-dark-from: 145 35% 10%;
  --pharma-dark-to:   155 40% 14%;
  --accent: 70 70% 65%;  /* lime-green accent */
}
.bg-pharma-dark {
  background:
    radial-gradient(ellipse at top left, hsl(145 50% 16% / 0.9), transparent 60%),
    linear-gradient(135deg, hsl(145 35% 10%) 0%, hsl(155 40% 14%) 100%);
}

Wrap the page in <div class="theme-pharma"> to activate. Modifies the accent color from blue to lime green while using deep green gradients for hero/surface backgrounds.

Utility & Layout Classes

Supplier & Partner Brands

Approved partner brands that appear in the Factronics ecosystem:

LINX

↓ PNG

Anritsu

Inspection

↓ PNG

MarkinBOX

↓ PNG

PATMARK

Patmark

EBS

Ink-Jet Systems

↓ PNG

ITW Dynatec

↓ PNG

Kooltrak

↓ PNG

AlTech

↓ PNG

JMK

JMK Robotics

Source: supplier-logos/ directory / factronicsusa.com assets