Specifications

Language and tone

Language is used in all applications. This includes:

  • Message texts
  • Labels on buttons and other controls
  • Help texts
  • Product information

Consider your users. What tasks will they perform with the application? What knowledge, training, and objectives will these users have with regard to using the app? What information do they need?

Give clear information and instructions as to what users need to do. Only use technical terms that your users will be familiar with. Avoid using software development terms.

Observe the rules regarding corporate language.

Internationalization

If applications need to be localized, certain things need to be taken into account with regard to texts and symbols. At the start of the project, answer the following questions:

  1. Which languages are supported?
  2. How will you handle different number formats, addresses, currencies, and so on? Will these be localized for specific countries and, if so, to what extent?

 

Text and labels

Note that text will have different space requirements. Text going out of English will generally be longer. You can expect to need 200% of the space for individual words on buttons, for example, when going out of English. In the case of text that consists of several words, 130% of the space used for English text should be sufficient. If you know exactly which languages you need for your application, the space requirements may be lower. This is assuming that data is available regarding the tracking for these languages.

Asian languages in particular require more height to ensure that they are legible. If you are using standard font sizes there is nothing more you need to do. If you require other font sizes, ask native speakers to confirm that the text is legible on the appropriate end devices.

Do not integrate user interface elements, e.g., text input fields, into whole sentences. Different languages use different sentence structures. Depending on the language, the input field will appear in a different position in the sentence so it will not always appear in the same place.

Only sort alphabetically if this can be done for each language used.

Use whole sentences. Do not fill the space with text made up of individual components.

 

Icons and symbols

Avoid using text or letters on icons. Symbols must meet international requirements. Ideally they should be tested for international use. This is important as symbols do not have the same meaning for all nationalities. They may be offensive in some cultures, even if they are suitable for the American-European market.

Colors

Hex color codeSymbolic nameExamples of use
#FFFFFFColorBrightStandard background color, font color on dark background
#F6F6F6ColorBrightBackgroundBackground for dialog box
#ECEDEDColorLightBackgroundGenerally bright background color for controls in the Normal/Enabled state
#CFCFCFColorDarkGreyUsed for passive selection
#CCD0D2ColorDisabledStandard frame color for Disabled state, also as frame or separation line color in exceptional cases
#58585AColorDarkBackgroundDark background, e.g. for Tabs or PropertyWindows
#3e3d40ColorDefaultStandard text color; standard background for inverse areas
#333333ColorHoverDarkHover for Tabs
#2C2B2DColorActiveDarkActive state for TabMenu
#181819ColorHoverDarkBackgroundTabMenu background
#000000ColorDarkFor backgrounds; effects (outward glow)
#0098A1ColorBlueGreenFocus
#7FCCD0ColorActiveBackgroundStandard background color for the Active state
#77B9BFColorBorderHighlightStandard frame color for the Active/Hover states
#D4EEEFColorHoverBackgroundStandard background color for the Hover state
#96D20DColorLightGreen 
FontProperty
FontDefault
  • Font: Arial
  • Font size: 0.55 rem
  • Style: normal
  • Color: ColorDefault
  • Horizontal alignment: left
  • Vertical alignment: -
  • Line height (text across several lines): 0.8 rem

FontHeadline

Based on FontDefault with the following differences:

  • Style: bold
  • Line height (text across several lines): 1.8 rem
FontDisabled

Based on FontDefault with the following differences:

  • Color: ColorDisabled
FontSelected

Based on FontDefault with the following differences:

  • Color: #256167
  • The color shade is produced by superimposing a colored transparent surface on the font.
    • Font color: ColorDefault
    • Marking: Color: ColorBlueGreen; opacity: 40%
FontSelectedNotActive

Based on FontDefault with the following differences:

  • Color: #6F6F70

Icons

The forms of the icons are reduced to the essentials. Appealingly simple, focusing on the message conveyed by the image. The icons are always organized so that the "main metaphor" is displayed in gray and the actions are displayed in green.

The most important icons common to all applications are displayed here.

Description Language Updated
Software style guide – overview of all icons [PDF, 0.26 MB] German 03.04.2017

Splash screen

Sample splash screen  

Sample splash screen

The splash screen appears while the software is starting up. The image is based on the visual used to identify the respective software, a 3D rendering of an application world. Each piece of software receives its own visualization.

Size: 640 x 480 pixels

About dialog

About dialog sample  

About dialog sample

The image for the About dialog is generated from the software visual.

Size: 377 x 377 pixels

Desktop icon

Desktop icon  

Desktop icon

The desktop icon is a simplified version of the respective software visual and is depicted in turquoise, Phoenix Contact's corporate color.

The icon is generated in a variety of formats.

The miniaturization of the icon reduces the degree of detail in the image.

Software box and electronic media label

The boxes for software products and the data storage media included (DVDs or CDs) also receive the visuals for the respective software communication.

PHOENIX CONTACT
GmbH & Co. KG

Flachsmarktstraße 8
32825 Blomberg, Germany
+49 5235 3-00

This website uses cookies, by continuing to browse, you agree to our cookie policy. Read our privacy policy for more information.

Close