fremantle master layout guide v1 1 en

8/8/2019 Fremantle Master Layout Guide v1 1 En

1/67

F O R U M N O K I A

Fremantle Master Layout Guide

Version 1.1; Octobe 4, 2009r 1

Maemo


2/67

Forum.Nokia.com

Copyright 2009 Nokia Corporation. All rights reserved.

Nokia and Forum Nokia are trademarks or registered trademarks of Nokia Corporation. Java and all Java-based

marks are trademarks or registered trademarks of Sun Microsystems, Inc. Other product and company names

mentioned herein may be trademarks or trade names of their respective owners.

Disclaimer

The information in this document is provided as is, with no warranties whatsoever, including any warranty of

merchantability, fitness for any particular purpose, or any warranty otherwise arising out of any proposal,

specification, or sample. This document is provided for informational purposes only.

Nokia Corporation disclaims all liability, including liability for infringement of any proprietary rights, relating to

implementation of information presented in this document. Nokia Corporation does not warrant or represent

that such use will not infringe such rights.

Nokia Corporation retains the right to make changes to this document at any time, without notice.

Licence

A licence is hereby granted to download and print a copy of this document for personal use only. No other licence

to any other intellectual property rights is granted herein.

Fremantle Master Layout Guide 2


3/67


4/67

Forum.Nokia.com

11 Separating content..................................................................................................................................3011.1 Horizontal rulers....................................................................................................................................3011.2 Group titles..............................................................................................................................................3011.3 Empty space ............................................................................................................................................31

12 Toolbar area..............................................................................................................................................3213 Custom background................................................................................................................................3414 Dialogue ...................................................................................................................................................35

14.1 Dialogue height and width................................................................................................................3514.2 Dialogue contents.................................................................................................................................3514.3 Dialogue buttons...................................................................................................................................3514.4 Dialogue measurements.....................................................................................................................36

14.4.1 Dialogues with buttons in a non-pannable area .....................................................3614.4.2 Dialogues with buttons in a pannable area...............................................................3714.4.3 Dialogue without buttons in a non-pannable area.................................................3814.4.4 Dialogue without buttons in a pannable area..........................................................3914.4.5 Text alignment in dialogues ...........................................................................................4014.4.6 Dialogues that combine textual content with other elements...........................4214.4.7 Full-width button dialogues............................................................................................4414.4.8 Dialogues with title-value pairs.....................................................................................4514.4.9 Progress note dialogues...................................................................................................46

15 Grid view ...................................................................................................................................................4816 Notifications..............................................................................................................................................49

16.1 Incoming event......................................................................................................................................4916.2 Information banner..............................................................................................................................4916.3 Information note...................................................................................................................................4916.4 Confirmation note.................................................................................................................................51

17 Progress indicators and progress controllers ..................................................................................5217.1 Progress indicator.................................................................................................................................52

17.1.1 Progress indicator in the view title area.....................................................................5217.1.2 Progress indicator in the dialogue title.......................................................................52

17.2 Progress bar ............................................................................................................................................5317.2.1 Normal progress bar ..........................................................................................................5317.2.2 Small progress bar..............................................................................................................54

17.3 Seek bar ....................................................................................................................................................5418 Text editors ...............................................................................................................................................55

18.1 Text entry.................................................................................................................................................5518.2 Text area...................................................................................................................................................55

19 Context-sensitive menu.........................................................................................................................57Fremantle Master Layout Guide 4


5/67

Forum.Nokia.com

20 Indicator for pannable area..................................................................................................................5821 Avatar graphics ........................................................................................................................................5922 Portrait mode ...........................................................................................................................................6023 Legacy widgets.........................................................................................................................................62

23.1 Menu..........................................................................................................................................................62 24 Icons ...................................................................................................................................................6325 Logical colours..........................................................................................................................................64

25.1 General guidance...................................................................................................................................6425.1.1 Normal palette.....................................................................................................................6425.1.2 Reversed palette..................................................................................................................6525.1.3 Media colours .......................................................................................................................6525.1.4 Other colours........................................................................................................................6625.1.5 Accent colours......................................................................................................................6625.1.6 AttentionColor......................................................................................................................66 25.1.7 Notification colours............................................................................................................66



6/67

Forum.Nokia.com

Change history

September 19, 2009 Version 1.0 Initial document release

October 14, 2009 Version 1.1 Minor updates throughout the document: Redefined group titles,

updated progress indicator images, added the view menu

indicator graphic, changed portrait mode dialog max height to 9

rows.



7/67

Forum.Nokia.com

1 Introduction and scope of the documentThe Master Layout guide functions as a fundamental, system-wide guideline, defining the general

layout rules and recommendations on how standard UI widgets, application views, menus, fonts, and

colours are defined and used in Maemo 5.

It is recommended that applications follow the Master Layout guidelines as closely as possible in order

to retain a consistent and familiar user experience. Individual applications that require customised UI

elements detail these deviations in their respective layout guides.

The Master Layout guide mainly deals with graphics and layouts; interaction behavior is explained in

the Hildon 2.2 Widget UI Specification.

1.1 LCD display screenThe size of the display is 800x480 pixels, with a physical size of 7.67cm x 4.6cm. The resolution is 265

DPI. The display colour depth is 16 bits, and therefore supports a total amount of 65536 colours.



8/67

Forum.Nokia.com

2 MarginsMargins are empty spaces separating widgets from each other, separating widgets and the screen

edges, and separating individual elements inside a widget.

All application code should use these logical margins. Hardcoding of the numeric pixel sizes must be

avoided:

Logical name Pixel

size

Size on screen in

mm

Additional

information

HILDON_MARGIN_HALF 4 px 0.4mm Marked as red bar inlayout images

HILDON_MARGIN_DEFAULT 8 px 0.8mm Marked as blue barin layout images

HILDON_MARGIN_DOUBLE 16 px 1.5mm Marked as cyan barin layout images

HILDON_MARGIN_TRIPLE 24 px 2.3mm Marked as yellowbar in layout images

Custom margins can be used, but only for very special cases. The standard margins should be used as

much as possible.



9/67

Forum.Nokia.com

3 FontsThe system uses the following fonts:

Nokia sans Nokia sans boldAll colours that are used in the fonts should be logical colours. Hardcoded colours are only used in

