Reference

All CSS

Cord’s custom CSS properties allow you to customize the look and feel of the Cord components (colors, spacing, fonts, etc.) so that they look native to your application’s design. Each component has a set of properties specific to it, listed on the component’s documentation page. All the available properties are summarized on this page.

Cord thread with CSS variable names pointing to the relevant components

You will define any values in your own CSS stylesheet. For example, this CSS will set the border-radius of avatars for all Cord components that allow customization through this CSS variable:

body {
  --cord-avatar-border-radius: 10px;
}

Whereas this CSS will only change avatars in the <cord-page-presence> component:

cord-page-presence {
  --cord-avatar-border-radius: 10px;
}

Figma template

Clone our Figma templates to use our components in your designs

General CSS Properties

Default colors

Name	Default
`--cord-color-base` Basic background for most elements	`#FFFFFF`
`--cord-color-base-strong` Background for highlighted elements, e.g. annotation	`#F6F6F6`
`--cord-color-base-x-strong` Hover states and borders	`#DADCE0`
`--cord-color-content-primary` Most content, e.g. message text	`#696A6C`
`--cord-color-content-secondary` Supplementary content, e.g. timestamps	`#97979F`
`--cord-color-content-emphasis` Links, button content and usernames	`#121314`
`--cord-color-brand-primary` Primary buttons	`#121314`
`--cord-color-notification` Notifications, e.g. unread message	`#0079FF`
`--cord-color-alert` Destructive elements	`#EB5757`
`--cord-color-launcher` Floating sidebar launcher	`#F4FFA0`
`--cord-color-success` Completed actions	`#71BC8F`
`--cord-color-focus` Focused input fields	`#CAE3F1`

Font

Name	Default
`--cord-font-family`	`System font`	Aa

Border radius

Name	Default
`--cord-border-radius-small`	`calc(var(--cord-border-radius-medium) / 2)`
`--cord-border-radius-medium`	`4px`
`--cord-border-radius-large`	`calc(var(--cord-border-radius-medium) * 2)`
`--cord-border-radius-round`	`50%`

Shadows

Name	Default
`--cord-shadow-small`	`0 2px 4px 0 rgba(0,0,0,0.08)`
`--cord-shadow-large`	`0 2px 16px 0 rgba(0,0,0,0.16)`
`--cord-shadow-focus`	`0 0 0 2px var(--cord-color-focus)`

Buttons

Name	Default
`--cord-primary-button-background-color`	`--cord-color-brand-primary`
`--cord-primary-button-background-color--hover`	`--cord-color-brand-primary`
`--cord-primary-button-background-color--active`	`--cord-color-brand-primary`
`--cord-primary-button-background-color--disabled`	`--cord-color-content-secondary`
`--cord-primary-button-content-color`	`--cord-color-base`
`--cord-primary-button-content-color--hover`	`--cord-color-base`
`--cord-primary-button-content-color--active`	`--cord-color-base-x-strong`
`--cord-primary-button-content-color--disabled`	`--cord-color-base`
`--cord-secondary-button-background-color`	`--cord-color-base-strong`
`--cord-secondary-button-background-color--hover`	`--cord-color-base-x-strong`
`--cord-secondary-button-background-color--active`	`--cord-color-brand-primary`
`--cord-secondary-button-background-color--disabled`	`--cord-color-base-strong`
`--cord-secondary-button-content-color`	`--cord-color-content-emphasis`
`--cord-secondary-button-content-color--hover`	`--cord-color-content-emphasis`
`--cord-secondary-button-content-color--active`	`--cord-color-base`
`--cord-secondary-button-content-color--disabled`	`--cord-color-content-secondary`
`--cord-tertiary-button-background-color`	`transparent`
`--cord-tertiary-button-background-color--hover`	`--cord-color-base-strong`
`--cord-tertiary-button-background-color--active`	`--cord-color-base-x-strong`
`--cord-tertiary-button-background-color--disabled`	`transparent`
`--cord-tertiary-button-content-color`	`--cord-color-content-emphasis`
`--cord-tertiary-button-content-color--hover`	`--cord-color-content-emphasis`
`--cord-tertiary-button-content-color--active`	`--cord-color-content-emphasis`
`--cord-tertiary-button-content-color--disabled`	`--cord-color-content-secondary`
`--cord-button-height-auto`	`auto`
`--cord-button-height-m`	`32px`
`--cord-button-border`	`1px solid var(--cord-color-base-x-strong)`
`--cord-button-border-none`	`none`

