Skip to main content

Semantic Colors

These colors describe where and how colors should be used throughout Curology's systems. They are entirely based on colors defined in Brand Colors.

View the colors in Figma.

Surface Colors​

"Surfaces" are essentially boxes that hold content; they are the lowest-level pieces of UI.

  • Primary

    • surface.primary

      #f5f2ec

      .cur-bg-surface-primary

      var(--cur-color-surface-primary-base)

    • surface.primary.hover

      #e5decf

      .cur-bg-surface-primary-hover

      var(--cur-color-surface-primary-hover)

    • surface.primary.selected

      #c4b390

      .cur-bg-surface-primary-selected

      var(--cur-color-surface-primary-selected)

  • Secondary

    • surface.secondary

      #1d1d44

      .cur-bg-surface-secondary

      var(--cur-color-surface-secondary-base)

    • surface.secondary.hover

      #4a4a69

      .cur-bg-surface-secondary-hover

      var(--cur-color-surface-secondary-hover)

    • surface.secondary.selected

      #686882

      .cur-bg-surface-secondary-selected

      var(--cur-color-surface-secondary-selected)

  • Brand

    • surface.brand

      #6554e8

      .cur-bg-surface-brand

      var(--cur-color-surface-brand-base)

    • surface.brand.hover

      #4f41b5

      .cur-bg-surface-brand-hover

      var(--cur-color-surface-brand-hover)

    • surface.brand.selected

      #3d338c

      .cur-bg-surface-brand-selected

      var(--cur-color-surface-brand-selected)

  • Brand Light

    • surface.brand-light

      #9ca9ff

      .cur-bg-surface-brand-light

      var(--cur-color-surface-brand-light-base)

    • surface.brand-light.hover

      #8e9ae8

      .cur-bg-surface-brand-light-hover

      var(--cur-color-surface-brand-light-hover)

    • surface.brand-light.selected

      #6f78b5

      .cur-bg-surface-brand-light-selected

      var(--cur-color-surface-brand-light-selected)

  • Brand Lightest

    • surface.brand-lightest

      #d2d9ff

      .cur-bg-surface-brand-lightest

      var(--cur-color-surface-brand-lightest-base)

    • surface.brand-lightest.hover

      #bfc5e8

      .cur-bg-surface-brand-lightest-hover

      var(--cur-color-surface-brand-lightest-hover)

    • surface.brand-lightest.selected

      #959ab5

      .cur-bg-surface-brand-lightest-selected

      var(--cur-color-surface-brand-lightest-selected)

  • Neutral

    • surface.neutral

      #ffffff

      .cur-bg-surface-neutral

      var(--cur-color-surface-neutral-base)

    • surface.neutral.hover

      #f2f2f2

      .cur-bg-surface-neutral-hover

      var(--cur-color-surface-neutral-hover)

    • surface.neutral.selected

      #ececec

      .cur-bg-surface-neutral-selected

      var(--cur-color-surface-neutral-selected)

  • Error

    • surface.error

      #faeaea

      .cur-bg-surface-error

      var(--cur-color-surface-error-base)

    • surface.error.hover

      #f0bcbc

      .cur-bg-surface-error-hover

      var(--cur-color-surface-error-hover)

    • surface.error.selected

      #e99c9c

      .cur-bg-surface-error-selected

      var(--cur-color-surface-error-selected)

  • Success

    • surface.success

      #e7f2e6

      .cur-bg-surface-success

      var(--cur-color-surface-success-base)

    • surface.success.hover

      #b6d5b0

      .cur-bg-surface-success-hover

      var(--cur-color-surface-success-hover)

    • surface.success.selected

      #92c18a

      .cur-bg-surface-success-selected

      var(--cur-color-surface-success-selected)

  • Warning

    • surface.warning

      #fff3ed

      .cur-bg-surface-warning

      var(--cur-color-surface-warning-base)

    • surface.warning.hover

      #f7d1af

      .cur-bg-surface-warning-hover

      var(--cur-color-surface-warning-hover)

    • surface.warning.selected

      #f19f70

      .cur-bg-surface-warning-selected

      var(--cur-color-surface-warning-selected)

  • Highlight

    • surface.highlight

      #f1efff

      .cur-bg-surface-highlight

      var(--cur-color-surface-highlight-base)

    • surface.highlight.hover

      #d2ccff

      .cur-bg-surface-highlight-hover

      var(--cur-color-surface-highlight-hover)

    • surface.highlight.selected

      #bdb4ff

      .cur-bg-surface-highlight-selected

      var(--cur-color-surface-highlight-selected)

  • Error Bold

    • surface.error-bold

      #cf2828

      .cur-bg-surface-error-bold

      var(--cur-color-surface-error-bold-base)

    • surface.error-bold.hover

      #bc2424

      .cur-bg-surface-error-bold-hover

      var(--cur-color-surface-error-bold-hover)

    • surface.error-bold.selected

      #931c1c

      .cur-bg-surface-error-bold-selected

      var(--cur-color-surface-error-bold-selected)

  • Success Bold

    • surface.success-bold

      #127801

      .cur-bg-surface-success-bold

      var(--cur-color-surface-success-bold-base)

    • surface.success-bold.hover

      #106d01

      .cur-bg-surface-success-bold-hover

      var(--cur-color-surface-success-bold-hover)

    • surface.success-bold.selected

      #0d5501

      .cur-bg-surface-success-bold-selected

      var(--cur-color-surface-success-bold-selected)

  • Brand Accent

    • surface.brand-accent

      #ff824f

      .cur-bg-surface-brand-accent

      var(--cur-color-surface-brand-accent-base)

  • Disabled

    • surface.disabled

      #f2f2f2

      .cur-bg-surface-disabled

      var(--cur-color-surface-disabled-base)