special cases to avoid theming problems.

Fonts can also have a 1px shadow effect, but this practice is not recommended, unless it improvesreadability considerably. The offset of the shadow is 1px to the right and 1px down.3.1 Font sizes and leading

Font sizes are logically defined so all layouts should not use any custom sizes. Logical font sizes are:

Font logical name Typeface Size in pixels

measured in

PS*

Row height

and

leading

Size for

Pango / Gtk

theme

SystemFont Nokia Sans 24 px 30 px 18

EmpSystemFont Nokia Sans Bold 24 px 30 px 18

SmallSystemFont Nokia Sans 18 px 24 px 13

EmpSmallSystemFont Nokia Sans Bold 18 px 24 px 13

LargeSystemFont Nokia Sans 35 px 42 px 26

X-LargeSystemFont Nokia Sans 42 px 50 px 31

XX-LargeSystemFont Nokia Sans 70 px 82 px 52

XXX-LargeSystemFont Nokia Sans 100 px 116 px 64

HomeSystemFont Nokia Sans 20 px 26 px 15

Note: The Photoshop (PS) font sizes are used in this document. However, the software uses Pango /

Gtk theme sizes. These different systems are aligned to result in the same physical font size on the

device screen.

In addition to the font sizes listed above, some (legacy) applications also use PANGO_SCALE_SMALL toproduce a smaller font from, SystemFont. The small fonts should be the same size, and

PANGO_SCALE_SMALL should be set to (double) 0.7222222222222 in pango/pango-font.h.

3.1.1 SystemFont and EmpSystemFontSystemFont and EmpSystemFont are used in text input fields, buttons, lists and menu buttons. These

are the most common font sizes used in Fremantle.

Figure 1 shows information on SystemFont size and leading. The leading for SystemFont and

EmpSystemFont are the same.



10/67

Forum.Nokia.com

Figure 1: SystemFont size and leading

Label Size in mm Size in px Description

A 2.3mm 24 Font baseline from the top

B 2.9mm 30 Text row height

C 2.9mm 30 Font leading from baseline to baseline

3.1.2 SmallSystemFont and EmpSmallSystemFontSmallSystemFont and EmpSmallSystemFont are generally used for displaying secondary information,

or when there is a need to display long strings of text in a small amount of space. Due to its decreased

readability in comparison to SystemFont, SmallSystemFont should only be used when absolutely

necessary.

Figure 2 shows an example use case for SmallSystemFont, and Figure 3 provides information on the

size and leading of SmallSystemFont.



11/67


12/67

Forum.Nokia.com

Figure 4: LargeFont in buttons and as text field, as well as its size and leading


A 3.3mm 34 Font baseline from the top

B 4.0mm 42 Text row height

C 4.0mm 42 Font leading from baseline to baseline

3.1.4 Extra-Large SystemFontsThe X-LargeSystemFont, XX-LargeSystemFont, and XXX-LargeSystemFont are used sparingly when

needed, mainly when a text label needs to be the most prominent element on an otherwise sparse

screen.



13/67

Forum.Nokia.com

Figure 5 presents an example of Extra-Large SystemFonts usage.

Figure 5: XX-LargeSystemFont used in the unlock screen

3.1.5 HomeSystemFontHomeSystemFont is used as the default font size for desktop widgets and Task Launcher labels, where

a smaller, yet easily readable version of SystemFont is needed. It is slightly larger than

SmallSystemFont.



14/67

Forum.Nokia.com

4 ButtonsButtons can be clicked to select an option or command. Fremantle Master Layout Guide uses three

default button sizes, namely, StylusButton, FingerButton, and ThumbButton. It also uses different

button states with basic and more advanced configurations.

4.1 Button sizesThe platform has three default button sizes. The height values of the default buttons are fixed, but

their width can be dynamic. When buttons are grouped in columns, the buttons are logically touching

each other. This gives graphical designers more freedom to draw margins on the actual button

graphics and decide whether or not buttons touch each other visually.

The three default button sizes are:

StylusButton FingerButton ThumbButtonFigure 6 visualises these three button sizes.

Figure 6: Three default button sizes: FingerButton, StylusButton, and ThumbButton

In the development theme, basic buttons have 3px margins on every side of a button, drawn insidethe graphic. List items have margins only on the left and right side. Figure 7 illustrates the inner

margins of buttons and list items. The purple area is the logical button area.



15/67

Forum.Nokia.com

Figure 7: Inner margins of buttons (left) and list items (right)

4.1.1 StylusButtonThe smallest possible button is the stylus-sized button. It should not be used in application menus

because it is too small to use with a finger. The height of StylusButtons is 3.3mm on a 3 inch screen.

The height is 35px. If buttons are used in columns, they can touch each other vertically.

The font used in StylusButtons is SystemFont or EmpSystemFont. The text is always horizontally and

vertically centred.

The font colour is ButtonTextColor.

The StylusButton can contain an icon. The icon size is HILDON_ICON_SIZE_STYLUS.

4.1.2 FingerButtonThe FingerButton is twice as tall as the StylusButtons, and is the most generic button used throughout

the user interface.

The height of FingerButtons is 6.7mm, or 70px on a 3 inch screen. The height of the FingerButton is

fixed, and its width is dynamic.

The FingerButton can use SystemFont, EmpSystemFont, and LargeSystemFont. When SystemFont or

EmpSystemFont is used, there can be two rows of text (this should be avoided, if possible). When

using LargeSystemFont, only one row of text can be used.


FingerButtons can contain a combination of an icon and text. The size of the icon is

HILDON_ICON_SIZE_FINGER.

4.1.3 ThumbButtonThe ThumbButton is the largest default button size. ThumbButtons can be used in application views

and dialogues. The height of the ThumbButton is 10.1mm, or 105px.

The height of ThumbButton is fixed, but its width is dynamic.

ThumbButtons can use SystemFont, EmpSystemFont, and LargeSystemFont. Buttons can have a

maximum of three rows of text with SystemFont and EmSystemFont. With LargeSystemFont, there can

be two rows of text. If there is not an icon within the button, the text is always horizontally and

vertically centred.



16/67

Forum.Nokia.com


ThumbButtons can contain a combination of an icon and text. The size of the icon is

HILDON_ICON_SIZE_THUMB.

