Style schemes
Ensuring consistent visual distinction between interactive and non-interactive parts of an interface, when different colours are applied.
Standard / Style Scheme 1
-
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.
Tag
-
This is a text link.
Secondary buttonInteractive block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
Dolore magna aliqua →
-
Primary button
Urgently interactive block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.”
Dolore magna aliqua →
Style Scheme 2
-
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.
Tag
-
This is a text link.
Secondary buttonInteractive block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
Dolore magna aliqua →
-
Primary button
Urgently interactive block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.”
Dolore magna aliqua →
Style Scheme 3
-
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.
Tag
-
This is a text link.
Secondary buttonInteractive block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
Dolore magna aliqua →
-
Primary button
Urgently interactive block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.”
Dolore magna aliqua →
Style Scheme 4
-
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.
Tag
-
This is a text link.
Secondary buttonInteractive block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
Dolore magna aliqua →
-
Primary button
Urgently interactive block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.”
Dolore magna aliqua →
Style Scheme 5
-
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.
Tag
-
This is a text link.
Secondary buttonInteractive block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
Dolore magna aliqua →
-
Primary button
Urgently interactive block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.”
Dolore magna aliqua →