Avatars

Name	Default
`--cord-avatar-border-radius`	`4px`
`--cord-avatar-text-color`	`--cord-color-base`
`--cord-avatar-background-color`	`--cord-color-brand-primary`
`--cord-facepile-background-color`	`--cord-color-base`
`--cord-facepile-avatar-border-width`	`2px`
`--cord-facepile-avatar-overlap`	`4px`
`--cord-facepile-avatar-size`	`20px`

Tooltips

Name	Default
`--cord-tooltip-background-color`	`--cord-color-brand-primary`
`--cord-tooltip-content-color`	`--cord-color-base`

Annotations

Name	Default
`--cord-annotation-pin-read-color`	`--cord-color-base`
`--cord-annotation-pin-read-outline-color`	`--cord-color-content-secondary`
`--cord-annotation-pin-unread-color`	`--cord-color-notification`
`--cord-annotation-pin-unread-outline-color`	`--cord-color-base`
`--cord-annotation-pin-unplaced-color`	`--cord-color-brand-primary`
`--cord-annotation-pin-unplaced-outline-color`	`--cord-color-base`
`--cord-annotation-pin-z-index`	`2147483643`
`--cord-annotation-arrow-color`	`--cord-color-brand-primary`
`--cord-annotation-arrow-outline-color`	`--cord-color-base`

Component CSS Properties

Name	Default
`--cord-sidebar-background-color`	`--cord-color-base`
`--cord-sidebar-header-background-color`	`--cord-color-base`
`--cord-sidebar-width`	`312px`
`--cord-sidebar-z-index`	`2147483641`

Name	Default
`--cord-launcher-background-color`	`--cord-color-launcher`
`--cord-launcher-background-color--hover`	`--cord-launcher-background-color`
`--cord-launcher-background-color--active`	`--cord-launcher-background-color`
`--cord-launcher-content-color`	`--cord-color-content-emphasis`
`--cord-launcher-content-color--hover`	`--cord-launcher-content-color`
`--cord-launcher-content-color--active`	`--cord-launcher-content-color`

Name	Default
`--cord-sidebar-launcher-font-size`	`14px`
`--cord-sidebar-launcher-line-height`	`20px`
`--cord-sidebar-launcher-letter-spacing`	`normal`
`--cord-sidebar-launcher-text-color`	`--cord-secondary-button-content-color`
`--cord-sidebar-launcher-text-color--hover`	`--cord-secondary-button-content-color--hover`
`--cord-sidebar-launcher-text-color--active`	`--cord-secondary-button-content-color--active`
`--cord-sidebar-launcher-text-color--disabled`	`--cord-secondary-button-content-color--disabled`
`--cord-sidebar-launcher-background-color`	`--cord-secondary-button-background-color`
`--cord-sidebar-launcher-background-color--hover`	`--cord-secondary-button-background-color--hover`
`--cord-sidebar-launcher-background-color--active`	`--cord-secondary-button-background-color--active`
`--cord-sidebar-launcher-background-color--disabled`	`--cord-secondary-button-background-color--disabled`
`--cord-sidebar-launcher-padding`	`6px 8px`
`--cord-sidebar-launcher-height`	`--cord-button-height-auto`
`--cord-sidebar-launcher-gap`	`4px`
`--cord-sidebar-launcher-border`	`--cord-button-border-none`
`--cord-sidebar-launcher-icon-size`	`20px`
`--cord-sidebar-launcher-badge-background-color`	`--cord-color-notification`
`--cord-sidebar-launcher-badge-text-color`	`--cord-color-base`

Thread