4.2

Button states

Fremantle Master Layout Guide defines different button states with basic and advanced

configurations. It includes the following button states:

Basic button Selected button Inactive buttonFigure 8 shows the button states.

Figure 8: Different button states with basic and more advanced configurations

All button states and text colours need to be configurable using the theme template. These button

states also apply to list items.

4.2.1 Basic buttonThe basic button style is the most common UI element used.

4.2.2 Button with selected stateThe selected state is shown when buttons are pressed, and when selecting multiple objects in edit

mode view.

4.2.3 Button with inactive stateThe inactive state is used when buttons cannot be interacted with.

4.3 Checkbox buttonsCheckbox buttons allow toggling between values. Pressing anywhere on the button toggles the

checkbox state between checked and unchecked. Figure 9 shows both checkbox states, and their

measurements.



17/67

Forum.Nokia.com

Figure 9: Unchecked and checked checkbox buttons, along with their measurements

Checkbox buttons follow the same conventions as other buttons defined later in this document. Only

the icon will toggle between the unchecked and checked icons.

4.4 Button configurationsButtons can have different configurations.

The following are examples. Do not use too many different configurations in one view.4.4.1 Button colours

The most common colour used in buttons in the development theme is white. White is generally used

on the title of the button. With more advanced button configurations, green (ActiveTextColor) andgray (SecondaryTextColor) are also used. All colours serve a well-defined purpose, and should not be

used arbitrarily. The green highlight colour hints at the value being somehow interactive orchangeable for example, opening a dialogue and changing the respective value. The gray colour istypically used only for additional or secondary information.The following colours are used in all button sizes and configurations:

Colour logical name Description Colour in layout guide

ButtonTextColor Default button title text colour White

ButtonTextPressedColorText colour in the selected

(pressed) stateWhite

ButtonTextDisabledColor Text colour in the inactive state Gray

ActiveTextColor Active text colour Green

SecondaryTextColorText colour used for additional or

secondary informationLight gray

4.4.2 Row configurationsButtons can be placed next to each other on the same row to form groups. Within buttons, text and

other interface elements can also be placed in one or more rows to indicate a relationship between

them. Figure 10 shows the various button configurations.



18/67

Forum.Nokia.com

Figure 10: These image configurations can be applied to list items as well.

1. Button with icon, label and second line of text. The size of the icon is HILDON_ICON_SIZE_FINGER.The top row has text with SystemFont. The second line has text with SmallSystemFont and is often

coloured (here ActiveTextColor). There is MARGIN_CUSTOM_11px between the side of the button

and the icon, and HILDON_MARGIN_DEFAULT between the icon and the label. On the right-hand

side, the margin is HILDON_MARGIN_DOUBLE. The icon and the text group are vertically centred.

2. The same configuration as number 1, but without the second line of text. The text is verticallycentred.

3. Same as number 2, but the icon and label group is horizontally centred. The margins on the sidesare HILDON_MARGIN_DOUBLE.

4.

Button that has only a text label in SystemFont. The label can wrap to two rows if its contentsdoes not fit in one row. The text is always centred. If the label can fit in one row, it is vertically

centred.

5. Same as number4, except that the text is left-aligned. Only used when simple label buttons needto be combined with other buttons utilising left-alignment.

6. Button that has a title and a second line of text. Text in the top row uses SystemFont, and thesecond line uses SmallSystemFont. In these types of buttons, all labels are left-aligned. The second

line of text uses a highlight colour (ActiveTextColor), and typically opens configuration dialogue

boxes. The margins on the sides are HILDON_MARGIN_DOUBLE. If there is no value on the second

line (in other words, no value has been selected yet), the line is omitted and the top row title is

vertically centred within the button.

7. Same as number 5, but the button displays the result of a multiple selection (generally occurs inedit mode view).



19/67

Forum.Nokia.com

8. Button with an icon on the right side, along with a second line of text using passive colour(SecondaryTextColor) indicating that the value cannot be modified it is for information purposes

only.

9. Button that has a label and an icon or widget on the second row. The height of icons or widgetson the second row is 16px.

On some occasions, it is possible to have a button with nothing but an icon. In this case, the icon is

vertically and horizontally centred within the button.

Note: Within buttons, the logical text rows are slightly overlapping. Therefore, it is possible that

hanging characters (such as q or g) might overlap with tall characters such as capital letters.

Note: Buttons with icons on the left or right (1, 2 & 7) use MARGIN_CUSTOM_11px at the sides to ensure

that the icon is centred within the button. With list items, use HILDON_MARGIN_DEFAULT.

4.4.3 Column configurationsIt is possible to organise content within buttons into several columns if the button is large enough, for

example, when buttons occupy the whole width of the device in landscape application views or

dialogue boxes. Labels and their associated values are easier to perceive when they are organised in

columns. Labels and values should to be vertically aligned with each other.

Figure 11 shows various column configurations of list items.

Figure 11: Column configuration of list items

1. A label in the first column and additional text in the second column. Both texts use SystemFontand the value text can also be coloured (here ActiveTextColor). The margins are

HILDON_MARGIN_DOUBLE at the left and HILDON_MARGIN_TRIPLE in between the text columns. The

alignment is affected by any other labels.

2. An icon with a label. The margin in between is HILDON_MARGIN_DEFAULT.3. Same as number 2, but with one additional field aligned to the right. The additional field uses

SmallSystemFont and SecondaryTextColor.

4. Same as number 3, but the second column value is truncated.Note: When using these configurations with normal buttons, icons use MARGIN_CUSTOM_11px at left

side instead of HILDON_MARGIN_DOUBLE.



20/67

Forum.Nokia.com

5 Functional areas and basic layoutsThere are four different basic layouts to choose from:

5. Normal view with embedded controls (inc. a list view)6. Normal view with a toolbar7. Full screen view with overlay controls (application area and controls)8. Full screen view (application area fills the whole screen)Different layouts consist of one or more functional areas:

Application area Application menu / Dashboard Status area

Title area Toolbar area

5.1 List viewA common element in all views is a list. Lists are used to form interactive, logical groups of content out

of individual list items. List items do not have any themed vertical margins.

List items can have multiple different configurations depending on their content. These various

configurations are listed later in this document.

List item height is 70px, and the minimum width is 112px.

