Design Guidelines

Last updated: April 2023

Aims of these guidelines

Develop a consistent experience across the ODK-X suite of applications

Create efficiencies in design and development of features and applications

Make different apps recognisable as part of the ODK-X family of applications

​

How we get there:

Develop design guidelines for developers so it’s easy to build features that look familiar and intuitive to our users

Provide reference “patterns” for user interface elements (and code)

Create a library of content terms, glossary or similar, so ODK-X apps communicate consistently to users

ODK-X Logo

How to use ODK-X Logo

• The ODK-X Logo is used on black and white backgrounds only.

Link to logo: https://drive.google.com/file/d/17FAuSv8f5eBoqsrRpHfNbF90DidUvTRT/view?usp=share_link

This should be used for primary actions, buttons, links with an high level of importance.

Colour palette

Primary

Each colour style has been given names (e.g. blue-300) to aid easy reference of the same style across design, code and any tools in use.

This should be used for actions with lesser priority

Secondary

ODK-X Blue

​

​

ODK-X Green

​

​

These is the tertiary set of colors to keep things fresh and interesting.

​

​

Tertiary

ODK-X Red

​

​

ODK-X Yellow

​

​

Neutral

This is the range of all the useable tints and shades of both the primary and secondary colours. The styles are named for easy reference.

Expanded colour palette

Expanded colour palette (Contd.)

White

Icons

Using Material icons by Google for consistency and simplicity.

The naming has been done for you to quickly search and download the svg icons from https://fonts.google.com/icons

• All icons are 24px in size.
• Stroke colours vary depending on the context, but are within the range of colours in this Design Guidelines.

Buttons

• All corners are completely rounded.
• The filled colours are in line with the ODK-X guidelines.
• The label text is 14px and all CAPs (Source Sans Pro).
• The width of the button can fill the grid of the screen.
• The height is 40px and fixed.

Text Fields

• Height = 56px
• Width fills the container or screen to which it belongs.
• Placeholder = 16px font for all input states.
• Label text = 14px font for all states
• Padding is 16px on all sides.
• Border outline for default and filled state = 1px
• Border outline for focused and error states = 2px
• Border colour for default state is #666666 = grey-300
• Border colour for the focused state is #5594d7 = blue-300-main
• Border colour for the filled state is #1d1d1d = grey-500
• Border colour for the error state is #db6262 = red-300-main

UI/Layout file location (in Repo)

• Login screen: services_app -> src -> main -> res -> layout -> login_fragment.xml
• Margin/dimension: services_app -> src -> main -> res -> values -> dimens.xml
• Colors: services_app -> src -> main -> res -> values -> colors.xml
• If you can’t see this file, install android library from here

Needs updating

Slides that need updating to match changed styles.

Spacing

Use a 8-pt grid.

• 24px spacing from all ends.
• Buttons:
• Full width: single action
• Fixed width: multiple actions
• 8/16px top & bottom padding (depending on size)

​

Google Font – Montserrat, Source Sans Pro

SURVEY

TABLES

SERVICES

SURVEY

TABLES

SERVICES