CSS variables — also known as ‘CSS custom 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 CSS variables specific to it, listed on the component’s documentation page.
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
Decide how you want to use and customize the components by adding them to your designs. Get the Figma template →
CSS Custom Properties
Default colors
| The default colors used to theme all components. |
| Name |
Default |
Description |
--cord-color-base |
#FFFFFF |
Basic background for most elements |
--cord-color-base-strong |
#F6F6F6 |
Background for highlighted elements, e.g. annotation |
--cord-color-base-x-strong |
#DADCE0 |
Hover states and borders |
--cord-color-content-primary |
#696A6C |
Most content, e.g. message text |
--cord-color-content-secondary |
#97979F |
Supplementary content, e.g. timestamps |
--cord-color-content-emphasis |
#121314 |
Links, button content and usernames |
--cord-color-brand-primary |
#121314 |
Primary buttons |
--cord-color-notification |
#0079FF |
Notifications, e.g. unread message |
--cord-color-alert |
#EB5757 |
Destructive elements |
--cord-color-launcher |
#F4FFA0 |
Floating sidebar launcher |
--cord-color-success |
#71BC8F |
Completed actions |
--cord-color-focus |
#CAE3F1 |
Focused input fields |
Font
| The font used across all Cord components. |
| Name |
Default |
--cord-font-family |
System font |
Border radius
The border radius for relevant elements. By default, small and large take a multiple of medium. |
| 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
| The box-shadows applied to certain elements, generally as hover states. |
| 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) |
There are three types of button: primary, secondary, and tertiary. Define the colors for each type across different states (hover, active, etc.). |
| 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
| Define avatar shape, as well the appearance when profile photos are missing. |
| 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 provide extra context, and are displayed when hovering an element. |
| Name |
Default |
--cord-tooltip-background-color |
--cord-color-brand-primary |
--cord-tooltip-content-color |
--cord-color-base |
Annotations
| Define the appearance of the annotation pins that will appear on your application’s pages. |
| 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 |
Styles specific to the <Sidebar /> component. |
| 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 |
The default floating launcher used by <cord-sidebar />, i.e. if you don’t set show-launcher to false. |
| 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 |
The dedicated <cord-sidebar-launcher /> component, if used instead of the default launcher above |
| 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
Styles specific to the <Thread /> component. |
| 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
Styles specific to the <FloatingThreads /> component. |
| 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 |
Styles specific to the <SelectionComments /> component. |
| Name | Default |
| ——————————– | ——— | —————————————————- |
Thread list
Styles specific to the <ThreadList /> component. |
| Name |
Default |
--cord-thread-list-gap |
24px |
--cord-thread-list-padding |
8px |
--cord-thread-list-height |
auto |
Page presence
Styles specific to the <PagePresence /> component. |
| Name | Default |
| ——————————– | ——— | —————————————————- |
Inbox launcher
Styles specific to the <InboxLauncher /> component. |
| 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
Styles specific to the <Inbox /> component. |
| 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
Styles specific to the <Settings /> component. |
| Name |
Default |
--cord-settings-background-color |
--cord-color-base |
In this section
