Color - SystemFlow

Color usage

This system uses three main colour groups: Neutral, Primary A and Primary B plus four feedback related colour groups: Success, Warning, Error and Info. You don't have to use nor customise all colours. You can start by adding components to your layout and changing the swatches for these specific components.

Neutral

Neutral colours are mainly used for the interface elements such as texts, dividers, borders and neutral backgrounds.

Primary A

A primary A colour is one of the main two colours from amp brand colour. The colour displayed to represent a personal segment. Primary A mostly used in tagline on personal page, tags, and illustrations.

Primary B

A primary B colour is the other main colours from amp brand colour. The colour displayed to represent the business segment. Primary B mostly used for heading text, primary button, tagline and other primary components.

CTA

CTA colours are mainly used for buttons and links to give contrast for call to action.

Success, Warning, Error and Info

These colors are reserved to communicate feedback.

Use colors from Figma

You can use this section to transfer the color palette from your Figma designs. Replace the image on the right with the Color Grid from Figma. Then use color picker while editing the swatch on the left to get the hex value from the Figma Grid.

Webflow

100

Neutral

Primary A

Primary B

Success

Warning

Error

Info

Figma

Replace the image placeholder at the bottom with the 'Swatches' group from your Figma file found on the Colors page.

Background Colors

To apply color background to an element add a class name related to a specific color. Class names for background colors are constructed like this: C B Neutral-1 (Color Background ColorName-ColorLevel). Below you can see all background color classes available in the system.

Neutral

C B Neutral-1

C B Neutral-2

C B Neutral-3

C B Neutral-4

C B Neutral-5

C B Neutral-6

Primary A

C B Primary A-0

C B Primary A-1

C B Primary A-2

C B Primary A-3

C B Primary A-4

C B Primary A-5

C B Primary A-6

Primary B

C B Primary B-0

C B Primary B-1

C B Primary B-2

C B Primary B-3

C B Primary B-4

C B Primary B-5

C B Primary B-6

CTA

C B CTA-1

C B CTA-2

C B CTA-3

C B CTA-4

C B CTA-5

Success

C B Success-1

C B Success-2

C B Success-3

C B Success-4

C B Success-5

C B Success-6

C B Success-7

C B Success-8

C B Success-9

C B Success-10

Warning

C B Warning-1

C B Warning-2

C B Warning-3

C B Warning-4

C B Warning-5

C B Warning-6

C B Warning-7

C B Warning-8

C B Warning-9

C B Warning-10

Error

C B Error-1

C B Error-2

C B Error-3

C B Error-4

C B Error-5

C B Error-6

C B Error-7

C B Error-8

C B Error-9

C B Error-10

Info

C B Info-1

C B Info-2

C B Info-3

C B Info-4

C B Info-5

C B Info-6

C B Info-7

C B Info-8

C B Info-9

C B Info-10

Text Colors

To apply color to a text element add a class name related to a specific color. Class names for text colors are constructed like this: C T Neutral-100 (Color Text ColorName-ColorLevel). Below you can see all text color classes available in the system.

Neutral

C T Neutral-1

C T Neutral-2

C T Neutral-3

C T Neutral-4

C T Neutral-5

C T Neutral-6

primary a

C T Primary A-0

C T Primary A-1

C T Primary A-2

C T Primary A-3

C T Primary A-4

C T Primary A-5

C T Primary A-6

Primary b

C T Primary B-0

C T Primary B-1

C T Primary B-2

C T Primary B-3

C T Primary B-4

C T Primary B-5

C T Primary B-6

Success

C T Success-1

C T Success-2

C T Success-3

C T Success-4

C T Success-5

C T Success-6

C T Success-7

C T Success-8

C T Success-9

C T Success-10

Warning

C T Warning-1

C T Warning-2

C T Warning-3

C T Warning-4

C T Warning-5

C T Warning-6

C T Warning-7

C T Warning-8

C T Warning-9

C T Warning-10

Error

C T Error-1

C T Error-2

C T Error-3

C T Error-4

C T Error-5

C T Error-6

C T Error-7

C T Error-8

C T Error-9

C T Error-10

Info

C T Info-1

C T Info-2

C T Info-3

C T Info-4

C T Info-5

C T Info-6

C T Info-7

C T Info-8

C T Info-9

C T Info-10