Name	Default
`--cord-composer-height-max`	`40vh`
`--cord-composer-height-min`	`40px`
`--cord-thread-background-color`	`--cord-color-base`
`--cord-thread-border`	`1px solid var(--cord-color-base-x-strong)`
`--cord-thread-border-radius`	`--cord-border-radius-medium`
`--cord-thread-send-button-font-size`	`14px`
`--cord-thread-send-button-text-color`	`--cord-primary-button-content-color`
`--cord-thread-send-button-text-color--hover`	`--cord-primary-button-content-color--hover`
`--cord-thread-send-button-text-color--active`	`--cord-primary-button-content-color--active`
`--cord-thread-send-button-text-color--disabled`	`--cord-primary-button-content-color--disabled`
`--cord-thread-send-button-background-color`	`--cord-primary-button-background-color`
`--cord-thread-send-button-background-color--hover`	`--cord-primary-button-background-color--hover`
`--cord-thread-send-button-background-color--active`	`--cord-primary-button-background-color--active`
`--cord-thread-send-button-background-color--disabled`	`--cord-primary-button-background-color--disabled`
`--cord-thread-send-button-padding`	`8px`
`--cord-thread-height`	`auto`
`--cord-thread-max-height`	`none`
`--cord-composer-border`	`1px solid var(--cord-color-base-x-strong)`
`--cord-composer-border-radius`	`--cord-border-radius-medium`

Floating threads

Name	Default
`--cord-floating-threads-font-size`	`14px`
`--cord-floating-threads-line-height`	`20px`
`--cord-floating-threads-letter-spacing`	`normal`
`--cord-floating-threads-text-color`	`--cord-secondary-button-content-color`
`--cord-floating-threads-text-color--hover`	`--cord-secondary-button-content-color--hover`
`--cord-floating-threads-text-color--active`	`--cord-secondary-button-content-color--active`
`--cord-floating-threads-text-color--disabled`	`--cord-secondary-button-content-color--disabled`
`--cord-floating-threads-background-color`	`--cord-secondary-button-background-color`
`--cord-floating-threads-background-color--hover`	`--cord-secondary-button-background-color--hover`
`--cord-floating-threads-background-color--active`	`--cord-secondary-button-background-color--active`
`--cord-floating-threads-background-color--disabled`	`--cord-secondary-button-background-color--disabled`
`--cord-floating-threads-padding`	`6px 8px`
`--cord-floating-threads-height`	`--cord-button-height-auto`
`--cord-floating-threads-gap`	`4px`
`--cord-floating-threads-border`	`--cord-button-border-none`
`--cord-floating-threads-icon-size`	`20px`

Selection comments

Name	Default

Thread list

Name	Default
`--cord-thread-list-gap`	`24px`
`--cord-thread-list-padding`	`8px`
`--cord-thread-list-height`	`auto`

Page presence

Name	Default

Inbox launcher

Name	Default
`--cord-inbox-launcher-font-size`	`14px`
`--cord-inbox-launcher-text-color`	`--cord-secondary-button-content-color`
`--cord-inbox-launcher-text-color--hover`	`--cord-secondary-button-content-color--hover`
`--cord-inbox-launcher-text-color--active`	`--cord-secondary-button-content-color--active`
`--cord-inbox-launcher-text-color--disabled`	`--cord-secondary-button-content-color--disabled`
`--cord-inbox-launcher-background-color`	`--cord-secondary-button-background-color`
`--cord-inbox-launcher-background-color--hover`	`--cord-secondary-button-background-color--hover`
`--cord-inbox-launcher-background-color--active`	`--cord-secondary-button-background-color--active`
`--cord-inbox-launcher-background-color--disabled`	`--cord-secondary-button-background-color--disabled`
`--cord-inbox-launcher-padding`	`6px 8px`
`--cord-inbox-launcher-height`	`--cord-button-height-auto`
`--cord-inbox-launcher-gap`	`4px`
`--cord-inbox-launcher-border`	`--cord-button-border-none`
`--cord-inbox-launcher-icon-size`	`20px`
`--cord-inbox-launcher-badge-background-color`	`--cord-color-notification`
`--cord-inbox-launcher-badge-text-color`	`--cord-color-base`
`--cord-inbox-launcher-inbox-z-index`	`2147483645`
`--cord-inbox-launcher-inbox-offset`	`0px`
`--cord-inbox-launcher-inbox-box-shadow`	`--cord-shadow-large`

Inbox

Name	Default
`--cord-inbox-background-color`	`--cord-color-base`
`--cord-inbox-header-background-color`	`--cord-color-base`
`--cord-inbox-border`	`1px solid var(--cord-color-base-x-strong)`
`--cord-inbox-border-radius`	`--cord-border-radius-medium`
`--cord-inbox-height`	`600px`
`--cord-inbox-width`	`400px`
`--cord-inbox-content-horizontal-padding`	`8px`

Settings

Name	Default
`--cord-settings-background-color`	`--cord-color-base`