Figure 12 and Figure 13 show two different use cases of list views.

Figure 12: List items in the Export contacts dialogue



21/67

Forum.Nokia.com

Figure 13: List items in the Phone application

For empty list views, a text field is presented to indicate that the list is empty. The text field is

vertically and horizontally centred within the list element, rendered in LargeSystemFont, and coloured

as SecondaryTextColor. Figure 14 shows an empty list view.

Figure 14: An empty list view in the Phone application

5.2 Home viewThe Home view is the starting point for user interaction. From here, you can launch new tasks using

the Application menu, access running tasks using the Dashboard, and present various widgets on oneor several home screens. The Home view is most defined by its customisable wallpaper.



22/67

Forum.Nokia.com

5.3 Application menuThe Application menu allows starting new tasks from a grid-like menu screen. Submenus are also

available.

5.4

Dashboard

The Dashboard allows switching between running tasks and seeing all notification events at a glance.

In addition, the Dashboard provides an easy way to close running tasks and dismissing unwanted

notifications.



23/67

Forum.Nokia.com

6 Status areaThe Status area presents crucial status information about the device, such as the current time,

wireless connection strengths, battery charge, presence status, and other information. Tapping the

area will reveal the Status menu for configuration options.



24/67

Forum.Nokia.com

7 Title areaThe title area appears next to the Status area when an application is running and in focus. It contains

the name of the application, as well as a close/back button for either quitting the application or

moving back from an application subview. In addition, tapping on the title area presents a view menufor accessing additional application-specific commands and options.



25/67

Forum.Nokia.com

8 View menuA view menu can be launched by tapping on the application title area, when applicable. As shown in

Figure 15, the presence of a view menu is displayed by an indicator. The height of the menu depends

on its content.

Figure 15: If a view menu is present, it is indicated in the title area

If the view menu has an odd number of commands, then the last slot (on the bottom right) is left

empty.

The view menu contains menu commands in two rows. The maximum amount of commands is 10,

and the maximum amount of rows is 5.

Special filter buttons can be presented at the top of the menu. If the view menu contains filter

buttons, the maximum amount of menu commands is reduced to 8 (4 rows). The filter buttons are

grouped.

The filter buttons can either contain a label, a combination of a label and an icon, or only an icon.

An example of a view menu is shown in Figure .

Figure 16: A view menu template

8.1 Layout for view menuFigure shows the margins and layout of elements in view menus.



26/67

Forum.Nokia.com

HILDON_MARGIN_DOUBLE is used between menu edges and menu commands. HILDON_MARGIN_DOUBLE

is also used between the last menu command and the bottom edge of the menu.

HILDON_MARGIN_DEFAULT separates the filter buttons and the first row of menu commands.

The area outside the menu on both sides is 56px in width. Touching outside the view menu closes the

menu.

HILDON_MARGIN_TRIPLE is used as a horizontal margin between the edges of the menu command and

the menu command label. Labels are always aligned in the centre of the buttons. Labels use

SystemFont and their colour is ButtonTextColor. If the text does not fit into one row, SmallSystemFont

is used instead (and can use up to two rows).

Figure 17: View menu measurements

Dimension Size in mm Size in px Description

A 6.7 70 Height of one menu command button

B 31.8 328 Width of one menu command button

8.2 Layout for view menu filter buttonsIf a view menu contains filter buttons, the button rows replace the topmost row of menu command

buttons.

The maximum number of filter buttons is 4. The size of the individual buttons varies according to the

total amount of buttons being presented; combined, they always take up the same amount of space:

444px.

Filter buttons can contain either a label, a combination of a label and an icon, or only an icon.

The width of the filter button depends on how many filter buttons are being displayed.



27/67

Forum.Nokia.com

Figure shows the measurements of view menu filter buttons: HILDON_MARGIN_DOUBLE is used

between the top of the screen and the top edge of the filter button. HILDON_MARGIN_DEFAULT is used

between the bottom edge of the filter button and the top of edge of the menu command button.

If a filter button only contains an icon, the icon is both vertically and horizontally centred within the

button.

If a filter button contains a label, there must be at least HILDON_MARGIN_DOUBLE as a horizontal

margin between the edges of the label and the edges of the button. If the label is very short, the

minimum width of filter button is 111px.

If a filter button contains both an icon and a label, there must be HILDON_MARGIN_DOUBLE between

the edge of the filter button, the edge of the icon, and the edge of the label.

Filter button labels use SystemFont and are coloured with ButtonTextColor.

Figure 18: View menu filter buttons and their measurements

Dimension Size in px Description

A 70 Height of a filter button

B 111, 148 or 222 Width of a filter button

C 111, 148 or 222 Width of a filter button with an icon



28/67

Forum.Nokia.com

9 Application areaThe size of the application area is 800 x 424px. This area is usable on every application and when the

content of an application exceeds this area, the view becomes vertically pannable.

Most of the graphical UI elements are measured so they fit into a 70px high grid. There is an

additional 4px margin on top of the application area to ensure that all six UI elements align nicely to

the bottom of application area.

Some elements are 35px in height (for example, group titles and progress bars) to fit elements in the

70px grid.

Elements that are too high to fit into a half or single 70px row should be designed to fit and aligned

on multiple rows within the grid.

The main goal when designing and implementing application views is to compose them with

elements aligning to the 35/70px vertical grid. Figure shows a visualisation of the grid.

Figure 19: Title and application area measurements



29/67


30/67

Forum.Nokia.com

11Separating contentContent can be arranged into logical groups with a horizontal ruler, group titles, and empty rows.

Group titles should be used when the content needs to be organised into named groups. Do not to use

any additional titles when using group titles.

Titles are centred. When the content is left-aligned and titles are centred, it is easier to visually scan

and group the content appropriately.

11.1 Horizontal rulersA horizontal ruler is a simple dividing line between elements.

11.2 Group titlesGroup titles should only be used in button-heavy UI situations for organising content into smaller,

logical groups. They can be understood as headings for the following group of elements. Figure

shows group titles in a list view.

Figure 22: A list view divided with group titles

Figure shows group title measurements. The title text is centred, uses SystemFont, and is coloured

with SecondaryTextColor.

The title text is positioned near the bottom of the 35px area, HILDON_MARGIN_HALF away from the

bottom edge.

