Search Design Tokens

Search for tokens by name. Clicking on each token will give you copyable code snippets for each platform.

  • color_brand_primary

    Our beloved CoCam deep blue. Use only for branding purposes.

    #0967d2

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_brand_secondary

    Complements our primary blue. Use only for branding purposes.

    #142334

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_brand_accent

    Used to indicate something is new or coming soon. When used as a background color, pair with color_text_secondary.

    #ffd000

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_brand_upgrade

    Used to indicate something is part of the Pro plan or part of an upgrade path. When used as a background color, pair with color_text_secondary.

    #0ce8d6

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_brand_add_on

    Used to indicate something is an add-on.

    #7949d1
    #bca4e8

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_utility_destroy

    Use to warn the user of destructive actions or app errors.

    #ef4e4e
    #f48585

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_utility_caution

    Use to call attention to important information or warnings.

    #ffd000

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_utility_success

    Use to confirm a successfully completed action.

    #12a537
    #3ebd93

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_utility_info

    Use to inform the user about a neutral state or action.

    #42608a

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_utility_assigned

    Use to indicate that a user or company is assigned to something.

    #e76119

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_background_1

    The default background color in light environments.

    #ffffff
    #142334

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_background_2

    Use to highlight supporting content: sidebars, modal footers, callouts, etc. Do not use for button backgrounds.

    #f5f7fa
    #192d43

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_background_3

    Use when level 2 is too light: chip and avatar backgrounds, for example. Do not use for button backgrounds.

    #ebeff5
    #1f3751

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_background_backdrop

    Partially transparent background for modal or drawer backdrops/overlays.

    rgba(31, 55, 81, 0.75)

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_text_default

    Body copy font color in our apps.

    #142334
    #ffffff

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_text_subtle

    Use for supporting content: helper text, metadata, etc.

    #4d5a68
    #c3c8cc

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_text_nonessential

    Our lightest font color. Use sparingly in hint text, input placeholder text, etc.

    #8191a2
    #a0a7af

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_button_background_primary

    Background or outline border color for our primary solid/outline buttons.

    #0967d2
    #6fabf1

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_button_background_secondary

    Background or outline border color for our secondary solid/outline buttons.

    #1f3751
    #ffffff

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_button_background_subtle

    Background or border color for subtle buttons in light env.

    #ebeff5
    #2a415a

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_button_background_destroy

    Background or border color for destroy buttons.

    #ef4e4e
    #f48585

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_button_background_success

    Background or border color for success buttons.

    #12a537
    #3ebd93

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_button_background_tint

    Light background color tint for hover and active button states

    #e5f1ff
    rgba(255, 255, 255, 0.1)

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_button_text_primary

    Text color for our primary solid buttons.

    #ffffff
    #142334

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_button_text_secondary

    Text color for our secondary solid buttons.

    #ffffff
    #142334

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_button_text_subtle

    Text color for our subtle solid buttons.

    #4d5a68
    #c3c8cc

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_button_text_destroy

    Text color for our destroy solid buttons.

    #ffffff
    #142334

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_button_text_success

    Text color for our success solid buttons.

    #ffffff
    #142334

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_link_primary

    Text color for primary links, as well as our minimal or outline buttons.

    #0967d2
    #6fabf1

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_link_secondary

    Text color for secondary links, as well as our minimal or outline buttons.

    #142334
    #ffffff

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_link_subtle

    Text color for subtle links, as well as our minimal or outline buttons.

    #4d5a68
    #c3c8cc

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_border_default

    Our default border color, designed to separate content. Do not use for button or input borders.

    rgba(20, 35, 52, 0.12)
    rgba(255, 255, 255, 0.15)

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_border_input_inactive

    Border color for form inputs in their inactive state.

    rgba(20, 35, 52, 0.2)
    rgba(255, 255, 255, 0.22)

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_border_input_active

    Border color for form inputs in their active state.

    #0967d2
    #6fabf1

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_depth_1

    Color for lowest-elevation shadows. Use for tooltips.

    rgba(20, 35, 52, 0.13)
    rgba(6, 10, 16, 0.5)

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_depth_2

    Color for mid-elevation shadows. Use for cards and popovers.

    rgba(20, 35, 52, 0.13)
    rgba(6, 10, 16, 0.6)

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_depth_3

    Color for highest-elevation shadows. Use for modals, floating action bars, etc.

    rgba(20, 35, 52, 0.2)
    rgba(6, 10, 16, 0.7)

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_label_green

    #31a03c

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_label_blue

    #4191ed

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_label_purple

    #a227c5

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_label_navy

    #354b62

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_label_yellow

    #ffd000

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_label_orange

    #e76119

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_label_red

    #c73732

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_label_light_gray

    #828c95

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_label_dark_gray

    #4d5a68

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_collab_purple

    #a227c5

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_collab_orange

    #e76119

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_collab_green

    #31a03c

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_collab_blue

    #4191ed

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_collab_red

    #c73732

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_collab_yellow

    #d28e09

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_collab_navy

    #354b62

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_collab_plum

    #413ecf

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_collab_magenta

    #d63baa

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_collab_brown

    #745138

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • color_collab_owner

    #ffd000

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_spacing_xxs

    2

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_spacing_xs

    4

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_spacing_s

    8

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_spacing_m

    16

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_spacing_l

    24

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_spacing_xl

    32

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_spacing_xxl

    48

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_border_width_s

    Our lightest border width. Use with our default border color to separate content.

    1

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_border_width_m

    Light border width for slightly more emphasis than `s`. Use for focus outline states, outline buttons, etc.

    2

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_border_width_l

    Mid-thickness border width. Use for tab-highlight bottom border, for example.

    4

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_border_width_xl

    Our heaviest border width. Use for accent-color side border width in Toasts, for example.

    8

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_border_radius_s

    Gives sharp corners a very slight rounding. Use sparingly and only on small elements like `tiny`-sized components.

    2

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_border_radius_m

    Our default border radius for buttons on mobile and labels on both platforms.

    4

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_border_radius_l

    Our default border radius for buttons and modals on the web.

    8

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_border_radius_xl

    Currently unused.

    16

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_border_radius_xxl

    Our default border radius for modals on mobile.

    24

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_border_radius_pill

    Use to create pill-shaped UI elements like chips.

    1000

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_text_xxs

    Use sparingly when space is at a minimum - preferably only on mobile.

    10

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_text_xs

    Use for metadata (date published, etc.) on mobile and on the web where space is tight.

    12

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_text_s

    Our default font size on mobile. Can also be used as body copy and metadata on the web.

    14

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_text_m

    Our default font size on the web.

    16

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_text_l

    Use for headings or featured copy.

    20

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_text_xl

    Use for headings.

    24

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_text_xxl

    Use for headings.

    32

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_text_xxxl

    Use for headings.

    42

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_avatar_xs

    16

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_avatar_s

    24

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_avatar_m

    32

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_avatar_l

    40

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_depth_1_blur

    Blur value in pixels for lowest-elevation shadow. Use for tooltips.

    3

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_depth_1_y

    Y offset value in pixels for lowest-elevation shadow. Use for tooltips.

    1

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_depth_2_blur

    Blur value in pixels for medium-elevation shadow. Use for cards and popovers.

    6

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_depth_2_y

    Y offset value in pixels for medium-elevation shadow. Use for cards and popovers.

    2

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_depth_3_blur

    Blur value in pixels for highest-elevation shadow. Use for modals, floating action bars, etc.

    12

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass

  • size_depth_3_y

    Y offset value in pixels for highest-elevation shadow. Use for modals, floating action bars, etc.

    4

    Mobile + new React apps on web

    In styled-components

    In JSX

    Web

    In styled-components and Sass