CSS Variables

Reference /

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.

A diagram of Cord's CSS variables as they apply to a piece of UI

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;
}
Copy

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

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

Figma template

Figma's sweet logoClone our Figma templates to use our components in your designs

General CSS Properties

Default Colors

Name Default Value
--cord-color-base: 
#FFFFFF;
--cord-color-base-strong: 
#F6F6F6;
--cord-color-base-x-strong: 
#DADCE0;
--cord-color-content-primary: 
#696A6C;
--cord-color-content-secondary: 
#97979F;
--cord-color-content-emphasis: 
#121314;
--cord-color-brand-primary: 
#121314;
--cord-color-notification: 
#0079FF;
--cord-color-notification-background: 
#0079ff1a;
--cord-color-alert: 
#EB5757;
--cord-color-success: 
#71BC8F;
--cord-color-focus: 
#CAE3F1;
--cord-color-launcher: 
#F4FFA0;
--cord-color-inherit: 
inherit;
--cord-primary-button-background-color: 
var(--cord-color-brand-primary, #121314);
--cord-primary-button-background-color--hover: 
var(--cord-color-brand-primary, #121314);
--cord-primary-button-background-color--active: 
var(--cord-color-brand-primary, #121314);
--cord-primary-button-background-color--disabled: 
var(--cord-color-content-secondary, #97979F);
--cord-primary-button-content-color: 
var(--cord-color-base, #FFFFFF);
--cord-primary-button-content-color--hover: 
var(--cord-color-base, #FFFFFF);
--cord-primary-button-content-color--active: 
var(--cord-color-base-x-strong, #DADCE0);
--cord-primary-button-content-color--disabled: 
var(--cord-color-base, #FFFFFF);
--cord-secondary-button-background-color: 
var(--cord-color-base-strong, #F6F6F6);
--cord-secondary-button-background-color--hover: 
var(--cord-color-base-x-strong, #DADCE0);
--cord-secondary-button-background-color--active: 
var(--cord-color-brand-primary, #121314);
--cord-secondary-button-background-color--disabled: 
var(--cord-color-base-strong, #F6F6F6);
--cord-secondary-button-content-color: 
var(--cord-color-content-emphasis, #121314);
--cord-secondary-button-content-color--hover: 
var(--cord-color-content-emphasis, #121314);
--cord-secondary-button-content-color--active: 
var(--cord-color-base, #FFFFFF);
--cord-secondary-button-content-color--disabled: 
var(--cord-color-content-secondary, #97979F);
--cord-tertiary-button-background-color: 
transparent;
--cord-tertiary-button-background-color--hover: 
var(--cord-color-base-strong, #F6F6F6);
--cord-tertiary-button-background-color--active: 
var(--cord-color-base-x-strong, #DADCE0);
--cord-tertiary-button-background-color--disabled: 
transparent;
--cord-tertiary-button-content-color: 
var(--cord-color-content-emphasis, #121314);
--cord-tertiary-button-content-color--hover: 
var(--cord-color-content-emphasis, #121314);
--cord-tertiary-button-content-color--active: 
var(--cord-color-content-emphasis, #121314);
--cord-tertiary-button-content-color--disabled: 
var(--cord-color-content-secondary, #97979F);
--cord-launcher-background-color: 
var(--cord-color-launcher, #F4FFA0);
--cord-launcher-background-color--hover: 
var(--cord-launcher-background-color, var(--cord-color-launcher, #F4FFA0));
--cord-launcher-background-color--active: 
var(--cord-launcher-background-color, var(--cord-color-launcher, #F4FFA0));
--cord-launcher-content-color: 
var(--cord-color-content-emphasis, #121314);
--cord-launcher-content-color--hover: 
var(--cord-launcher-content-color, var(--cord-color-content-emphasis, #121314));
--cord-launcher-content-color--active: 
var(--cord-launcher-content-color, var(--cord-color-content-emphasis, #121314));
--cord-sidebar-background-color: 
var(--cord-color-base, #FFFFFF);
--cord-sidebar-header-background-color: 
var(--cord-color-base, #FFFFFF);
--cord-avatar-text-color: 
var(--cord-color-base, #FFFFFF);
--cord-avatar-background-color: 
var(--cord-color-brand-primary, #121314);
--cord-facepile-background-color: 
var(--cord-color-base, #FFFFFF);
--cord-tooltip-background-color: 
var(--cord-color-brand-primary, #121314);
--cord-tooltip-content-color: 
var(--cord-color-base, #FFFFFF);
--cord-annotation-arrow-color: 
var(--cord-color-brand-primary, #121314);
--cord-annotation-arrow-outline-color: 
var(--cord-color-base, #FFFFFF);
--cord-annotation-pin-read-color: 
var(--cord-color-base, #FFFFFF);
--cord-annotation-pin-read-outline-color: 
var(--cord-color-content-secondary, #97979F);
--cord-annotation-pin-unread-color: 
var(--cord-color-notification, #0079FF);
--cord-annotation-pin-unread-outline-color: 
var(--cord-color-base, #FFFFFF);
--cord-annotation-pin-unplaced-color: 
var(--cord-color-brand-primary, #121314);
--cord-annotation-pin-unplaced-outline-color: 
var(--cord-color-base, #FFFFFF);
--cord-thread-list-thread-highlight-background-color: 
var(--cord-message-highlight-background-color, var(--cord-color-base-strong, #F6F6F6));
--cord-thread-list-thread-highlight-pill-background-color: 
var(--cord-message-highlight-pill-background-color, var(--cord-color-base-x-strong, #DADCE0));
--cord-thread-background-color: 
var(--cord-color-base, #FFFFFF);
--cord-thread-send-button-text-color: 
var(--cord-primary-button-content-color, var(--cord-color-base, #FFFFFF));
--cord-thread-send-button-text-color--hover: 
var(--cord-primary-button-content-color--hover, var(--cord-color-base, #FFFFFF));
--cord-thread-send-button-text-color--active: 
var(--cord-primary-button-content-color--active, var(--cord-color-base-x-strong, #DADCE0));
--cord-thread-send-button-text-color--disabled: 
var(--cord-primary-button-content-color--disabled, var(--cord-color-base, #FFFFFF));
--cord-thread-send-button-background-color: 
var(--cord-primary-button-background-color, var(--cord-color-brand-primary, #121314));
--cord-thread-send-button-background-color--hover: 
var(--cord-primary-button-background-color--hover, var(--cord-color-brand-primary, #121314));
--cord-thread-send-button-background-color--active: 
var(--cord-primary-button-background-color--active, var(--cord-color-brand-primary, #121314));
--cord-thread-send-button-background-color--disabled: 
var(--cord-primary-button-background-color--disabled, var(--cord-color-content-secondary, #97979F));
--cord-floating-threads-text-color: 
var(--cord-secondary-button-content-color, var(--cord-color-content-emphasis, #121314));
--cord-floating-threads-text-color--hover: 
var(--cord-secondary-button-content-color--hover, var(--cord-color-content-emphasis, #121314));
--cord-floating-threads-text-color--active: 
var(--cord-secondary-button-content-color--active, var(--cord-color-base, #FFFFFF));
--cord-floating-threads-text-color--disabled: 
var(--cord-secondary-button-content-color--disabled, var(--cord-color-content-secondary, #97979F));
--cord-floating-threads-background-color: 
var(--cord-secondary-button-background-color, var(--cord-color-base-strong, #F6F6F6));
--cord-floating-threads-background-color--hover: 
var(--cord-secondary-button-background-color--hover, var(--cord-color-base-x-strong, #DADCE0));
--cord-floating-threads-background-color--active: 
var(--cord-secondary-button-background-color--active, var(--cord-color-brand-primary, #121314));
--cord-floating-threads-background-color--disabled: 
var(--cord-secondary-button-background-color--disabled, var(--cord-color-base-strong, #F6F6F6));
--cord-selection-comments-text-color: 
var(--cord-secondary-button-content-color, var(--cord-color-content-emphasis, #121314));
--cord-selection-comments-text-color--hover: 
var(--cord-secondary-button-content-color--hover, var(--cord-color-content-emphasis, #121314));
--cord-selection-comments-text-color--active: 
var(--cord-secondary-button-content-color--active, var(--cord-color-base, #FFFFFF));
--cord-selection-comments-text-color--disabled: 
var(--cord-secondary-button-content-color--disabled, var(--cord-color-content-secondary, #97979F));
--cord-selection-comments-background-color: 
var(--cord-secondary-button-background-color, var(--cord-color-base-strong, #F6F6F6));
--cord-selection-comments-background-color--hover: 
var(--cord-secondary-button-background-color--hover, var(--cord-color-base-x-strong, #DADCE0));
--cord-selection-comments-background-color--active: 
var(--cord-secondary-button-background-color--active, var(--cord-color-brand-primary, #121314));
--cord-selection-comments-background-color--disabled: 
var(--cord-secondary-button-background-color--disabled, var(--cord-color-base-strong, #F6F6F6));
--cord-sidebar-launcher-text-color: 
var(--cord-secondary-button-content-color, var(--cord-color-content-emphasis, #121314));
--cord-sidebar-launcher-text-color--hover: 
var(--cord-secondary-button-content-color--hover, var(--cord-color-content-emphasis, #121314));
--cord-sidebar-launcher-text-color--active: 
var(--cord-secondary-button-content-color--active, var(--cord-color-base, #FFFFFF));
--cord-sidebar-launcher-text-color--disabled: 
var(--cord-secondary-button-content-color--disabled, var(--cord-color-content-secondary, #97979F));
--cord-sidebar-launcher-background-color: 
var(--cord-secondary-button-background-color, var(--cord-color-base-strong, #F6F6F6));
--cord-sidebar-launcher-background-color--hover: 
var(--cord-secondary-button-background-color--hover, var(--cord-color-base-x-strong, #DADCE0));
--cord-sidebar-launcher-background-color--active: 
var(--cord-secondary-button-background-color--active, var(--cord-color-brand-primary, #121314));
--cord-sidebar-launcher-background-color--disabled: 
var(--cord-secondary-button-background-color--disabled, var(--cord-color-base-strong, #F6F6F6));
--cord-sidebar-launcher-badge-background-color: 
var(--cord-color-notification, #0079FF);
--cord-sidebar-launcher-badge-text-color: 
var(--cord-color-base, #FFFFFF);
--cord-message-highlight-background-color: 
var(--cord-color-base-strong, #F6F6F6);
--cord-message-highlight-pill-background-color: 
var(--cord-color-base-x-strong, #DADCE0);
--cord-inbox-launcher-text-color: 
var(--cord-secondary-button-content-color, var(--cord-color-content-emphasis, #121314));
--cord-inbox-launcher-text-color--hover: 
var(--cord-secondary-button-content-color--hover, var(--cord-color-content-emphasis, #121314));
--cord-inbox-launcher-text-color--active: 
var(--cord-secondary-button-content-color--active, var(--cord-color-base, #FFFFFF));
--cord-inbox-launcher-text-color--disabled: 
var(--cord-secondary-button-content-color--disabled, var(--cord-color-content-secondary, #97979F));
--cord-inbox-launcher-background-color: 
var(--cord-secondary-button-background-color, var(--cord-color-base-strong, #F6F6F6));
--cord-inbox-launcher-background-color--hover: 
var(--cord-secondary-button-background-color--hover, var(--cord-color-base-x-strong, #DADCE0));
--cord-inbox-launcher-background-color--active: 
var(--cord-secondary-button-background-color--active, var(--cord-color-brand-primary, #121314));
--cord-inbox-launcher-background-color--disabled: 
var(--cord-secondary-button-background-color--disabled, var(--cord-color-base-strong, #F6F6F6));
--cord-inbox-launcher-badge-background-color: 
var(--cord-color-notification, #0079FF);
--cord-inbox-launcher-badge-text-color: 
var(--cord-color-base, #FFFFFF);
--cord-settings-background-color: 
var(--cord-color-base, #FFFFFF);
--cord-inbox-background-color: 
var(--cord-color-base, #FFFFFF);
--cord-inbox-header-background-color: 
var(--cord-color-base, #FFFFFF);
--cord-notification-list-background-color: 
var(--cord-color-base, #FFFFFF);
--cord-notification-list-launcher-text-color: 
var(--cord-secondary-button-content-color, var(--cord-color-content-emphasis, #121314));
--cord-notification-list-launcher-text-color--hover: 
var(--cord-secondary-button-content-color--hover, var(--cord-color-content-emphasis, #121314));
--cord-notification-list-launcher-text-color--active: 
var(--cord-secondary-button-content-color--active, var(--cord-color-base, #FFFFFF));
--cord-notification-list-launcher-background-color: 
var(--cord-secondary-button-background-color, var(--cord-color-base-strong, #F6F6F6));
--cord-notification-list-launcher-background-color--hover: 
var(--cord-secondary-button-background-color--hover, var(--cord-color-base-x-strong, #DADCE0));
--cord-notification-list-launcher-background-color--active: 
var(--cord-secondary-button-background-color--active, var(--cord-color-brand-primary, #121314));
--cord-notification-list-launcher-background-color--disabled: 
var(--cord-secondary-button-background-color--disabled, var(--cord-color-base-strong, #F6F6F6));
--cord-notification-list-launcher-badge-background-color: 
var(--cord-color-notification, #0079FF);
--cord-notification-list-launcher-badge-text-color: 
var(--cord-color-base, #FFFFFF);
--cord-notification-background-color: 
var(--cord-color-base, #FFFFFF);
--cord-notification-background-color--hover: 
var(--cord-color-base-strong, #F6F6F6);
--cord-notification-header-text-color: 
var(--cord-color-content-primary, #696A6C);
--cord-notification-header-emphasis-text-color: 
var(--cord-color-content-emphasis, #121314);
--cord-notification-content-text-color: 
var(--cord-color-content-primary, #696A6C);
--cord-notification-content-emphasis-text-color: 
var(--cord-color-content-emphasis, #121314);
--cord-notification-unread-background-color: 
var(--cord-color-notification, #0079FF);
--cord-notification-unread-background-color-opacity: 
0.04;
--cord-notification-unread-background-color--hover: 
var(--cord-notification-unread-background-color, var(--cord-color-notification, #0079FF));
--cord-notification-unread-background-color-opacity--hover: 
0.06;
--cord-notification-unread-badge-color: 
var(--cord-color-notification, #0079FF);
--cord-notification-unread-timestamp-text-color: 
var(--cord-color-notification, #0079FF);
--cord-notification-read-timestamp-text-color: 
var(--cord-color-content-secondary, #97979F);

Font

Name Default Value
--cord-font-family: 
inherit;
--cord-font-size-body: 
14px;
--cord-font-size-small: 
12px;
--cord-font-weight-light: 
300;
--cord-font-weight-medium: 
500;
--cord-font-weight-regular: 
400;
--cord-font-weight-bold: 
700;
--cord-thread-send-button-font-size: 
var(--cord-font-size-body, 14px);
--cord-floating-threads-font-size: 
var(--cord-font-size-body, 14px);
--cord-selection-comments-font-size: 
var(--cord-font-size-body, 14px);
--cord-sidebar-launcher-font-size: 
var(--cord-font-size-body, 14px);
--cord-inbox-launcher-font-size: 
var(--cord-font-size-body, 14px);
--cord-notification-list-launcher-font-size: 
var(--cord-font-size-body, 14px);

Border radius

Name Default Value
--cord-border-radius-medium: 
var(--cord-space-3xs, 4px);
--cord-border-radius-small: 
calc(var(--cord-border-radius-medium, var(--cord-space-3xs, 4px)) / 2);
--cord-border-radius-large: 
calc(var(--cord-border-radius-medium, var(--cord-space-3xs, 4px)) * 2);
--cord-border-radius-round: 
50%;
--cord-composer-border-radius: 
var(--cord-border-radius-medium, var(--cord-space-3xs, 4px));
--cord-avatar-border-radius: 
var(--cord-space-3xs, 4px);
--cord-thread-border-radius: 
var(--cord-border-radius-medium, var(--cord-space-3xs, 4px));
--cord-notification-list-border-radius: 
var(--cord-border-radius-large, calc(var(--cord-border-radius-medium, var(--cord-space-3xs, 4px)) * 2));
--cord-notification-border-radius: 
var(--cord-border-radius-medium, var(--cord-space-3xs, 4px));
--cord-inbox-border-radius: 
var(--cord-border-radius-medium, var(--cord-space-3xs, 4px));
--cord-button-border-radius: 
var(--cord-border-radius-medium, var(--cord-space-3xs, 4px));

Shadows

Name Default Value
--cord-shadow-small: 
0 var(--cord-space-4xs, 2px) var(--cord-space-3xs, 4px) 0 rgba(0,0,0,0.08);
--cord-shadow-large: 
0 var(--cord-space-4xs, 2px) var(--cord-space-m, 16px) 0 rgba(0,0,0,0.16);
--cord-shadow-focus: 
0 0 0 var(--cord-space-4xs, 2px) var(--cord-color-focus, #CAE3F1);
--cord-selection-comments-button-box-shadow: 
var(--cord-shadow-large, 0 var(--cord-space-4xs, 2px) var(--cord-space-m, 16px) 0 rgba(0,0,0,0.16));
--cord-inbox-launcher-inbox-box-shadow: 
var(--cord-shadow-large, 0 var(--cord-space-4xs, 2px) var(--cord-space-m, 16px) 0 rgba(0,0,0,0.16));
--cord-notification-list-box-shadow: 
var(--cord-shadow-large, 0 var(--cord-space-4xs, 2px) var(--cord-space-m, 16px) 0 rgba(0,0,0,0.16));
--cord-notification-box-shadow: 
none;

Buttons

Name Default Value
--cord-primary-button-background-color: 
var(--cord-color-brand-primary, #121314);
--cord-primary-button-background-color--hover: 
var(--cord-color-brand-primary, #121314);
--cord-primary-button-background-color--active: 
var(--cord-color-brand-primary, #121314);
--cord-primary-button-background-color--disabled: 
var(--cord-color-content-secondary, #97979F);
--cord-primary-button-content-color: 
var(--cord-color-base, #FFFFFF);
--cord-primary-button-content-color--hover: 
var(--cord-color-base, #FFFFFF);
--cord-primary-button-content-color--active: 
var(--cord-color-base-x-strong, #DADCE0);
--cord-primary-button-content-color--disabled: 
var(--cord-color-base, #FFFFFF);
--cord-secondary-button-background-color: 
var(--cord-color-base-strong, #F6F6F6);
--cord-secondary-button-background-color--hover: 
var(--cord-color-base-x-strong, #DADCE0);
--cord-secondary-button-background-color--active: 
var(--cord-color-brand-primary, #121314);
--cord-secondary-button-background-color--disabled: 
var(--cord-color-base-strong, #F6F6F6);
--cord-secondary-button-content-color: 
var(--cord-color-content-emphasis, #121314);
--cord-secondary-button-content-color--hover: 
var(--cord-color-content-emphasis, #121314);
--cord-secondary-button-content-color--active: 
var(--cord-color-base, #FFFFFF);
--cord-secondary-button-content-color--disabled: 
var(--cord-color-content-secondary, #97979F);
--cord-tertiary-button-background-color: 
transparent;
--cord-tertiary-button-background-color--hover: 
var(--cord-color-base-strong, #F6F6F6);
--cord-tertiary-button-background-color--active: 
var(--cord-color-base-x-strong, #DADCE0);
--cord-tertiary-button-background-color--disabled: 
transparent;
--cord-tertiary-button-content-color: 
var(--cord-color-content-emphasis, #121314);
--cord-tertiary-button-content-color--hover: 
var(--cord-color-content-emphasis, #121314);
--cord-tertiary-button-content-color--active: 
var(--cord-color-content-emphasis, #121314);
--cord-tertiary-button-content-color--disabled: 
var(--cord-color-content-secondary, #97979F);
--cord-thread-send-button-font-size: 
var(--cord-font-size-body, 14px);
--cord-thread-send-button-text-color: 
var(--cord-primary-button-content-color, var(--cord-color-base, #FFFFFF));
--cord-thread-send-button-text-color--hover: 
var(--cord-primary-button-content-color--hover, var(--cord-color-base, #FFFFFF));
--cord-thread-send-button-text-color--active: 
var(--cord-primary-button-content-color--active, var(--cord-color-base-x-strong, #DADCE0));
--cord-thread-send-button-text-color--disabled: 
var(--cord-primary-button-content-color--disabled, var(--cord-color-base, #FFFFFF));
--cord-thread-send-button-background-color: 
var(--cord-primary-button-background-color, var(--cord-color-brand-primary, #121314));
--cord-thread-send-button-background-color--hover: 
var(--cord-primary-button-background-color--hover, var(--cord-color-brand-primary, #121314));
--cord-thread-send-button-background-color--active: 
var(--cord-primary-button-background-color--active, var(--cord-color-brand-primary, #121314));
--cord-thread-send-button-background-color--disabled: 
var(--cord-primary-button-background-color--disabled, var(--cord-color-content-secondary, #97979F));
--cord-thread-send-button-padding: 
var(--cord-space-2xs, 8px);
--cord-selection-comments-button-box-shadow: 
var(--cord-shadow-large, 0 var(--cord-space-4xs, 2px) var(--cord-space-m, 16px) 0 rgba(0,0,0,0.16));
--cord-button-height-auto: 
auto;
--cord-button-height-m: 
32px;
--cord-button-border-none: 
none;
--cord-button-border: 
1px solid var(--cord-color-base-x-strong, #DADCE0);
--cord-button-border-radius: 
var(--cord-border-radius-medium, var(--cord-space-3xs, 4px));
--cord-button-small-icon-only-padding: 
var(--cord-space-3xs, 4px) var(--cord-space-2xs, 8px);
--cord-button-small-text-only-padding: 
var(--cord-space-3xs, 4px) var(--cord-space-2xs, 8px);
--cord-button-small-icon-and-text-padding: 
var(--cord-space-3xs, 4px);
--cord-button-medium-icon-only-padding: 
calc(var(--cord-space-4xs, 2px) + var(--cord-space-3xs, 4px));
--cord-button-medium-text-only-padding: 
var(--cord-space-2xs, 8px);
--cord-button-medium-icon-and-text-padding: 
calc(var(--cord-space-4xs, 2px) + var(--cord-space-3xs, 4px)) var(--cord-space-2xs, 8px);
--cord-button-large-icon-only-padding: 
calc(var(--cord-space-4xs, 2px) + var(--cord-space-2xs, 8px)) var(--cord-space-2xs, 8px);
--cord-button-large-text-only-padding: 
calc(var(--cord-space-4xs, 2px) + var(--cord-space-2xs, 8px));
--cord-button-large-icon-and-text-padding: 
calc(var(--cord-space-4xs, 2px) + var(--cord-space-2xs, 8px)) var(--cord-space-2xs, 8px);

Avatars

Name Default Value
--cord-avatar-border-radius: 
var(--cord-space-3xs, 4px);
--cord-avatar-text-color: 
var(--cord-color-base, #FFFFFF);
--cord-avatar-background-color: 
var(--cord-color-brand-primary, #121314);
--cord-avatar-text-transform: 
none;
--cord-facepile-avatar-border-width: 
var(--cord-space-4xs, 2px);
--cord-facepile-avatar-overlap: 
var(--cord-space-3xs, 4px);
--cord-facepile-avatar-size: 
var(--cord-space-l, 20px);
--cord-page-presence-avatar-size: 
var(--cord-facepile-avatar-size, var(--cord-space-l, 20px));

Tooltips

Name Default Value
--cord-tooltip-background-color: 
var(--cord-color-brand-primary, #121314);
--cord-tooltip-content-color: 
var(--cord-color-base, #FFFFFF);

Annotations

Name Default Value
--cord-annotation-pin-z-index: 
2147483643;
--cord-annotation-arrow-color: 
var(--cord-color-brand-primary, #121314);
--cord-annotation-arrow-outline-color: 
var(--cord-color-base, #FFFFFF);
--cord-annotation-pin-read-color: 
var(--cord-color-base, #FFFFFF);
--cord-annotation-pin-read-outline-color: 
var(--cord-color-content-secondary, #97979F);
--cord-annotation-pin-unread-color: 
var(--cord-color-notification, #0079FF);
--cord-annotation-pin-unread-outline-color: 
var(--cord-color-base, #FFFFFF);
--cord-annotation-pin-unplaced-color: 
var(--cord-color-brand-primary, #121314);
--cord-annotation-pin-unplaced-outline-color: 
var(--cord-color-base, #FFFFFF);
--cord-annotation-pin-size: 
34px;
--cord-annotation-pin-filter: 
drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.08));

Component CSS Properties

Name Default Value
--cord-sidebar-background-color: 
var(--cord-color-base, #FFFFFF);
--cord-sidebar-header-background-color: 
var(--cord-color-base, #FFFFFF);
--cord-sidebar-width: 
312px;
--cord-sidebar-z-index: 
2147483641;
--cord-sidebar-top: 
0px;
--cord-sidebar-border-left: 
1px solid var(--cord-color-base-x-strong, #DADCE0);
--cord-sidebar-border-top: 
none;
--cord-sidebar-border-right: 
none;
--cord-sidebar-border-bottom: 
none;

Floating sidebar launcher

Name Default Value
--cord-color-launcher: 
#F4FFA0;
--cord-launcher-background-color: 
var(--cord-color-launcher, #F4FFA0);
--cord-launcher-background-color--hover: 
var(--cord-launcher-background-color, var(--cord-color-launcher, #F4FFA0));
--cord-launcher-background-color--active: 
var(--cord-launcher-background-color, var(--cord-color-launcher, #F4FFA0));
--cord-launcher-content-color: 
var(--cord-color-content-emphasis, #121314);
--cord-launcher-content-color--hover: 
var(--cord-launcher-content-color, var(--cord-color-content-emphasis, #121314));
--cord-launcher-content-color--active: 
var(--cord-launcher-content-color, var(--cord-color-content-emphasis, #121314));
Name Default Value
--cord-sidebar-launcher-font-size: 
var(--cord-font-size-body, 14px);
--cord-sidebar-launcher-line-height: 
var(--cord-line-height-body, var(--cord-space-l, 20px));
--cord-sidebar-launcher-letter-spacing: 
normal;
--cord-sidebar-launcher-text-color: 
var(--cord-secondary-button-content-color, var(--cord-color-content-emphasis, #121314));
--cord-sidebar-launcher-text-color--hover: 
var(--cord-secondary-button-content-color--hover, var(--cord-color-content-emphasis, #121314));
--cord-sidebar-launcher-text-color--active: 
var(--cord-secondary-button-content-color--active, var(--cord-color-base, #FFFFFF));
--cord-sidebar-launcher-text-color--disabled: 
var(--cord-secondary-button-content-color--disabled, var(--cord-color-content-secondary, #97979F));
--cord-sidebar-launcher-background-color: 
var(--cord-secondary-button-background-color, var(--cord-color-base-strong, #F6F6F6));
--cord-sidebar-launcher-background-color--hover: 
var(--cord-secondary-button-background-color--hover, var(--cord-color-base-x-strong, #DADCE0));
--cord-sidebar-launcher-background-color--active: 
var(--cord-secondary-button-background-color--active, var(--cord-color-brand-primary, #121314));
--cord-sidebar-launcher-background-color--disabled: 
var(--cord-secondary-button-background-color--disabled, var(--cord-color-base-strong, #F6F6F6));
--cord-sidebar-launcher-padding: 
6px 8px;
--cord-sidebar-launcher-height: 
var(--cord-button-height-auto, auto);
--cord-sidebar-launcher-gap: 
var(--cord-space-3xs, 4px);
--cord-sidebar-launcher-border: 
var(--cord-button-border-none, none);
--cord-sidebar-launcher-icon-size: 
var(--cord-space-l, 20px);
--cord-sidebar-launcher-badge-background-color: 
var(--cord-color-notification, #0079FF);
--cord-sidebar-launcher-badge-text-color: 
var(--cord-color-base, #FFFFFF);

Thread

Name Default Value
--cord-composer-height-max: 
40vh;
--cord-composer-height-tall: 
200px;
--cord-composer-height-min: 
var(--cord-line-height-body, var(--cord-space-l, 20px));
--cord-composer-border: 
1px solid var(--cord-color-base-x-strong, #DADCE0);
--cord-composer-border--focus: 
1px solid var(--cord-color-content-primary, #696A6C);
--cord-composer-border-radius: 
var(--cord-border-radius-medium, var(--cord-space-3xs, 4px));
--cord-thread-background-color: 
var(--cord-color-base, #FFFFFF);
--cord-thread-border: 
1px solid var(--cord-color-base-x-strong, #DADCE0);
--cord-thread-border-top: 
var(--cord-thread-border, 1px solid var(--cord-color-base-x-strong, #DADCE0));
--cord-thread-border-right: 
var(--cord-thread-border, 1px solid var(--cord-color-base-x-strong, #DADCE0));
--cord-thread-border-bottom: 
var(--cord-thread-border, 1px solid var(--cord-color-base-x-strong, #DADCE0));
--cord-thread-border-left: 
var(--cord-thread-border, 1px solid var(--cord-color-base-x-strong, #DADCE0));
--cord-thread-border-radius: 
var(--cord-border-radius-medium, var(--cord-space-3xs, 4px));
--cord-thread-padding: 
0px;
--cord-thread-send-button-font-size: 
var(--cord-font-size-body, 14px);
--cord-thread-send-button-text-color: 
var(--cord-primary-button-content-color, var(--cord-color-base, #FFFFFF));
--cord-thread-send-button-text-color--hover: 
var(--cord-primary-button-content-color--hover, var(--cord-color-base, #FFFFFF));
--cord-thread-send-button-text-color--active: 
var(--cord-primary-button-content-color--active, var(--cord-color-base-x-strong, #DADCE0));
--cord-thread-send-button-text-color--disabled: 
var(--cord-primary-button-content-color--disabled, var(--cord-color-base, #FFFFFF));
--cord-thread-send-button-background-color: 
var(--cord-primary-button-background-color, var(--cord-color-brand-primary, #121314));
--cord-thread-send-button-background-color--hover: 
var(--cord-primary-button-background-color--hover, var(--cord-color-brand-primary, #121314));
--cord-thread-send-button-background-color--active: 
var(--cord-primary-button-background-color--active, var(--cord-color-brand-primary, #121314));
--cord-thread-send-button-background-color--disabled: 
var(--cord-primary-button-background-color--disabled, var(--cord-color-content-secondary, #97979F));
--cord-thread-send-button-padding: 
var(--cord-space-2xs, 8px);
--cord-thread-height: 
auto;
--cord-thread-max-height: 
none;
--cord-thread-width: 
auto;

Floating Threads

Name Default Value
--cord-floating-threads-font-size: 
var(--cord-font-size-body, 14px);
--cord-floating-threads-line-height: 
var(--cord-line-height-body, var(--cord-space-l, 20px));
--cord-floating-threads-letter-spacing: 
normal;
--cord-floating-threads-text-color: 
var(--cord-secondary-button-content-color, var(--cord-color-content-emphasis, #121314));
--cord-floating-threads-text-color--hover: 
var(--cord-secondary-button-content-color--hover, var(--cord-color-content-emphasis, #121314));
--cord-floating-threads-text-color--active: 
var(--cord-secondary-button-content-color--active, var(--cord-color-base, #FFFFFF));
--cord-floating-threads-text-color--disabled: 
var(--cord-secondary-button-content-color--disabled, var(--cord-color-content-secondary, #97979F));
--cord-floating-threads-background-color: 
var(--cord-secondary-button-background-color, var(--cord-color-base-strong, #F6F6F6));
--cord-floating-threads-background-color--hover: 
var(--cord-secondary-button-background-color--hover, var(--cord-color-base-x-strong, #DADCE0));
--cord-floating-threads-background-color--active: 
var(--cord-secondary-button-background-color--active, var(--cord-color-brand-primary, #121314));
--cord-floating-threads-background-color--disabled: 
var(--cord-secondary-button-background-color--disabled, var(--cord-color-base-strong, #F6F6F6));
--cord-floating-threads-padding: 
6px 8px;
--cord-floating-threads-height: 
var(--cord-button-height-auto, auto);
--cord-floating-threads-gap: 
var(--cord-space-3xs, 4px);
--cord-floating-threads-border: 
var(--cord-button-border-none, none);
--cord-floating-threads-icon-size: 
var(--cord-space-l, 20px);

Thread List

Name Default Value
--cord-thread-list-gap: 
var(--cord-space-xl, 24px);
--cord-thread-list-padding: 
var(--cord-space-2xs, 8px);
--cord-thread-list-height: 
auto;
--cord-thread-list-message-truncate-lines: 
none;
--cord-thread-list-thread-highlight-background-color: 
var(--cord-message-highlight-background-color, var(--cord-color-base-strong, #F6F6F6));
--cord-thread-list-thread-highlight-pill-background-color: 
var(--cord-message-highlight-pill-background-color, var(--cord-color-base-x-strong, #DADCE0));

Page presence

Name Default Value
--cord-page-presence-avatar-size: 
var(--cord-facepile-avatar-size, var(--cord-space-l, 20px));

Inbox launcher

Name Default Value
--cord-inbox-launcher-font-size: 
var(--cord-font-size-body, 14px);
--cord-inbox-launcher-text-color: 
var(--cord-secondary-button-content-color, var(--cord-color-content-emphasis, #121314));
--cord-inbox-launcher-text-color--hover: 
var(--cord-secondary-button-content-color--hover, var(--cord-color-content-emphasis, #121314));
--cord-inbox-launcher-text-color--active: 
var(--cord-secondary-button-content-color--active, var(--cord-color-base, #FFFFFF));
--cord-inbox-launcher-text-color--disabled: 
var(--cord-secondary-button-content-color--disabled, var(--cord-color-content-secondary, #97979F));
--cord-inbox-launcher-background-color: 
var(--cord-secondary-button-background-color, var(--cord-color-base-strong, #F6F6F6));
--cord-inbox-launcher-background-color--hover: 
var(--cord-secondary-button-background-color--hover, var(--cord-color-base-x-strong, #DADCE0));
--cord-inbox-launcher-background-color--active: 
var(--cord-secondary-button-background-color--active, var(--cord-color-brand-primary, #121314));
--cord-inbox-launcher-background-color--disabled: 
var(--cord-secondary-button-background-color--disabled, var(--cord-color-base-strong, #F6F6F6));
--cord-inbox-launcher-padding: 
6px 8px;
--cord-inbox-launcher-height: 
var(--cord-button-height-auto, auto);
--cord-inbox-launcher-gap: 
var(--cord-space-3xs, 4px);
--cord-inbox-launcher-border: 
var(--cord-button-border-none, none);
--cord-inbox-launcher-icon-size: 
var(--cord-space-l, 20px);
--cord-inbox-launcher-badge-background-color: 
var(--cord-color-notification, #0079FF);
--cord-inbox-launcher-badge-text-color: 
var(--cord-color-base, #FFFFFF);
--cord-inbox-launcher-inbox-z-index: 
2147483645;
--cord-inbox-launcher-inbox-offset: 
0px;
--cord-inbox-launcher-inbox-box-shadow: 
var(--cord-shadow-large, 0 var(--cord-space-4xs, 2px) var(--cord-space-m, 16px) 0 rgba(0,0,0,0.16));

Inbox

Name Default Value
--cord-inbox-background-color: 
var(--cord-color-base, #FFFFFF);
--cord-inbox-header-background-color: 
var(--cord-color-base, #FFFFFF);
--cord-inbox-content-horizontal-padding: 
var(--cord-space-2xs, 8px);
--cord-inbox-border: 
1px solid var(--cord-color-base-x-strong, #DADCE0);
--cord-inbox-border-radius: 
var(--cord-border-radius-medium, var(--cord-space-3xs, 4px));
--cord-inbox-height: 
auto;
--cord-inbox-width: 
auto;

Settings

Name Default Value
--cord-settings-background-color: 
var(--cord-color-base, #FFFFFF);
Cord LogoDocs
Go to the Cord Console