If the group title is being preceded by other elements, an additional 35px margin is added above,

making the total area of the group title 70px high. This ensures that there is enough empty space in

between groups and that there is no unnecessary space above the group if it is the firstelement in the

view/dialogue.



31/67

Forum.Nokia.com

Group titles are positioned adjacent to the element below them, in other words, there is no margin in

between the group title and the following element (in addition to any margins the following element

has been defined with or within itself).

Figure 23: Group title measurements


A 3.4mm 35 Content label area height

11.3 Empty spaceThe simplest way to divide content is by arranging the content to leave empty space between groups.

35px space (half the height of normal button) should be used.



32/67

Forum.Nokia.com

12Toolbar areaA toolbar at the bottom of application area is used when applications have fixed controls that need to

be present all the times. Figure shows an example of a toolbar and its measurements.

Figure 24: The toolbar in Image Viewer and its measurements

The height of the toolbar is 70px. Buttons do not have any background graphics, only icons. The width

of the area around the icons is 120px, and is active (the buttons are activated within this complete



33/67

Forum.Nokia.com

area). The size of the icons is HILDON_ICON_SIZE_FINGER and it is vertically and horizontally centred

within the button area. If the view is pannable, the panning indictors appear only on the area above

the toolbar the toolbar stays in the same location at all times.

The toolbar has themable background graphics to allow for a divider line at the top of the bar. In the

web browser, as shown in Figure , the width of the toolbar buttons is smaller than what is

recommended to make room for the address bar.

Figure 25: The toolbar in a web browser



34/67

Forum.Nokia.com

13Custom backgroundApplications can have a custom background image in order to differentiate them from each other.

Figure shows an example of a custom background image.

Figure 26: Custom background image in Media Player



35/67

Forum.Nokia.com

14DialogueA dialogue opens from the bottom edge of the screen accompanied by a transition. The application

behind the dialogue is blurred and dimmed. When the user taps outside the dialogue (on the dimmed

area), it closes.

14.1 Dialogue height and widthThe height of the dialogue is set by the size of its content. The recommended maximum height for the

dialogue is 404px so that it can contain up to 5 list rows without a panning indicator. Horizontally, the

dialogue spans the entire screen.

It is possible to define a dialogue with a height bigger than the recommended maximum. These

situations should be avoided if possible to ensure that the dialogue does not reserve all the screenspace and to give the user enough room to close the dialogue by tapping outside it.

Figure shows a special case dialogue with a custom height.

Figure 27: Custom height DTMF dial pad dialogue

14.2 Dialogue contentsDialogues can contain any type of content. If content does not fit in the dialogue, the dialogue area

becomes vertically pannable. Dialogues do not support horizontal panning. The panning indicator is

located in between the dialogue buttons and the actual content.

14.3 Dialogue buttonsDialogue buttons are located in the bottom right corner, in the side area. FingerButton is used as the

control button for such commands as Done, Close, or Browse.



36/67

Forum.Nokia.com

The maximum amount of dialogue buttons per dialogue is 5. Dialogue buttons follow the basic

measurements and colours defined in the buttons section of this document.14.4 Dialogue measurements

The following measures are common for all the dialogues that are of the maximum size:

Label Size in px Description

A Min 76 Minimum distance of dialogue top edge from top of the screen

B 46 Dialogue title area height

C 36 Dialogue title baseline distance from top of the dialogue

D Max 350 Maximum dialogue content area height

E 174 Dialogue side area width

Margins shown in cyan are HILDON_MARGIN_DOUBLE. Margins shown in blue areHILDON_MARGIN_DEFAULT.

When no side area is used, the dialogue content area width takes up the space that was reserved for

dialogue buttons.

The maximum-size dialogues can have a panning indicator. The width of the panning indicator is

16px, and it is located in between the content and the side area. When a panning indicator is shown,

the width of the side area remains constant.

Dialogues cannot have a horizontal panning indicator.

The font for dialogue titles is SystemFont, and the colour is DefaultTextColor.

14.4.1 Dialogues with buttons in a non-pannable areaDialogues that contain less than 6 rows of list items, such as the one shown in Figure , do not require

a pannable area.



37/67

Forum.Nokia.com

Figure 28: Template of a dialogue with buttons in a non-pannable area, along with its measurements

Note: HILDON_MARGIN_DEFAULT at bottom of the dialogue.

14.4.2 Dialogues with buttons in a pannable areaDialogues that contain more than 5 rows of list items require a pannable area. Figure shows

HILDON_MARGIN_DOUBLE dedicated on the right-hand side of the pannable area for the panning

indicator.



38/67

Forum.Nokia.com

Figure 29: Template of a dialogue with buttons in a pannable area, along with its measurements

Note: HILDON_MARGIN_DOUBLE is used between the panning indicator and the button.

14.4.3 Dialogue without buttons in a non-pannable areaDialogues that contain no buttons on the right-hand side of the dialogue can use the full dialogue

width for list items. If there are less than 6 list items, as shown in Figure 30, no pannable area is used.



39/67

Forum.Nokia.com

Figure 30: Template of a dialogue without buttons in a non-pannable area, along with its measurements

14.4.4 Dialogue without buttons in a pannable areaDialogues that contain no buttons on the right-hand side of the dialogue can use the full dialogue

width for list items. If there are more than 5 list items, as shown in Figure , a pannable area is used:

HILDON_MARGIN_DOUBLE is dedicated on the right-hand side of the pannable area for the panning

indicator; however, the right margin of the dialogue is used for this purpose.



40/67

Forum.Nokia.com

Figure 31: Template of a dialogue without buttons in a pannable area, along with its measurements

14.4.5 Text alignment in dialoguesDialogues can also contain text only, as shown in Figure and Figure . The text is vertically aligned to

the middle of the content area, and is horizontally left-aligned.



41/67


42/67

Forum.Nokia.com

Figure 33: A dialogue with grouped textual content, along with its measurements

14.4.6 Dialogues that combine textual content with other elementsDialogues can contain textual content along with buttons and/or input fields (and input field labels).

Figure shows a dialogue with a series of buttons and their respective labels presented alongside an

input field (text entry). The labels are left-aligned, and the margin between them and the input fields

is HILDON_MARGIN_DOUBLE. The position of the input fields is determined by the longest label, and all

