Enable customer innovation by delivering highly engineered, applications-critical, precision power & control solutions.
This design system combines the strongest parts of the AE Core Brand with the newer website visual language, refined through a full creative review. The Core Brand remains the foundation for restraint, typography, color discipline, photography, and print hierarchy. The website direction is the source of new design elements and additional colors.
All AE materials must feel related, but different asset types must not look like clones. Each shares typography, color, faceted geometry, and dark/white card structure — but differs in density, image scale, grid behavior, content hierarchy, mask placement, and ratio of dark to light surfaces.
Decoration never drives the layout. Priority order: clarity, accuracy, technical credibility, brand restraint, visual hierarchy — and only then, decoration.
Use the current AE website direction as the modernization layer — dark navy structural surfaces, white modular cards, controlled orange accents, sharp alignment, clear UI patterns, and faceted architectural language. Avoid generic corporate wallpaper.
Decoration comes last — and only when it supports the content.
Our Logo is designed to convey our unique brand personality. Treating our Logo with consistency and care maximizes brand awareness and impact.
Version
Always allow clear space around the Advanced Energy logo that is equal to the width of the middle bar in the “E” of the logo. Keeping copy and graphic elements clear of the logo will increase its impact.
Background
Full-color on light background
When using the logo above a photographic background, the logo should stand out as a bright, sharp, uncluttered foreground element against the dark, blurry background elements of the photo. It’s usually best to use the white logo in such cases.
Correct and consistent use of the logo artwork in the brand colors will maximize brand effectiveness. Always use the approved logo artwork without alteration with the approved background colors.
Co-branding may appear on marketing materials for AE business partners. All logo standards and guidelines apply with the following guidelines:
Partner logo
Partner logoMessina Sans is honest, designed for direct and engaging written communication.
Messina Sans is our font family. The unique characteristics of our font communicate the personality of our brand, and should be clearly and consistently used for all of marketing communications.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
For emails, text documents, and presentations that are shared and dependent on computer system fonts, our preferred system font is Arial Regular and Bold.
Messina Sans or Arial can be used for all web page development. A single font should be used consistently throughout a web property.
| Language | On screen | |
|---|---|---|
| Chinese (Simplified) | Yahei | Yahei UI |
| Chinese (Traditional) | JhengHei | JhengHei UI |
| Korean | Malgun Gothic | Malgun Gothic |
| Japanese | Meiryo | Meiryo UI |
| Thai | Leelawadee | Leelawadee |
| Hindi | Nirmala UI | Nirmala UI |
Use these non-Roman, regional fonts when localizing marketing materials. If subsidiaries have identified alternate third-party fonts they feel align better with Messina Sans, please contact AE corporate marketing team for approval.
Every mask is the same rounded rhombus with 30° faces. Scale it up, turn it upright or on its side, bring it in from an edge, fill it — and the page is recognisably Advanced Energy.
Motion in the AE system reveals structure — it never performs. Select a direction below to trigger a wipe.
Our corporate color palette helps establish our visual identity. It consists of Advanced Energy Orange, two optional shades of orange for greater depth, and a range of grays. Grays can be used to ground other colors. Orange should be used in a restricted way to impart an official quality to corporate communications.
Screen-only colors. They have no official print values. Press-test before any print use.
#021427Dark sections, hero, nav, footer
#062756Secondary dark bands
#CC4000Orange text smaller than 18px on white (4.88:1 contrast)
#F5F5F5Alternate light bands and cards
#333333Body text on screen
#FFFFFFA limited, carefully chosen subset of colors from our Creative palette should be used within event graphics, brochures, presentations, and marketing campaigns for increased spark.
Limit yellows to less than 1/3rd of page or canvas.
Certain two-tone combinations (and most multi-color combos) can alter AE's personality. When combining two colors on the same page or layout, pick from one of these pre-approved table palette to limit your "combo palette."
This shape represents Color #1 (the color with the largest layout coverage).
This group represents Color #2 (if any). It also demonstrates AE's flexible 3-shade system, which can be applied to either — but typically not both — of the colors in a two-tone layout.
Four styles, one family. Hover a photo to bring it forward, or pick a style.
Icons are used to help define and punctuate copy. They are ancillary design elements that should be used sparingly and purposefully. Icons can be used to indicate a call-to-action. When creating icons, the style should be simple line drawings with no gradient and single-color as reflected in the provided examples.
Product brochures in the chapter colours, a booth back wall and a partner roll-up. One facet, one photography style, one type family: every piece is recognisably Advanced Energy.
1 m
All spacing values derive from an 8px (digital) / 3mm (print) base. Layouts stack four surface types: dark navy structure, white or light gray cards, faceted image masks, and technical line overlays.
| Asset Type | Trim | Bleed | Margin | Columns |
|---|---|---|---|---|
| Brochure (inner) | A4 · 8.5×11 | 3mm | 12mm | 3 cols · 6mm |
| White Paper | A4 · 8.5×11 | 3mm | 20mm | 2 cols · 8mm |
| Application Guide | A4 landscape | 3mm | 10mm | 4 cols · 6mm |
| Flyer | A4 · 8.5×11 | 3mm | 10mm | 2 cols · 6mm |
| Product Guide | A3 · 11×17 | 3mm | 8mm | 5–6 cols · 4mm |
| Presentation slide | 1920×1080 (16:9) | — | 48px | 4 cols · 24px |
Follows the AE website language. Box shadow 0 2px 8px rgba(0,0,0,0.08).
Architectural geometry, no visible radius. No CSS shadow on press.
:root {
/* Corporate palette */
--color-brand-orange: #FE5000;
--color-brand-orange-dark: #DA5037;
--color-brand-orange-light: #FF7540;
--color-gray-dark: #53575A;
--color-gray-medium: #768591;
--color-gray-light: #A1ABB2;
--color-border: #DDDDDD;
--color-gray-pale: #EEEEEE;
/* Creative palette — flagships */
--color-red: #D53318;
--color-teal: #007F91;
--color-purple: #973F71;
--color-blue: #2D6AA8;
--color-green: #7AB837;
--color-yellow: #DFCA1A;
/* Web only */
--bg-navy: #021427;
--bg-navy-800: #062756;
--color-orange-text: #CC4000;
--color-blue-100: #C0DDF7;
--color-blue-50: #D7EAF9;
/* Screen only */
--bg-surface-muted: #F5F5F5;
--text-primary: #333333;
/* Typography */
--font-primary: 'Messina Sans', Arial, Helvetica, sans-serif;
/* Spacing — 8px base */
--space-xs: 8px; --space-sm: 16px;
--space-md: 24px; --space-lg: 32px;
--space-xl: 48px; --space-2xl: 64px;
/* Radius — web only */
--radius-sm: 6px; --radius-md: 12px;
--radius-lg: 24px; --radius-pill: 9999px;
}Accent (orange) — use rarely; white on orange only passes as large text.
| White on #021427 Deep Navy | 18.55:1 | AAA |
| White on #062756 Navy 800 | 14.66:1 | AAA |
| White on #2D6AA8 Blue | 5.62:1 | AA |
| #FE5000 on #021427 | 5.62:1 | AA |
| White on #FE5000 Orange | 3.30:1 | Large text only (18.66px bold / 24px regular and up) |
| #CC4000 on White | 4.88:1 | AA (use for small orange text) |
| #333333 on White | 12.63:1 | AAA |
| #53575A on White | 7.29:1 | AAA |