Text Colors​

There are four main colors allowed for text. Additionally, high-saturation status colors can be applied to text.

  • text.primary

    #1d1d44

    .cur-text-primary

    var(--cur-color-text-primary)

  • text.subtle

    #4a4a69

    .cur-text-subtle

    var(--cur-color-text-subtle)

  • text.brand

    #6554e8

    .cur-text-brand

    var(--cur-color-text-brand)

  • text.inverse

    #ffffff

    .cur-text-inverse

    var(--cur-color-text-inverse)

  • text.error

    #931c1c

    .cur-text-error

    var(--cur-color-text-error)

  • text.warning

    #8c482b

    .cur-text-warning

    var(--cur-color-text-warning)

  • text.success

    #127801

    .cur-text-success

    var(--cur-color-text-success)

  • text.highlight

    #4f41b5

    .cur-text-highlight

    var(--cur-color-text-highlight)

  • text.disabled

    #b9b9c5

    .cur-text-disabled

    var(--cur-color-text-disabled)

Border Colors​

Border colors closely match text colors, and can be used to create contrast between surfaces.

  • Subtle

    • border.subtle

      #878780

      .cur-bg-border-subtle

      var(--cur-color-border-subtle-base)

    • border.subtle.hover

      #676762

      .cur-bg-border-subtle-hover

      var(--cur-color-border-subtle-hover)

    • border.subtle.selected

      #676762

      .cur-bg-border-subtle-selected

      var(--cur-color-border-subtle-selected)

  • Secondary

    • border.secondary

      #1d1d44

      .cur-bg-border-secondary

      var(--cur-color-border-secondary-base)

    • border.secondary.hover

      #4a4a69

      .cur-bg-border-secondary-hover

      var(--cur-color-border-secondary-hover)

    • border.secondary.selected

      #686882

      .cur-bg-border-secondary-selected

      var(--cur-color-border-secondary-selected)

  • Brand

    • border.brand

      #6554e8

      .cur-bg-border-brand

      var(--cur-color-border-brand-base)

    • border.brand.hover

      #4f41b5

      .cur-bg-border-brand-hover

      var(--cur-color-border-brand-hover)

    • border.brand.selected

      #3d338c

      .cur-bg-border-brand-selected

      var(--cur-color-border-brand-selected)

  • Error

    • border.error

      #cf2828

      .cur-bg-border-error

      var(--cur-color-border-error-base)

    • border.error.hover

      #bc2424

      .cur-bg-border-error-hover

      var(--cur-color-border-error-hover)

    • border.error.selected

      #931c1c

      .cur-bg-border-error-selected

      var(--cur-color-border-error-selected)

  • Success

    • border.success

      #127801

      .cur-bg-border-success

      var(--cur-color-border-success-base)

    • border.success.hover

      #106d01

      .cur-bg-border-success-hover

      var(--cur-color-border-success-hover)

    • border.success.selected

      #0d5501

      .cur-bg-border-success-selected

      var(--cur-color-border-success-selected)

  • Warning

    • border.warning

      #b55c38

      .cur-bg-border-warning

      var(--cur-color-border-warning-base)

    • border.warning.hover

      #8c482b

      .cur-bg-border-warning-hover

      var(--cur-color-border-warning-hover)

    • border.warning.selected

      #6b3721

      .cur-bg-border-warning-selected

      var(--cur-color-border-warning-selected)

  • Highlight

    • border.highlight

      #6f5cff

      .cur-bg-border-highlight

      var(--cur-color-border-highlight-base)

    • border.highlight.hover

      #6554e8

      .cur-bg-border-highlight-hover

      var(--cur-color-border-highlight-hover)

    • border.highlight.selected

      #4f41b5

      .cur-bg-border-highlight-selected

      var(--cur-color-border-highlight-selected)

  • Brand Light

    • border.brand-light

      #9ca9ff

      .cur-bg-border-brand-light

      var(--cur-color-border-brand-light-base)

  • Inverse

    • border.inverse

      #ffffff

      .cur-bg-border-inverse

      var(--cur-color-border-inverse-base)

  • Disabled

    • border.disabled

      #e4e4e4

      .cur-bg-border-disabled

      var(--cur-color-border-disabled-base)