fields are aligned with each other.



43/67

Forum.Nokia.com

Figure 34: A dialogue with regular buttons and an input field, along with their measurements.

The position of the value labels and the input field is determined by the longest label.

To align large blocks of text and buttons tidily in dialogues, there should be an additional

HILDON_MARGIN_DOUBLE around the textual content. Figure shows a block of text combined with a

checkbox button.



44/67

Forum.Nokia.com

Figure 35: A block of text in a Geotag-dialog, along with its measurements

If the textual content is so long that it does not fit into the dialog, it is placed into a pannable area. In

the example shown in Figure , the checkbox button would notmove along with the pannable area,

but rather is fixed in its position.

14.4.7 Full-width button dialoguesDialogues may contain full-width elements, such as buttons and textual content, as shown in Figure .

The line of text is vertically and horizontally centred. With longer text, additional

MARGIN_CUSTOM_100px is used on both sides of the text block. There should always be at leastHILDON_MARGIN_DOUBLE used in between the bottom of the text and the dialogue buttons.



45/67

Forum.Nokia.com

Figure 36: A full-width button dialogue, along with its measurements

14.4.8 Dialogues with title-value pairsDialogues may contain static title-value pairs (two columns of text with the first column containing a

title and the second the associated value), as shown in Figure . Both text fields are left-aligned, and

the text columns are separated by HILDON_MARGIN_TRIPLE.

The title (left column) text colour is SecondaryTextColor, while the value (right column) text colour is

DefaultTextColor.



46/67

Forum.Nokia.com

Figure 37: A dialogue with title-value pairs, along with its measurements

14.4.9 Progress note dialoguesProgress note dialogues, shown in Figure , are used for displaying a progress bar within a dialog,

mainly for indicating that a time-consuming operation is taking place.

Progress note dialogues cannot be dismissed by touching on the dimmed area behind it, but theprocess can be stopped using a dedicated button.



47/67

Forum.Nokia.com

Figure 38: A progress note, along with its measurements

The progress note uses standard dialogue margins, but omits the title area of the dialogue. It uses

HILDON_MARGIN_DEFAULT instead. There is a HILDON_MARGIN_DOUBLE in between the bar and the

cancellation button.



48/67

Forum.Nokia.com

15Grid viewGrid views, as shown in Figure , have a multitude of similar items within one view. Normally, one or

more items can be selected, as shown in Figure . The selection is indicated with themable graphics

that appear on top of the item. Grid items can be sized differently, but should be at least 70px in widthand height.

Grid items have a 2px margin around item the margin between two items is thus

HILDON_MARGIN_HALF.

Figure 39: Image Viewer grid view

Figure 40: Image Viewer grid view in edit mode view. The second item is selected.



49/67

Forum.Nokia.com

16NotificationsNotifications include incoming events, information banners, information notes, and confirmation

notes.

16.1 Incoming eventIncoming event notifications are displayed at the top of the screen in an event bubble unless the

active view is the Dashboard. In Dashboard, events are presented as a part of the application window

grid as window thumbnails.

16.2 Information bannerInformation banners contain information that is notcrucial to the user. For example, Battery full

notifications are shown using information banners. You cannot interact with information banners and

they do not stay visible in Dashboard. Information banners and their measurements are shown in

Figure .

Figure 41: An information banner, along with its measurements

Information banners appear on top of the application area and fill the width of the screen. The text is

vertically and horizontally centred, and should fit on a single line. Margins on the sides areHILDON_MARGIN_TRIPLE and HILDON_MARGIN_DEFAULT at the top and bottom (total height 46px). The

text size used is SystemFont, and the colour used is NotificationTextColor.

In the unwanted event of information banners containing more than one row of text, the height of

the banner is increased by 30px with each additional row. The same margins apply.

16.3 Information noteInformation notes contain important must see information for the user. Pressing anywhere on thescreen closes the information note. Information notes, as shown in Figure , do not have any additional

buttons or controls.



50/67

Forum.Nokia.com

Figure 42: An information note, along with its measurements

An information note is vertically centred on the screen. The text of the note is vertically centred, and

left-aligned. The margins on the sides (A) are MARGIN_CUSTOM_100px and HILDON_MARGIN_DOUBLE at

the top and bottom of the note. Text used is SystemFont and coloured with NotificationTextColor.

The minimum height of an information note is 92px, fitting two rows of text. If there is only one line

of text, the text field is vertically centred within the note. After two rows, each additional row adds

30px to the height of the note (the note itself remains vertically centred at all times).

Information notes dim and blur the application area. Depending on whether the dialogue is specified

as system- or task-modal, the information note can dim or blur the entire Status area or the

application title area.



51/67

Forum.Nokia.com

16.4 Confirmation noteConfirmation notes are displayed when user interaction is required for confirmation, or to present

important system messages that the user must see.

Users cannot press on the dimmed area to cancel or close the note; a confirmation is needed.Confirmation notes, as shown in Figure , follow the same measurements as standard dialogues, but do

not have a title area. HILDON_MARGIN_DEFAULT is used instead.

The content of confirmation notes is vertically centred. The font used is SystemFont, and the colour

used is DefaultTextColor. Text is left-aligned.

Confirmation notes dim and blur the application area. Depending on whether the dialogue is specified

as system- or task-modal, the confirmation note can dim or blur the entire Status area or the

application title area.

Figure 43: A confirmation note, along with its measurements



52/67

Forum.Nokia.com

17Progress indicators and progress controllersProgress indicators and controllers indicate the progress of a process. It also indicates the measures

through which the process can be controlled. It includes progress indicators and progress bars.

17.1 Progress indicatorAn animated progress indicator is shown while new data is being loaded.

The indicator icon is HILDON_ICON_SIZE_FINGER and should be animated. The indicator is actually not

an icon, but rather a series of images found in the theme file.

The indicator shouldnotappear immediately when loading new data; the delay is specified on a per-application basis.

17.1.1 Progress indicator in the view title areaThe progress indicator, as shown in Figure , appears after the application title in the title area.

HILDON_MARGIN_DEFAULT is used between the title and icon. The icon is vertically centred with the

title.

Figure 44: A progress indicator in the view title area, along with its measurements

17.1.2 Progress indicator in the dialogue titleA progress indicator, as shown in Figure , can be shown next to the dialogue title. The dialogue title is

