Live CSS Editor
Try interacting with our live thread. Customize the CSS variables to match the theme of your app.
Clone our Figma templates to use our components in your designs
Colors
The default colors used to theme all components.
Light mode
Dark mode
Base
Basic background for most elements
Base-strong
Background for highlighted elements, e.g. annotation
Base-x-strong
Hover states and borders
Content-primary
Most content, e.g. message text
Content-secondary
Supplementary content, e.g. timestamps
Content-emphasis
Links, button content and usernames
Brand-primary
Primary buttons
Notification
Notifications, e.g. unread message
Alert
Destructive elements
Success
Completed actions
Launcher
Floating sidebar launcher
Avatar style
The shape of your avatar.
Avatar style
Border radius of avatars
Border radius
The border radius for relevant elements.
Border-radius
Medium border radius, small and large radii are half and double respectively
Font
The font used across all Cord components.
Font
By default Cord components inherit the font-family from your page
Drop shadows
The box-shadows applied to certain elements, generally as hover states.
Small shadow
Most common shadow
Large shadow
Shadow for larger elements, e.g. sidebar modals
Focus shadow
The focus applied on elements, generally as focus states.
body {
}
Copy your styles
Copy these styles and add them to your CSS