Colours

Colour

Typically text colour changes depending on what coloured background it sits on. This is why in class-flow we have themes. This approach makes site-wide colour application easy to update and manage. Click the swatches in the sidebar below to adjust each themes colour style.

Preview

.F1 T-A

Beautiful workspace.

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.

.F1 T-B

Beautiful workspace.

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.

.F1 T-C

Beautiful workspace.

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.

.F1 T-D

Beautiful workspace.

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.

.F1 L-A

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.

.F1 L-B

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.

.F1 L-C

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.

.F1 L-D

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.

Classes

Available Classes

Name

Styles

Use Case

.F-1

Changes body text and background fill colour

Use this to quickly change a sections or elements text and fill colour. E.g. cards, sections, panels.

.F1 T-A

.F1 T-B

Changes text colour

Use this class to change the text colour of a text block when sitting on a particular background.

.@m lg

.@m md

.@m sm

.@m xsm

Make adjustments are different breakpoints

Use this modifier if you'd like to make a change at a particular breakpoint. LG = Desktop, MD = Tablet, SM = Phone horizontal, XSM = Phone Vertical.