centred in the title area, so the indicator appears after the title without affecting its alignment.

HILDON_MARGIN_DEFAULT is used between the title and the icon. The icon is vertically centred with the

title.



53/67

Forum.Nokia.com

Figure 45: A progress indicator a dialogue title, along with its measurements

17.2 Progress barA progress bar is displayed when to there is a need to provide feedback on a time-consuming event,

for example, when a file is being uploaded.

17.2.1 Normal progress barThe height of the normal progress bar is 35px, and its width is dependent on the situation. Progress

bar graphics have margins themed inside them.

The title font size is SmallSystemFont and colour is ReversedSecondaryTextColor. The title is vertically

and horizontally centred on top of the progress bar.

In pulse mode, the progress bar width is 25% of overall bar width.

Figure shows the normal-sized progress bars and their measurements.

Figure 46: Normal progress bar, normal progress bar with title and pulse mode progress bar, along with their

respective measurements



54/67

Forum.Nokia.com

17.2.2 Small progress barA smaller version of the progress bar can be used with buttons, replacing the second line of text. The

height of the small progress bar is 16px.

Figure shows the small progress bar and its measurements.

Figure 47: A small progress bar, along with its measurements

17.3 Seek barThe seek bar lets users select values using a slider control.

The height of the seek bar background graphics is 35px, and its width varies depending on use. The

left-side handle graphics change when the handle is moved.

The width of the handle is 40px and the height is 60px with margins themed inside the graphic.

Figure shows the seek bar and its measurements.

Figure 48: A normal seek bar and a disabled seek bar (which cannot be interacted with), along with its

measurements



55/67

Forum.Nokia.com

18Text editorsText editors are widgets used for entering and editing text. Single- and multi-row input fields are

included.

18.1 Text entryA text entry is a single-line text box for entering text. Tapping on a text entry activates the widget and

changes its graphical style to a focused state. Disabled text entries cannot be interacted with. Text

fields with placeholder text have the selected text style.

The height of the text entry is 70px in total and it has margins themed inside its graphics. Text entries

use HILDON_MARGIN_DOUBLE at the sides according to the text, and CUSTOM_MARGIN_20px on both the

top and bottom. The width is flexible and can be defined when needed. Although the height of the

text area is 70px, it is recommended to keep the element smaller visually.

Text entries use SystemFont. Normal text colour is ReversedTextColor, placeholder text colour is

ReversedTextColor, disabled state text colour is ReversedDisabledTextColor and painted text colour isReversedPaintedTextColor, while text colour background is ReversedSelectionColor.

Figure shows the various text entry states and their measurements.

Figure 49: Normal state, focused entry state, placeholder text state, disabled state, and painted text entry

widgets, along with its measurements

18.2 Text areaA text area functions similarly to a text entry, but can contain multiple rows. Each row adds 35px to

the height of the text area, with a MARGIN_CUSTOM_5px in between text rowsin order to keep the textarea aligned with the 35/70px grid. The text area height and width can be freely defined.

When a text area only contains one row, it should be visually undistinguishable from a text entry. Text

colours are the same as with text entry fields. Figure shows the various text area states and theirmeasurements.



56/67

Forum.Nokia.com

Figure 50: Normal state, focused entry state, placeholder text state, disabled state, and painted text double-row

text area widgets, along with measurements. Each text row adds a 5px margin in between the rows.



57/67

Forum.Nokia.com

19Context-sensitive menuContext-sensitive menus are used in some applications, such as the web browser. The contextual

menu appears when the user long-presses (touches an item and holds the finger still for an extended

period of time) context-sensitive items.

The height of a context-sensitive menu item (A) is 70px, and the width (B) is at least 174px. Labels arevertically and horizontally centred, and use HILDON_MARGIN_TRIPLE on both the left and right side. The

font size is SystemFont and the font colour is ButtonTextColor.

Figure shows the context-sensitive menu and its measurements.

Figure 51: Template of a context-sensitive menu, along with its measurements



58/67

Forum.Nokia.com

20Indicator for pannable areaWhen a pannable area is displayed, a panning indicator is shown to indicate that the area can be

panned. If the content of the area does not overflow, and panning is not possible, there is no panning

indicator displayed at all. The indicator shows the position of the current view in relation to the total

size of the content. When the pannable area is not being panned, the indicator fades out of view.

The panning indicator is located at the right or bottom side of the pannable area.

The panning indicator fades in as the user starts to pan the content of the view or dialogue. After

panning is stopped, the indicator fades out of view again.

The thickness of the panning indicator is 8px, positioned in the centre of a 16px area

(HILDON_MARGIN_HALF at both sides), and coloured as SecondaryTextColor. This applies to both vertical

and horizontal scroll indicators.

Figure shows an example of a panning indicator in a grid view, as well as its measurements.

Figure 52: Left: Image viewer grid view with the panning indicator visible; right: panning indicator

measurements (vertically oriented)



59/67

Forum.Nokia.com

21Avatar graphicsRounded corners are used in the large avatars (HILDON_ICON_SIZE_LARGE or bigger). The corner radius

should be themable.

All avatars have a light-shaded border around them. The border is 1px in thickness, and usesSecondaryTextColor as the colour. When active, the colour is changed to ActiveTextColor.

Figure shows an example of how rounded corners are used in avatars.

Figure 53: Rounded corners on a large avatar in a contact card



60/67

Forum.Nokia.com

22Portrait modeSome applications include a portrait mode, where the device is held in an upright position and the

user interface is rotated 90 degrees to a portrait orientation. The portrait mode is only enabled in

applications where its use is most practical and natural, for example, in Phone, as shown in Figure .

Figure 54: Examples of portrait mode use in Phone

Portrait views generally utilise the same widgets as landscape views but some exceptions apply.

Portrait mode dialogues, for example, do not feature the standard split view of landscape dialogues,

but rather use full-width buttons, lists, and other UI elements. Figure shows examples of dialogues in

portrait mode.



61/67

Forum.Nokia.com

Figure 55: Examples of portrait mode dialogues

Portrait mode dialogues use the same dimensions as landscape dialogues. The height of the title area,

and the bottom and side margins are identical, as is the placement of content. The maximum height

