# Factronics USA, LLC — Brand Guide

**Version:** 1.0
**Last updated:** June 2026
**Source:** Extracted from factronicsusa.com
**Tagline:** Quality People. Quality Products. Reliable Solutions.

---

## Brand Identity

Factronics USA is a Florida-based supplier of coding, marking, inspection, and packaging equipment for food, beverage, pharma, cosmetics, and industrial manufacturers.

- **Mission:** No production line stops due to lack of support.
- **Tagline:** Quality People. Quality Products. Reliable Solutions.
- **Voice:** Hormozi-style direct response — short sentences, one idea per sentence, practical. No em dashes. No jargon. 5th-grade reading level.
- **Products:** Linx, Anritsu, EBS, MarkinBOX, ITW Dynatec, Kooltrak, AlTech
- **Territory:** Southeast USA (FL, GA, NC, SC, TN, AL)
- **Est.:** 2000 (40+ years collective experience)

---

## Color Palette

| Color | Hex | Usage |
|---|---|---|
| Primary Blue | `#0D70CC` | Main brand color |
| Navy | `#00337A` | Dark accent / text |
| Lime Green | `#C7D759` | Accent / highlight |
| White | `#FFFFFF` | Backgrounds |
| Light Grey | `#F0F5FA` | Surface / panels |
| Border Grey | `#D1D5DB` | Borders |
| Slate 800 | `#1e293b` | Headings / dark bg |
| Amber | `#F59E0B` | Urgency bars |

### CSS Custom Properties

```css
--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;
--radius:         0.625rem;
```

---

## Typography

### Primary — Inter
- **Used for:** body text, labels, meta
- **Weights:** 400, 600, 700
- **Font stack:** `Inter, system-ui, -apple-system, sans-serif`
- **Body size:** 16px, line-height: 1.65

### Display — Poppins
- **Used for:** headings (h1–h5)
- **Weights:** 500, 700, 800
- **Font stack:** `Poppins, system-ui, sans-serif`
- **Letter-spacing:** -0.02em, line-height: 1.15

### Mono — JetBrains Mono
- **Used for:** labels, badges, meta text
- **Applied via:** `.mono-label`
- **Size:** 0.7rem, weight: 600, letter-spacing: 0.14em, uppercase

### Type Scale

| Element | Mobile | Desktop |
|---|---|---|
| h1 | 2.25rem | 3.75rem |
| h2 | 1.875rem | 2.25rem |
| h3 | 1.25rem | 1.5rem |
| Body | 1rem (16px) | — |
| Small | 0.875rem | — |
| Mono label | 0.7rem | — |

---

## Logos

| Asset | File(s) | Usage |
|---|---|---|
| Primary Wordmark — Blue | `factronics-logo-blue.svg`, `factronics-logo-blue.png` | Light backgrounds (white, surface). Min clear space: 20px all sides. |
| Primary Wordmark — White | `factronics-logo-white.svg`, `factronics-logo-white.png` | Dark backgrounds (industrial gradient, navy hero). |
| F-Mark (Isologo) | `isologo.png` | Favicon, app icon, social avatar, small-scale applications. |
| Favicon | `favicon-square.png` | Browser tab icon. White F-mark on navy. |

---

## Gradients

| Name | CSS Value |
|---|---|
| Primary | `linear-gradient(135deg, #0D70CC, #045cb4)` |
| Hero / Industrial | `linear-gradient(140deg, #1e293b 0%, #1a2536 60%, #0a4a7a 100%)` |
| Soft | `linear-gradient(180deg, #FFFFFF, #F0F5FA)` |
| Brand | `linear-gradient(135deg, #00337A 0%, #002255 45%, #0a4a7a 100%)` |

---

## Shadows

| Name | Value |
|---|---|
| Card | `0 1px 2px hsl(215 28% 17% / 0.04), 0 4px 16px hsl(215 28% 17% / 0.06)` |
| Elevated | `0 8px 24px hsl(215 28% 17% / 0.08), 0 2px 8px hsl(215 28% 17% / 0.06)` |
| Blue Glow | `0 12px 32px hsl(211 96% 42% / 0.25)` |

---

## Backgrounds

- **Industrial Gradient** — `.industrial-gradient`: hero sections, final CTA
- **Surface Background** — `bg-surface`: alternating sections

---

## Background Patterns

### Grid Pattern
48px grid overlay, applied at `opacity-10` over industrial-gradient hero sections.

### Dot Pattern
24px dot pattern, less frequently used.

