Link copied to clipboard!
Mobile navigation button - closed state

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

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)

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)

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-primary
--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-primary
--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

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

Tooltips

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

Annotations

Name Default  
--cord-annotation-pin-color
--cord-color-brand-primary
--cord-annotation-pin-outline-color
--cord-color-base
--cord-annotation-pin-z-index
2147483643
--cord-annotation-pin-rotate
0deg
--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

Floating sidebar launcher

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-gap
4px
--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

Thread list

Name Default  
--cord-thread-list-gap
24px
--cord-thread-list-padding
8px

Page presence

Name Default  
--cord-page-presence-avatar-size
20px

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-gap
4px
--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

Settings

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