of a portrait mode dialogue is 684px (9 rows of buttons/list elements), and the minimum height is

194px (2 rows of buttons/list elements). If dialogues contain only one row of content, meaning that

the dialogue is higher than the content within it, the content is top-aligned.



62/67

Forum.Nokia.com

23Legacy widgetsLegacy widgets are defined as old style Hildon widgets, which are included in Fremantle for

backwards compatibility. Widgets are rethemed to better fit with the new UI style otherwise no major

changes are made.

23.1 MenuOld menu widgets should appear below the application title area when pressing on the title. The

horizontal location should be flexible so the menu always opens below the title area even when theStatus area width changes. Figure shows the legacy menu and its measurements.

Figure 56: Legacy menu, along with its measurements

The menu should be horizontally aligned in such a way that the title text and menu commands form

an aligned line. Vertically, the menu should appear on top of the application area.



63/67


64/67

Forum.Nokia.com

25Logical coloursLogical colours in Fremantle should be shared between applications whenever possible to achieve

improved consistency of the UI style and colour palette. For this reason, the colours have been defined

by use instead of defining custom colours for each application separately.

All actual logical colour values are defined in each theme.

The implementation instructions for logical colours usage can be found in Hildon 2.2 Widget UI

Specification, chapter Text and images.25.1 General guidance

The colour palette is divided in two groups: Normaland Reversedcolours.

The Reversedcolour paletteis used when there is a need to display information that stands out from

the rest of the screen, such as notifications, alerts or incoming events. In these cases the backgroundis light in colour and the text is displayed in dark colour. Whenever the Reversed palette is chosen for

a particular view, the selection and secondary colours used are also picked from the Reversed colour

set.

Normalpaletteis used in all other cases.

25.1.1 Normal paletteDefaultBackgroundColorThe basic colour for the whole user interface background. It should be dark and provide a good

contrast for readability.

DefaultTextColorUsed for all text items in the platform by default.

The colour should provide a good contrast to the DefaultBackgroundColor for readability.

SecondaryTextColorUsed in buttons and lists where additional, secondary information is displayed.

The colour should be a dimmed variant of DefaultTextColor, yet provide a contrast to the background

colour.

ActiveTextColorUsed in place of SecondaryTextColor where the element invokes settings or choices for the user to

adjust.

The colour should be distinguishable from SecondaryTextColor, and should visually match the

selection/touch indication graphics in the theme.

SelectionColorThe background colour for painted selections in the user interface.

http://www.forum.nokia.com/info/sw.nokia.com/id/019c2b31-3777-49a0-9257-970d79580756/Hildon_2_2_Widget_UI_Specification.htmlhttp://www.forum.nokia.com/info/sw.nokia.com/id/019c2b31-3777-49a0-9257-970d79580756/Hildon_2_2_Widget_UI_Specification.htmlhttp://www.forum.nokia.com/info/sw.nokia.com/id/019c2b31-3777-49a0-9257-970d79580756/Hildon_2_2_Widget_UI_Specification.htmlhttp://www.forum.nokia.com/info/sw.nokia.com/id/019c2b31-3777-49a0-9257-970d79580756/Hildon_2_2_Widget_UI_Specification.html


65/67

Forum.Nokia.com

It should be matched with PaintedTextColor to provide a good contrast. Selection colour should also

match the selection/touch indication graphics in the theme.

PaintedTextColorThe font colour for selected text.

The colour should be easy to read against SelectionColor. Note that this is for text on a dark

background. For text selections in text entry widgets the ReversedPaintedTextColor is used, as those

widgets have a light background.

DisabledTextColorUsed for inactive user interface elements. Note that this does not mean basic, non-clickable text

content they should be displayed with DefaultTextColor.

The colour should appear dimmed compared to SecondaryTextColor.

25.1.2 Reversed paletteThe Reversed palette contains the same colours as the Normal palette, but they should be matched to

provide readability against a light background colour or texture.

The Reversed palette includes the following:

ReversedBackgroundColor

ReversedTextColor

ReversedSecondaryTextColor

ReversedActiveTextColor

ReversedPaintedTextColor

ReversedSelectionColor

ReversedDisabledTextColor

25.1.3 Media coloursThese colours are created for lightbox-like views with media content (album covers, photos, and so

on), which are shown over a dark background.

ContentBackgroundColorThis is used as the background for media views.

The colour should be black, or something very dark, to provide good contrast and exposure to the

media content.

ContentFrameColorCan be used if the media view needs a thin hairline around thumbnails.

It should match ContentBackgroundColor to provide a subtle grid look where needed.



66/67

Forum.Nokia.com

ContentSelectionColorThis colour can be used if there is a need to create a selection in a thumbnail view, to indicate an area

in a photo to be cropped, and so on.

It should provide a good contrast to ContentBackgroundColor, while visually matching the

SelectionColor and selection/touch graphics in the theme.

25.1.4 Other coloursTitleTextColorUsed for text in the title area (clock, application title).

It should provide a good contrast to the view title area graphics.

ButtonTextColorUsed for button text labels.

It should provide a good contrast to the default button style, and can possibly indicate an active

element. For multiline content in buttons, see SecondaryTextColor and ActiveTextColor.

ButtonTextPressedColorThe colour for the default text label in buttons during pressed down state.

It should provide a good contrast to the button selection state graphics in the theme.

ButtonTextDisabledColorUsed for inactive button text labels.

The colour should appear dimmed compared to SecondaryTextColor.

25.1.5 Accent coloursAccentColor1, AccentColor2, AccentColor3Colours that are used in various items that need to be coloured to distinguish them from each other.

For example, events on different calendars, nicknames on a group chat or grouping different things

together with colour.

They should form a harmonic group of matching colours, providing a good contrast to the backgroundcolour.

25.1.6 AttentionColorLike accent colours, but with more punch. This can be used for visual accent in cases where the

particular item needs special attention from the user. For example, the Clear button in a calculator

that could delete your current formula.

25.1.7 Notification coloursNotification colours are used exclusively for notifications, info notes, and info banners.



67/67

Forum.Nokia.com

NotificationBackgroundColorBackground colour for notifications.

NotificationTextColorPrimary text colour for notifications.

NotificationSecondaryTextColorSecondary text colour for notifications.

fremantle master layout guide v1 1 en

Documents