DIGIT Spacer defines a consistent spacing system for the application, providing a set of predefined spacing values that can be applied across different UI elements. This ensures uniformity in layout design and alignment.
DIGIT Spacers provides 12 spacing levels, each corresponding to a predefined pixel value:
spacer1
4px
spacer2
8px
spacer3
12px
spacer4
16px
spacer5
20px
spacer6
24px
spacer7
28px
spacer8
32px
spacer9
36px
spacer10
40px
spacer11
44px
spacer12
48px
Consistent Scaling
Use predefined spacers instead of arbitrary values to maintain uniformity.
Spacing Hierarchy
Apply smaller spacers for minor separations (e.g., spacer1 to spacer3) and larger spacers for major divisions
Avoid Overuse
Excessive spacing can lead to inefficient use of screen space, reducing visual coherence
Typography is a crucial part of a design system, ensuring consistency, readability, and usability across different platforms and devices. Good typography rules help present content clearly and efficiently.
DIGIT Typography uses the typefaces Roboto and Roboto Condensed.
Headings establish the visual hierarchy of the content, guiding users through structured information. They range from large titles for prominent sections to smaller subheadings for organizations.
headingXl
Used for main page titles.
32px
36px
40px
headingL
Suitable for section headers.
24px
28px
32px
headingM
Used for subsections or feature highlights.
20px
22px
24px
headingS
Ideal for smaller titles and labels.
16px
16px
16px
headingXS Used for minor headings and annotations.
12px
14px
14px
Body text is the primary content in paragraphs, articles, or instructions. It should be readable, well-spaced, and appropriately sized for different devices.
bodyL
Used for general reading content.
16px
20px
20px
bodyS
Ideal for supporting information and descriptions.
14px
16px
16px
bodyXS
Used for less prominent text, such as disclaimers.
12px
14px
14px
Captions text provide supplementary information, often appearing in smaller font sizes below the primary content
captionL
Used for standout short descriptions.
24px
28px
28px
captionM
Suitable for explanatory notes.
20px
24px
24px
captionS
Best for minor clarifications and subtitles.
16px
20px
20px
Links are interactive text elements used to navigate or perform actions. They are always underlined to indicate clickability. They all have the same scale across all breakpoints.
linkL
Used for large link buttons
20px
linkM
Used for medium link buttons
16px
linkS
Used for small link buttons
14px
Button text is designed to be clear, actionable, and distinguishable from other text elements. It maintains a bold style for better visibility. They all have the same scale across all breakpoints.
buttonL
Used for large buttons
20px
buttonM
Used for medium size buttons
16px
buttonS
Used for small size buttons
14px
Heading And Caption
Heading and Caption use a 1.14× multiplier for Roboto and Roboto condense.
Body and Link
Body and Link use a 1.37× multiplier for Roboto.
Use defined font sizes
Choose from library defined font sizes. By using unique font sizes, you risk upsetting the hierarchy and balance of typography in your product.
Don't use underlines for adding emphasis
Underlines are reserved for text links only. They should not be used as a way for adding emphasis to words.
Respect capitalization rules
Use sentence case for all UX content.
Use tabular numbers for numerical data
Numbers within components should be tabular with lining figures. In tables, numbers should be right aligned to make numerical data easier to read and compare.
Don't let paragraph widths get too thin
Paragraphs of text that are too long are difficult to follow, and paragraphs of text that are too thin are difficult to read. Ideally, blocks of text should be roughly 70 characters wide. Be sure to keep them at least between 50 and 120 characters wide.
Keep content short and to the point
Keep paragraphs concise. Some users with cognitive disabilities (and even those who don’t) can have a very difficult time reading and comprehending large blocks of text.
Don't use indentation
Paragraphs of text should not be indented.
Don't fully-justify text
Do not use fully-justified blocks of text. This adds trapped white space within paragraphs, which makes it harder to read, especially for those with cognitive disabilities or dyslexia. Right alignment (left rag) is also discouraged for paragraphs of text.
Typography component pairing
Heading, body, caption, and link typography components can be paired together in order to create balanced relationships while enforcing hierarchy of content. By default, this can be done by using text block components with the same size. Relationships may sometimes need to be more or less pronounced, so in those use cases, it’s acceptable to combine your own selection of sizes as long as you’re maintaining consistent hierarchy.
The DIGIT Colour palette provides a flexible and accessible range of colours designed to enhance digital experiences across platforms. These colours ensure consistency and usability across applications while supporting a wide range of use cases.
This colour palette picker only shows the latest version (6.0.0) of DIGIT Colours. For now, the available Colours are only for the light theme.
Primary1
#C84C0E
Primary2
#0B4B66
PrimaryBG
#FBEEE8
textPrimary
#363636
textSecondary
#787878
textDisabled
#C5C5C5
paperPrimary
#FFFFFF
paperSecondary
#FAFAFA
alertSuccess
#00703C
alertSuccessBg
#F1FFF8
alertError
#B91900
alertErrorBg
#FFF5F4
alertWarning
#EA8D00
alertWarningBg
#FFF9F0
alertInfo
#0057BD
alertInfoBg
#DEEFFF
genericDivider
#D6D5D4
genericBackground
#EEEEEE
genericInputBorder
#505A5F
Consistent Palette
Always use colours defined in the library to ensure consistency across the application.
Avoid using custom colours unless necessary and approved by the design system.
Purpose-Driven Colours
Apply colours based on their intended purpose. For instance, use primary colours for buttons and links, secondary colours for accents, and background colours for general layout sections.
Contrast & Accessibility
Ensure that text and important elements have enough contrast against their background. This guarantees readability and accessibility for all users, especially those with visual impairments.
Limit Colour Usage
Avoid excessive use of bright or bold colours, particularly in the body text or background areas. Stick to a clean, minimalist design by using a maximum of 3 to 4 main colours in a given layout or component.
