Skip to main content

Brand Colors

These colors form the basis of Curology's brand identity.

View the colors in Figma.

  • Primary

    • primary.50

      #fefefd

      .cur-bg-curology-primary-50

      var(--cur-color-curology-primary-50)

    • primary.100

      #fcfbf8

      .cur-bg-curology-primary-100

      var(--cur-color-curology-primary-100)

    • primary.200

      #faf9f6

      .cur-bg-curology-primary-200

      var(--cur-color-curology-primary-200)

    • primary.300

      #f8f6f1

      .cur-bg-curology-primary-300

      var(--cur-color-curology-primary-300)

    • primary.400

      #f6f4ef

      .cur-bg-curology-primary-400

      var(--cur-color-curology-primary-400)

    • primary.500

      #f5f2ec

      .cur-bg-curology-primary-500

      var(--cur-color-curology-primary-500)

    • primary.600

      #e5decf

      .cur-bg-curology-primary-600

      var(--cur-color-curology-primary-600)

    • primary.700

      #c4b390

      .cur-bg-curology-primary-700

      var(--cur-color-curology-primary-700)

    • primary.800

      #aa905d

      .cur-bg-curology-primary-800

      var(--cur-color-curology-primary-800)

    • primary.900

      #846f3c

      .cur-bg-curology-primary-900

      var(--cur-color-curology-primary-900)

    • primary.default

      #f5f2ec

      .cur-bg-curology-primary-default

      var(--cur-color-curology-primary-default)

  • Secondary

    • secondary.50

      #e8e8ec

      .cur-bg-curology-secondary-50

      var(--cur-color-curology-secondary-50)

    • secondary.100

      #b9b9c5

      .cur-bg-curology-secondary-100

      var(--cur-color-curology-secondary-100)

    • secondary.200

      #9797a9

      .cur-bg-curology-secondary-200

      var(--cur-color-curology-secondary-200)

    • secondary.250

      #89899d

      .cur-bg-curology-secondary-250

      var(--cur-color-curology-secondary-250)

    • secondary.300

      #686882

      .cur-bg-curology-secondary-300

      var(--cur-color-curology-secondary-300)

    • secondary.400

      #4a4a69

      .cur-bg-curology-secondary-400

      var(--cur-color-curology-secondary-400)

    • secondary.500

      #1d1d44

      .cur-bg-curology-secondary-500

      var(--cur-color-curology-secondary-500)

    • secondary.600

      #1a1a3e

      .cur-bg-curology-secondary-600

      var(--cur-color-curology-secondary-600)

    • secondary.700

      #151530

      .cur-bg-curology-secondary-700

      var(--cur-color-curology-secondary-700)

    • secondary.800

      #101025

      .cur-bg-curology-secondary-800

      var(--cur-color-curology-secondary-800)

    • secondary.900

      #0c0c1d

      .cur-bg-curology-secondary-900

      var(--cur-color-curology-secondary-900)

    • secondary.default

      #1d1d44

      .cur-bg-curology-secondary-default

      var(--cur-color-curology-secondary-default)

  • Brand

    • brand.50

      #f1efff

      .cur-bg-curology-brand-50

      var(--cur-color-curology-brand-50)

    • brand.100

      #d2ccff

      .cur-bg-curology-brand-100

      var(--cur-color-curology-brand-100)

    • brand.200

      #bdb4ff

      .cur-bg-curology-brand-200

      var(--cur-color-curology-brand-200)

    • brand.300

      #9f92ff

      .cur-bg-curology-brand-300

      var(--cur-color-curology-brand-300)

    • brand.400

      #8c7dff

      .cur-bg-curology-brand-400

      var(--cur-color-curology-brand-400)

    • brand.500

      #6f5cff

      .cur-bg-curology-brand-500

      var(--cur-color-curology-brand-500)

    • brand.600

      #6554e8

      .cur-bg-curology-brand-600

      var(--cur-color-curology-brand-600)

    • brand.700

      #4f41b5

      .cur-bg-curology-brand-700

      var(--cur-color-curology-brand-700)

    • brand.800

      #3d338c

      .cur-bg-curology-brand-800

      var(--cur-color-curology-brand-800)

    • brand.900

      #2f276b

      .cur-bg-curology-brand-900

      var(--cur-color-curology-brand-900)

    • brand.default

      #6f5cff

      .cur-bg-curology-brand-default

      var(--cur-color-curology-brand-default)

  • Brand Light

    • brand-light.50

      #f5f6ff

      .cur-bg-curology-brand-light-50

      var(--cur-color-curology-brand-light-50)

    • brand-light.100

      #e0e4ff

      .cur-bg-curology-brand-light-100

      var(--cur-color-curology-brand-light-100)

    • brand-light.200

      #d1d7ff

      .cur-bg-curology-brand-light-200

      var(--cur-color-curology-brand-light-200)

    • brand-light.300

      #bdc5ff

      .cur-bg-curology-brand-light-300

      var(--cur-color-curology-brand-light-300)

    • brand-light.400

      #b0baff

      .cur-bg-curology-brand-light-400

      var(--cur-color-curology-brand-light-400)

    • brand-light.500

      #9ca9ff

      .cur-bg-curology-brand-light-500

      var(--cur-color-curology-brand-light-500)

    • brand-light.600

      #8e9ae8

      .cur-bg-curology-brand-light-600

      var(--cur-color-curology-brand-light-600)

    • brand-light.700

      #6f78b5

      .cur-bg-curology-brand-light-700

      var(--cur-color-curology-brand-light-700)

    • brand-light.800

      #565d8c

      .cur-bg-curology-brand-light-800

      var(--cur-color-curology-brand-light-800)

    • brand-light.900

      #42476b

      .cur-bg-curology-brand-light-900

      var(--cur-color-curology-brand-light-900)

    • brand-light.default

      #9ca9ff

      .cur-bg-curology-brand-light-default

      var(--cur-color-curology-brand-light-default)

  • Brand Lightest

    • brand-lightest.50

      #fbfbff

      .cur-bg-curology-brand-lightest-50

      var(--cur-color-curology-brand-lightest-50)

    • brand-lightest.100

      #f1f3ff

      .cur-bg-curology-brand-lightest-100

      var(--cur-color-curology-brand-lightest-100)

    • brand-lightest.200

      #eaeeff

      .cur-bg-curology-brand-lightest-200

      var(--cur-color-curology-brand-lightest-200)

    • brand-lightest.300

      #e1e6ff

      .cur-bg-curology-brand-lightest-300

      var(--cur-color-curology-brand-lightest-300)

    • brand-lightest.400

      #dbe1ff

      .cur-bg-curology-brand-lightest-400

      var(--cur-color-curology-brand-lightest-400)

    • brand-lightest.500

      #d2d9ff

      .cur-bg-curology-brand-lightest-500

      var(--cur-color-curology-brand-lightest-500)

    • brand-lightest.600

      #bfc5e8

      .cur-bg-curology-brand-lightest-600

      var(--cur-color-curology-brand-lightest-600)

    • brand-lightest.700

      #959ab5

      .cur-bg-curology-brand-lightest-700

      var(--cur-color-curology-brand-lightest-700)

    • brand-lightest.800

      #74778c

      .cur-bg-curology-brand-lightest-800

      var(--cur-color-curology-brand-lightest-800)

    • brand-lightest.900

      #585b6b

      .cur-bg-curology-brand-lightest-900

      var(--cur-color-curology-brand-lightest-900)

    • brand-lightest.default

      #d2d9ff

      .cur-bg-curology-brand-lightest-default

      var(--cur-color-curology-brand-lightest-default)

  • Brand Accent

    • brand-accent.50

      #fff3ed

      .cur-bg-curology-brand-accent-50

      var(--cur-color-curology-brand-accent-50)

    • brand-accent.100

      #ffd8c8

      .cur-bg-curology-brand-accent-100

      var(--cur-color-curology-brand-accent-100)

    • brand-accent.200

      #ffc6ae

      .cur-bg-curology-brand-accent-200

      var(--cur-color-curology-brand-accent-200)

    • brand-accent.300

      #ffab89

      .cur-bg-curology-brand-accent-300

      var(--cur-color-curology-brand-accent-300)

    • brand-accent.400

      #ff9b72

      .cur-bg-curology-brand-accent-400

      var(--cur-color-curology-brand-accent-400)

    • brand-accent.500

      #ff824f

      .cur-bg-curology-brand-accent-500

      var(--cur-color-curology-brand-accent-500)

    • brand-accent.600

      #e87648

      .cur-bg-curology-brand-accent-600

      var(--cur-color-curology-brand-accent-600)

    • brand-accent.700

      #b55c38

      .cur-bg-curology-brand-accent-700

      var(--cur-color-curology-brand-accent-700)

    • brand-accent.800

      #8c482b

      .cur-bg-curology-brand-accent-800

      var(--cur-color-curology-brand-accent-800)

    • brand-accent.900

      #6b3721

      .cur-bg-curology-brand-accent-900

      var(--cur-color-curology-brand-accent-900)

    • brand-accent.default

      #ff824f

      .cur-bg-curology-brand-accent-default

      var(--cur-color-curology-brand-accent-default)

  • Error

    • error.50

      #faeaea

      .cur-bg-curology-error-50

      var(--cur-color-curology-error-50)

    • error.100

      #f0bcbc

      .cur-bg-curology-error-100

      var(--cur-color-curology-error-100)

    • error.200

      #e99c9c

      .cur-bg-curology-error-200

      var(--cur-color-curology-error-200)

    • error.300

      #df6f6f

      .cur-bg-curology-error-300

      var(--cur-color-curology-error-300)

    • error.500

      #cf2828

      .cur-bg-curology-error-500

      var(--cur-color-curology-error-500)

    • error.600

      #bc2424

      .cur-bg-curology-error-600

      var(--cur-color-curology-error-600)

    • error.700

      #931c1c

      .cur-bg-curology-error-700

      var(--cur-color-curology-error-700)

    • error.800

      #721616

      .cur-bg-curology-error-800

      var(--cur-color-curology-error-800)

    • error.900

      #571111

      .cur-bg-curology-error-900

      var(--cur-color-curology-error-900)

    • error.default

      #cf2828

      .cur-bg-curology-error-default

      var(--cur-color-curology-error-default)

  • Success

    • success.50

      #e7f2e6

      .cur-bg-curology-success-50

      var(--cur-color-curology-success-50)

    • success.100

      #b6d5b0

      .cur-bg-curology-success-100

      var(--cur-color-curology-success-100)

    • success.200

      #92c18a

      .cur-bg-curology-success-200

      var(--cur-color-curology-success-200)

    • success.300

      #60a555

      .cur-bg-curology-success-300

      var(--cur-color-curology-success-300)

    • success.400

      #419334

      .cur-bg-curology-success-400

      var(--cur-color-curology-success-400)

    • success.500

      #127801

      .cur-bg-curology-success-500

      var(--cur-color-curology-success-500)

    • success.600

      #106d01

      .cur-bg-curology-success-600

      var(--cur-color-curology-success-600)

    • success.700

      #0d5501

      .cur-bg-curology-success-700

      var(--cur-color-curology-success-700)

    • success.800

      #0a4201

      .cur-bg-curology-success-800

      var(--cur-color-curology-success-800)

    • success.900

      #083200

      .cur-bg-curology-success-900

      var(--cur-color-curology-success-900)

    • success.default

      #127801

      .cur-bg-curology-success-default

      var(--cur-color-curology-success-default)

  • Neutral

    • neutral.0

      #ffffff

      .cur-bg-curology-neutral-0

      var(--cur-color-curology-neutral-0)

    • neutral.100

      #f2f2f2

      .cur-bg-curology-neutral-100

      var(--cur-color-curology-neutral-100)

    • neutral.200

      #ececec

      .cur-bg-curology-neutral-200

      var(--cur-color-curology-neutral-200)

    • neutral.300

      #e4e4e4

      .cur-bg-curology-neutral-300

      var(--cur-color-curology-neutral-300)

    • neutral.400

      #dedede

      .cur-bg-curology-neutral-400

      var(--cur-color-curology-neutral-400)

    • neutral.500

      #d6d6d6

      .cur-bg-curology-neutral-500

      var(--cur-color-curology-neutral-500)

    • neutral.600

      #c3c3c3

      .cur-bg-curology-neutral-600

      var(--cur-color-curology-neutral-600)

    • neutral.700

      #989898

      .cur-bg-curology-neutral-700

      var(--cur-color-curology-neutral-700)

    • neutral.800

      #767676

      .cur-bg-curology-neutral-800

      var(--cur-color-curology-neutral-800)

    • neutral.900

      #5a5a5a

      .cur-bg-curology-neutral-900

      var(--cur-color-curology-neutral-900)

    • neutral.default

      #ffffff

      .cur-bg-curology-neutral-default

      var(--cur-color-curology-neutral-default)