### Fade-In Section Animation
```css
.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. 9 converging arch lines that start off-screen left, arc upward, and descend toward the top-right — like a production line winding through a facility.

Use in page headers, section dividers, or as watermark on dark industrial-themed sections. Can be flipped via `transform: scaleX(-1)`.

---

## Buttons & CTAs

| Style | Classes | Usage |
|---|---|---|
| Primary CTA | `bg-lime text-lime-foreground font-bold uppercase` | Hero sections, value stack cards, inline promotions |
| Outline CTA | `border border-primary/30 text-primary` | Navigation bar secondary action |
| Primary Blue | `bg-primary text-white` | Alternative solid button |

### CTA 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..."
- All CTAs include an arrow icon

---

## Cards

| Type | Border | Background |
|---|---|---|
| Standard | `border-border` hover → `border-accent` | `bg-background` |
| Highlighted | `border-accent` | `bg-accent/10` |
| Alert / Stakes | Red left border (4px `#d94a4a`) | Standard |
| Surface | `border-border` hover → shadow | `bg-surface` |

### Card with Photo Header
`rounded-lg border border-border overflow-hidden bg-surface shadow-card` with `relative h-36` image container and gradient overlay.

---

## Section Labels (Eyebrows)

Every section starts with an eyebrow label: accent line (2rem, 1px, `bg-lime`) + monospace label (`font-mono-label text-muted-foreground`).

On dark backgrounds: label uses `text-lime`, line uses `bg-lime`.

### Inline Badges
`.font-mono-label bg-lime text-lime-foreground px-2 py-0.5 rounded`

Badge colors: Lime (default), Red (`#d94a4a`), Blue (`--primary`).

---

## Forms & Lead Capture

- **Input fields:** `w-full px-4 py-3 rounded-md border bg-background text-foreground focus:ring-2 focus:ring-accent focus:border-accent`
- **Labels:** `.font-mono-label text-muted-foreground block mb-1.5`
- **Error state:** `border-destructive focus:ring-destructive/40`
- **Success state:** Form replaced with centered message showing green check, user's name, confirmation, 1-business-day contact notice

---

## Hero Blocks

Structure:
1. `<section class="relative overflow-hidden border-b border-border industrial-gradient text-white">`
2. Grid overlay at opacity-10
3. Blurred circle (primary/30) top-right
4. Left: eyebrow + h1 + sub + bullets + CTA
5. Right: image (rounded-xl, shadow-blue, gradient overlay) + 3 stats

### Urgency Bar
Amber (#F59E0B) reserved for urgency bars and limited-time alerts. Not for primary CTAs.

---

## Navigation

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

---

## Pharma Theme (Theme Variation)

Dark forest green variant for pharma manufacturing pages.

```css
.theme-pharma {
  --pharma-dark-from: 145 35% 10%;
  --pharma-dark-to:   155 40% 14%;
}
```

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

---

## Utility & Layout Classes

| Category | Classes |
|---|---|
| Containers | `.container-tight` (max-width 1200px), `.container-wide` (max-width 1400px) |
| Section Spacing | `.section` (py-16 md:py-24), `.section-tight` (py-12 md:py-16) |
| Theme | `.industrial-gradient`, `.gradient-primary`, `.gradient-hero`, `.gradient-soft` |
| Animation | `.fade-in-section`, `.animate-fade-up` (0.6s), `.animate-pulse-soft` (2.5s) |
| Typography | `.font-mono-label`, `.eyebrow` |
| Patterns | `.grid-bg` (48px), `.dot-bg` (24px) |

---

## Supplier & Partner Brands

| Brand | Product Type | Logo File |
|---|---|---|
| LINX | Coding & Marking | `supplier-logos/linx.png` |
| Anritsu | Inspection | `supplier-logos/anritsu.png` |
| MarkinBOX | Coding & Marking | `supplier-logos/markinbox.png` |
| Patmark | — | (text only) |
| EBS | Ink-Jet Systems | `supplier-logos/ebs.png` |
| ITW Dynatec | Adhesive Application | `supplier-logos/itw-dynatec.png` |
| Kooltrak | Temperature Monitoring | `supplier-logos/kooltrak.png` |
| AlTech | Coding & Marking | `supplier-logos/altech.png` |
| JMK Robotics | Robotics | (text only) |

---

*Factronics USA, LLC — Brand Guide v1.0*
*Generated from factronicsusa.com source code*
*Last updated: June 2026*