DESIGN.md · Analysis

Johnson Electric

johnsonelectric.com · 9 Sept 2026 · 47 colors · Roboto

Johnson Electric

Global leader in electric motors, actuators, motion subsystems and electro-mechanical components. A brand rooted in industrial precision and sustainability innovation.

Colors

surface#ffffff

surface-dim#f6f6f4

surface-bright#ffffff

surface-container-lowest#f9f9f7

surface-container-low#f0f0ed

surface-container#e8e8e5

surface-container-high#d8d8d8

surface-container-highest#c1c1c1

on-surface#333333

on-surface-variant#696969

inverse-surface#1a1a1a

inverse-on-surface#f0f0ed

outline#999999

outline-variant#d7d7d7

surface-tint#f58220

primary#f58220

on-primary#ffffff

primary-container#ffdddd

on-primary-container#514943

inverse-primary#f58220

secondary#68b631

on-secondary#ffffff

secondary-container#e8f5e0

on-secondary-container#2d5a1a

tertiary#565656

on-tertiary#ffffff

tertiary-container#e0e0e0

on-tertiary-container#1a1a1a

error#d32f2f

on-error#ffffff

error-container#ffcdd2

on-error-container#b71c1c

primary-fixed#ffdddd

primary-fixed-dim#f58220

on-primary-fixed#514943

on-primary-fixed-variant#8b6b5f

secondary-fixed#e8f5e0

secondary-fixed-dim#68b631

on-secondary-fixed#2d5a1a

on-secondary-fixed-variant#4a8a2a

tertiary-fixed#e0e0e0

tertiary-fixed-dim#999999

on-tertiary-fixed#1a1a1a

on-tertiary-fixed-variant#4a4a4a

background#ffffff

on-background#333333

surface-variant#d7d7d7

Typography

display: fontFamily: Roboto · fontSize: 60px · fontWeight: 700 · lineHeight: 68px · letterSpacing: -0.04em
headline-lg: fontFamily: Roboto · fontSize: 48px · fontWeight: 500 · lineHeight: 56px · letterSpacing: -0.02em
headline-md: fontFamily: Roboto · fontSize: 32px · fontWeight: 500 · lineHeight: 40px · letterSpacing: -0.01em
title-lg: fontFamily: Roboto · fontSize: 24px · fontWeight: 500 · lineHeight: 32px
body-lg: fontFamily: Roboto · fontSize: 18px · fontWeight: 400 · lineHeight: 28px
body-md: fontFamily: Roboto · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
label-md: fontFamily: Roboto · fontSize: 14px · fontWeight: 500 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: Roboto · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.02em

Design guidance

Overview

