Colour emphasis
Robust, accessible and preference-honouring colourways — benefiting from differing emphasis depending on interface context.
Natural emphasis
The short stretches of content that make up a general interface.
-
Interface text
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Basic block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Interactive block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
Dolore magna aliqua →
Interactive emphasis
When we need to attract attention and provide clearest visual affordance.
Long-form emphasis
Comfortable yet contrastive, for longer reading experiences.
Sunt in culpa qui officia deserunt mollit anim
Lede / introduction. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Occaecat cupidatat non proident, sunt in culpa
Standard paragraph. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Sunt in culpa qui officia deserunt mollit anim
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Occaecat cupidatat non proident, sunt in culpa
Standard paragraph. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Sunt in culpa qui officia deserunt mollit anim
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.