Typography Desktop
We use Nunito Sans as the primary font family with different sizes and weights to convey visual hierarchy.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()-_=+[]{}\|;:'",.<>/?
Usage
Below are the different styles of typography and their various use cases.
Style Attribute
Body text default Nunito Sans Regular
Font-size: 16px
Letter-spacing: 0.03em
Line-height: 22px
Body text small Nunito Sans Regular
Font-size: 14px
Letter-spacing: 0.03em
Line-height: 22px
Form labels and column headers Nunito Sans Bold
Font-size: 16px
Letter-spacing: 0.03em
Line-height: 22px
H1 heading Nunito Sans Extrabold
Font-size: 32px
Letter-spacing: 0.03em
H2 heading Nunito Sans Extrabold
Font-size: 28px
Letter-spacing: 0.03em
H3 heading Nunito Sans Extrabold
Font-size: 22px
Letter-spacing: 0.03em
H4 heading Nunito Sans Semibold
Font-size: 18px
Letter-spacing: 0.03em
H5 heading Nunito Sans Extrabold
Font-size: 16px
Letter-spacing: 0.03em
Spacing
Body text has top and bottom margin of 1em.
H1, h2, h3, h4, h5 all have top margin of 2em.
Bulleted List Dashed List
• An example of a bulleted list. - An example of a dashed list.
• Bulleted list with child category. - Dashed list with child category.
• Child 1 - Child 1
• Child 2 - Child 2
• Child 3 - Child 3
Bullets and Dashes may be used together to emphasis the parent child relation. If used, Bullets,
having a stronger footprint, should be used as the parent.
• This is an item in a list.
• Things you need for patient check-in.
- Patient IC or identification card with photo.
- Proof of address.
- Previous doctors statement, if any.
Typography Mobile
We use Nunito Sans as the primary font family with different sizes and weights to convey visual hierarchy.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()-_=+[]{}\|;:'",.<>/?
Usage
Below are the different styles of typography and their various use cases.
Style Attribute
Body text default Nunito Sans Regular
Font-size: 14px
Letter-spacing: 0.03em
Line-height: 22px
Body text small Nunito Sans Regular
Font-size: 12px
Letter-spacing: 0.03em
Line-height: 22px
Form labels and column headers Nunito Sans Bold
Font-size: 14px
Letter-spacing: 0.03em
Line-height: 22px
H1 heading Nunito Sans Extrabold
Font-size: 30px
Letter-spacing: 0.03em
H2 heading Nunito Sans Extrabold
Font-size: 26px
Letter-spacing: 0.03em
H3 heading Nunito Sans Extrabold
Font-size: 24px
Letter-spacing: 0.03em
H4 heading Nunito Sans Extrabold
Font-size: 16px
Letter-spacing: 0.03em
H5 heading Nunito Sans Extrabold
Font-size: 14px
Letter-spacing: 0.03em
Spacing
Body text has top and bottom margin of 1em.
H1, h2, h3, h4, h5 all have top margin of 2em.
Bulleted List Dashed List
• An example of a bulleted list. - An example of a dashed list.
• Bulleted list with child category. - Dashed list with child category.
• Child 1 - Child 1
• Child 2 - Child 2
• Child 3 - Child 3
Bullets and Dashes may be used together to emphasis the parent child relation. If used, Bullets,
having a stronger footprint, should be used as the parent.
• This is an item in a list.
• Things you need for patient check-in.
- Patient IC or identification card with photo.
- Proof of address.
- Previous doctors statement, if any.
Colors
Color is used sparingly to draw attention to important elements and those that we want the user to take action on. Selective use of
colour in the right situations draw user’s attention, giving greater emphasis to the intended action or component. The following
charts lists the Primary and Secondary Colours for each of the websites, as well as the neutral and alert colour palettes to be used
for supporting components.
While this Style Guide does not enforce where and when colours should be used, these usage guidelines are recommended.
Primary Colours are mainly used for Titles, Primary call to action buttons, and showcasing active states, ie. a checked checkbox, a
selected tab menu.
Primary Colors Neutral Colors
#4A4A4A
Blue Chill #107DA3 Tundora
#A8A8A8
Cerulean #00B0D3 Silver Chalice
#D7D7D7
Blizzard Blue #A8E5F0 Alto
#EFEFEF
Twilight Blue #ECFCFF Gallery
#F7F7F7
Alabaster
Grid
A grid system helps to achieve effective alignment and design consistency with less effort, tying in design elements together in a
structured and replicable way. We use a 12 column grid for its flexibility.
Containers can be placed into any one of the following configurations, dependent on the requirements of your product.
There are no grid ratios for the Mobile layout, everything should follow a single column design.
Buttons
Buttons are used to trigger actions. There are 2 main types of buttons, the Solid and Outline. Solid buttons are better used for
Primary Call to actions, while Outline buttons can be used for complementary or supporting actions
Solid button Outline button
Submit Cancel
Solid buttons are used to direct Outline buttons are used to
user’s attention to the primary indicate a second action that
action compliments a primary action.
Size
Two button sizes are provided to cater for different situations. General rule of thumb is to use the Default size for desktops
versions, and the Compact size for Mobile versions
• Default height of 44px - label font size is 16px
Default height Default height
• Compact height of 36px - label font size is 14px
Default height Default height
Button Variations
• Solid button
Default Primary Success Warning
• Outline button
Default Primary Success Warning
Button States
Normal Hover Click Disable
Normal Hover Click Disable
Usage
• Use meaningful and concise copy; button actions should be easy to understand and act on.
• Primary buttons are used for actions that advance the intended user flow. Secondary buttons are used for actions that complement/
support it.
• Buttons can be used with icons. If used, icons should be relevant to the task at hand, and always placed on the left.
• The width of a button usually depends on the text's length. Maximum character for a button text is 30 characters
• Minimum width of buttons is 120px.
Additional Guidelines
1. If used with Outline buttons, Solid buttons should always be on the right.
2. Solid buttons should be disabled when conditions to carrying out that action has not been met.
3. Button usage on a complex background, ie. a busy background image, depends largely on the primary colour. If the primary colour does
not complement the colours of that image, consider using White instead.
4. If the background is complex, ie. a busy background image, then consider using gradients to make the outline button stand out more
and be more legible.
5. Buttons are used for events that support a specified user flow, and may entail changing of data/modifying settings of that flow. Links on
the other hand, are primarily used for navigation. Clicking on a Link should never modify any data in the specified user flow.
Hyperlinks
Hyperlinks, or links, are clickable text elements that are usually used for navigation, or to trigger specified events. In terms of
hierarchy, hyperlinks have less prominence than Outline buttons.
Clicking on a link should never result in an action that changes data. Links are primarily used for navigation.
Sample
A common use of hyperlinks is to expand or show more content/info. Hyperlinks should be in the primary colour of the site,
with the font type set to Semibold.
Find swift treatment for your sports injury
and get moving again ... See More
Additional notes
1. Clicking on a link should never result in an action that changes data. Links are primarily used for navigation.
2. Hyperlinks should not have an underline on the hover state.
Form Elements
This section contains elements that are consistently used in forms for data entry, where the user is expected to fill in different
types of information.
Overall guidelines on form element placement can be found in the Form Pattern.
Text Field
Text fields are composed of a label followed by a textarea. They allow users to fill in a string of characters or numbers.
Usually exist as part of a larger form.
Dropdown Selector
Dropdown selectors consist of a label, followed by selector box. This allows users to select from multiple options provided
in the dropdown list.
Radio Button
Use radio button lists when you want a user to select a single option from a list of visible options. Radio buttons do not
support multiple selections, selecting one radio button option deselects the prior one.
Checkboxes
Use checkboxes to allow people to select any number of options; including zero, one, or several. Each checkbox is
independent of all other checkboxes in the list, and checking one box doesn’t uncheck the others.
Search Fields
A search element allows the user to query for results from a specified data source. Dynamic search (autocomplete) is
preferred for most scenarios.
Standard Search Field
The dynamic search shows search results as the user is typing their query. The search results should show a maximum of 5
results.
Search Field with Dynamic Search
If there are more than 5 results, the results dropdown should be scrollable.