Johnson Electric is a global industrial powerhouse specializing in precision electro-mechanical systems and motion control. The brand embodies 'Industrial Pragmatism'—a design philosophy that marries technical rigor with accessible clarity. The visual identity prioritizes legibility and trust through a restrained palette anchored by a vibrant burnt-orange accent (#f58220), paired with a complementary green (#68b631) for sustainability messaging. The UI evokes confidence and forward momentum: clean, hierarchical layouts with generous whitespace (24px gutters, 40px section spacing) that reflect the brand's commitment to clarity in complex engineering. Voice: authoritative yet approachable, data-driven without jargon. Example: 'Our motion systems power 3 billion devices worldwide—engineered for reliability, designed for the future.'

Colors

The color system balances industrial neutrality with strategic accent deployment. Primary (#f58220, burnt-orange) is reserved exclusively for call-to-action buttons, key links, and interactive focus states—it commands attention without overwhelming. Secondary (#68b631, sage-green) reinforces sustainability narratives and appears in badges, progress indicators, and success states. The surface stack (white #ffffff down to light gray #c1c1c1) provides visual separation without harsh contrast; on-surface text (#333333) maintains 7:1 WCAG AA contrast on all backgrounds. Tertiary (#565656, charcoal) anchors secondary headings and metadata. Error (#d32f2f) is reserved for validation and warnings. Gradients are avoided; instead, layered surfaces (surface-container-high at #d8d8d8, surface-containe

Typography

Roboto (400, 500, 700 weights) is the sole typeface, ensuring consistency across web and technical documentation. The hierarchy spans from display (60px, 700 weight, -0.04em tracking) for hero statements down to label-sm (12px, 500 weight, 0.02em tracking) for metadata. Headlines (48px, 500 weight) use -0.02em letter-spacing to tighten the visual rhythm; body text (16px, 400 weight, 24px line-height) maintains 1.5 line-height for readability in dense product documentation. All text over colored backgrounds receives a 0 2px 4px rgba(0,0,0,0.15) text-shadow when contrast falls below 5:1. Weights are intentional: 500 for interactive labels and section headers, 700 only for display-scale statements to avoid visual noise.

Layout

The layout operates on a 12-column grid with a 1280px max-width container, centered with 24px horizontal gutters on desktop. Sections are separated by 40px vertical spacing (lg token) to create breathing room; subsections use 24px (md token). The hero spans full-width with a semi-transparent overlay (rgba(0,0,0,0.3)) over background imagery, ensuring text legibility. Cards are arranged in 2–4 column grids depending on viewport, each with 12px internal padding (sm token) and 1px borders at #d7d7d7. Forms use 24px spacing between fields; labels sit 8px above inputs. The 'Contact Us' and 'Join Newsletter' CTAs are positioned in fixed or sticky headers with 12px padding, ensuring they remain accessible during scroll. Mobile breakpoints compress to single-column layouts with 12px gutters.

Elevation & Depth

Depth is conveyed through a three-tier shadow system and surface layering, avoiding dark overlays. Level 1 (Base): flat surfaces at #ffffff with no shadow. Level 2 (Cards/Panels): 0 3px 8px rgba(0,0,0,0.15) shadow, 1px border at #d7d7d7, background #ffffff. Level 3 (Modals/Popovers): 0 8px 24px rgba(0,0,0,0.12) shadow, 2px border at #f58220 (primary accent), background #ffffff. On hover, cards transition to Level 3 shadow over 200ms ease-out. The cookie consent modal uses a 0 0 18px rgba(0,0,0,0.2) shadow with a semi-transparent dark backdrop (rgba(0,0,0,0.5)). No blur filters or glassmorphism

Shapes

The shape language is 'Soft-Technical'—rounded corners are minimal and purposeful, never organic. Buttons use 1rem (16px) border-radius for a slightly softened edge that feels approachable without sacrificing formality. Cards and input fields use 0.5rem (8px) radius, balancing precision with usability. The primary CTA buttons use 1rem radius with a 2px border on secondary variants. Modals and popovers use 0.75rem (12px) radius. The accessibility toggle (orange circle in bottom-left) uses 50% radius (full circle). This restrained approach reflects the brand's engineering heritage: every curve s

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (#f58220, 48px height, 12px 24px padding, 1rem radius) use {typography.label-md} and white text. On hover, the background shifts to #e67e1a with a 0 6px 16px rgba(245,130,32,0.25) shadow and a 200ms ease-out transition. Secondary buttons are transparent with a 2px primary-colored border; on hover, they fill with #ffdddd (primary-container). Tertiary buttons are text-only, inheriting on-surface color; on hover, they gain a #d8d8d8 background. All buttons include a 4px focus ring at rgba(245,130,32,0.3) when keyboard-focused.

Containers & Surfaces Cards are the primary content container: #ffffff background, 1px #d7d7d7 border, 24px padding, 0 3px 8px rgba(0,0,0,0.15) shadow. On hover, the shadow elevates

Do's and Don'ts

**Do**

Do use the primary orange (#f58220) exclusively on CTAs, focus states, and key interactive elements—never on backgrounds or body text.
Do maintain 24px gutters on desktop and 12px on mobile; never compress whitespace below the md spacing token.
Do apply 0 3px 8px rgba(0,0,0,0.15) shadows to cards and 0 8px 24px rgba(0,0,0,0.12) to elevated modals; never use blur or glassmorphism.
Do use Roboto 500 for labels and section headers, 700 only for display-scale headlines; never mix weights arbitrarily.
Do ensure all text over colored backgrounds meets 5:1 WCAG AA contrast; apply 0 2px 4px rgba(0,0,0,0.15) text-shadow when needed.

**Don't**

Don't use the primary orange on backgrounds, body text, or non-interactive elements—it must remain a signal for action.
Don't introduce new colors outside the defined palette; the system is intentionally restrained to maintain industrial credibility.
Don't apply rounded corners larger than 1rem on buttons or 0.75rem on modals; excessive softness undermines the technical brand.
Don't use drop shadows larger than 0 8px 24px; deep shadows create visual clutter and reduce clarity.
Don't mix typefaces; Roboto is the sole font family across all contexts, including technical documentation and marketing copy.

---
version: alpha
name: Johnson Electric
description: >-
  Global leader in electric motors, actuators, motion subsystems and electro-mechanical components. A brand rooted in
  industrial precision and sustainability innovation.
logo:
  src: https://johnsonelectric.com/static/media/logo.0661c1b0.svg
colors:
  surface: '#ffffff'
  surface-dim: '#f6f6f4'
  surface-bright: '#ffffff'
  surface-container-lowest: '#f9f9f7'
  surface-container-low: '#f0f0ed'
  surface-container: '#e8e8e5'
  surface-container-high: '#d8d8d8'
  surface-container-highest: '#c1c1c1'
  on-surface: '#333333'
  on-surface-variant: '#696969'
  inverse-surface: '#1a1a1a'
  inverse-on-surface: '#f0f0ed'
  outline: '#999999'
  outline-variant: '#d7d7d7'
  surface-tint: '#f58220'
  primary: '#f58220'
  on-primary: '#ffffff'
  primary-container: '#ffdddd'
  on-primary-container: '#514943'
  inverse-primary: '#f58220'
  secondary: '#68b631'
  on-secondary: '#ffffff'
  secondary-container: '#e8f5e0'
  on-secondary-container: '#2d5a1a'
  tertiary: '#565656'
  on-tertiary: '#ffffff'
  tertiary-container: '#e0e0e0'
  on-tertiary-container: '#1a1a1a'
  error: '#d32f2f'
  on-error: '#ffffff'
  error-container: '#ffcdd2'
  on-error-container: '#b71c1c'
  primary-fixed: '#ffdddd'
  primary-fixed-dim: '#f58220'
  on-primary-fixed: '#514943'
  on-primary-fixed-variant: '#8b6b5f'
  secondary-fixed: '#e8f5e0'
  secondary-fixed-dim: '#68b631'
  on-secondary-fixed: '#2d5a1a'
  on-secondary-fixed-variant: '#4a8a2a'
  tertiary-fixed: '#e0e0e0'
  tertiary-fixed-dim: '#999999'
  on-tertiary-fixed: '#1a1a1a'
  on-tertiary-fixed-variant: '#4a4a4a'
  background: '#ffffff'
  on-background: '#333333'
  surface-variant: '#d7d7d7'
typography:
  display:
    fontFamily: Roboto
    fontSize: 60px
    fontWeight: '700'
    lineHeight: 68px
    letterSpacing: '-0.04em'
  headline-lg:
    fontFamily: Roboto
    fontSize: 48px
    fontWeight: '500'
    lineHeight: 56px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: Roboto
    fontSize: 32px
    fontWeight: '500'
    lineHeight: 40px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: Roboto
    fontSize: 24px
    fontWeight: '500'
    lineHeight: 32px
  body-lg:
    fontFamily: Roboto
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
  body-md:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  label-md:
    fontFamily: Roboto
    fontSize: 14px
    fontWeight: '500'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Roboto
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.02em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1280px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.06)
  md: 0 3px 8px rgba(0, 0, 0, 0.15)
  lg: 0 8px 24px rgba(0, 0, 0, 0.12)
layout:
  containerMaxWidth: 1280px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 48px
    boxShadow: 0 3px 8px rgba(0, 0, 0, 0.15)
  button-primary-hover:
    backgroundColor: '#e67e1a'
    textColor: '{colors.on-primary}'
    boxShadow: 0 6px 16px rgba(245, 130, 32, 0.25)
  button-primary-active:
    backgroundColor: '#d46f0f'
    textColor: '{colors.on-primary}'
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 48px
    border: 2px solid {colors.primary}
  button-secondary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    border: 2px solid {colors.primary}
  button-tertiary:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 48px
  button-tertiary-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
  card:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.md}'
    boxShadow: '{elevation.md}'
    border: 1px solid {colors.outline-variant}
  card-hover:
    backgroundColor: '{colors.surface-container-low}'
    boxShadow: '{elevation.lg}'
  input-field:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 10px 12px
    border: 1px solid {colors.outline-variant}
    height: 40px
  input-field-focus:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(245, 130, 32, 0.1)
  badge-primary:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
  badge-secondary:
    backgroundColor: '{colors.secondary-container}'
    textColor: '{colors.on-secondary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    textColor: '{colors.on-surface}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons are the primary interaction mechanism. Primary buttons (#f58220, 48px height, 12px 24px padding, 1rem radius) use {typography.label-md} and white text. On hover, the background shifts to #e67e1a with a 0 6px 16px rgba(245,130,32,0.25) shadow and a 200ms ease-out transition. Secondary buttons are transparent with a 2px primary-colored border; on hover, they fill with #ffdddd (primary-container). Tertiary buttons are text-only, inheriting on-surface color; on hover, they gain a #d8d8d8 background. All buttons include a 4px focus ring at rgba(245,130,32,0.3) when keyboard-focused.

### Containers & Surfaces
Cards are the primary content container: #ffffff background, 1px #d7d7d7 border, 24px padding, 0 3px 8px rgba(0,0,0,0.15) shadow. On hover, the shadow elevates

## Do's and Don'ts

**Do**
- Do use the primary orange (#f58220) exclusively on CTAs, focus states, and key interactive elements—never on backgrounds or body text.
- Do maintain 24px gutters on desktop and 12px on mobile; never compress whitespace below the md spacing token.
- Do apply 0 3px 8px rgba(0,0,0,0.15) shadows to cards and 0 8px 24px rgba(0,0,0,0.12) to elevated modals; never use blur or glassmorphism.
- Do use Roboto 500 for labels and section headers, 700 only for display-scale headlines; never mix weights arbitrarily.
- Do ensure all text over colored backgrounds meets 5:1 WCAG AA contrast; apply 0 2px 4px rgba(0,0,0,0.15) text-shadow when needed.

**Don't**
- Don't use the primary orange on backgrounds, body text, or non-interactive elements—it must remain a signal for action.
- Don't introduce new colors outside the defined palette; the system is intentionally restrained to maintain industrial credibility.
- Don't apply rounded corners larger than 1rem on buttons or 0.75rem on modals; excessive softness undermines the technical brand.
- Don't use drop shadows larger than 0 8px 24px; deep shadows create visual clutter and reduce clarity.
- Don't mix typefaces; Roboto is the sole font family across all contexts, including technical documentation and marketing copy.

Edit, then copy or download.