Chips are compact, interactive elements used to represent attributes, filters, selections, or status. They can include optional leading or trailing elements such as avatars, dots, or dismiss buttons.
Variants
| Variant | Description |
|---|
| Default | A label-only chip with no leading or trailing element. Use for simple tags or categories. |
| Dot | A chip with a small leading dot indicator. Useful for conveying status or category at a glance. |
| X Close | A chip with a trailing dismiss button. Use when the chip can be removed or deselected by the user. |
| Avatar | A chip with a leading avatar and label. Use to represent a person or entity. Only available in lg size. |
| Avatar + Close | A chip with a leading avatar, label, and a trailing dismiss button. Use when the chip represents a person and can be removed. Only available in lg size. |
Typography
Both sizes use the same text style: co.sys.typography.body.sm.medium.
| Property | Token | Value |
|---|
| Font family | co.sys.typography.body.sm.medium.font-family | Figtree |
| Font weight | co.sys.typography.body.sm.medium.font-weight | medium |
| Font size | co.sys.typography.body.sm.medium.font-size | 14px |
| Line height | co.sys.typography.body.sm.medium.line-height | 20px |
Note: Avatar-based variants (Avatar, Avatar + Close) are only available in lg.
Colors & States
Each color maps to a semantic role. All token values are listed per state below.
Neutral
Used for generic, non-semantic labels or filters.
Default
| Property | Token | Value |
|---|
| Surface | co.sys.color.surface.neutral.default | #f9f8f7 |
| Border | co.sys.color.border.neutral.default | #e0dcd9 |
| Text | co.sys.color.text.neutral.default | #5a5857 |
| Icon | co.sys.color.icon.neutral.default | #b3b0ae |
Hovered
| Property | Token | Value |
|---|
| Surface | co.sys.color.surface.neutral.strong | #f3f1f0 |
| Border | co.sys.color.border.neutral.default | #e0dcd9 |
| Text | co.sys.color.text.neutral.default | #5a5857 |
| Icon | co.sys.color.icon.neutral.default | #b3b0ae |
Info
Used to highlight informational content or brand-related tags.
Default
| Property | Token | Value |
|---|
| Surface | co.sys.color.surface.info.default | #eae3f2 |
| Border | co.sys.color.border.brand.subtle | #a990cb |
| Text | co.sys.color.text.info.default | #3b2e4c |
| Icon | co.sys.color.icon.info.default | #3b2e4c |
Hovered
| Property | Token | Value |
|---|
| Surface | co.sys.color.surface.info.strong | #d4c7e5 |
| Border | co.sys.color.border.brand.subtle | #a990cb |
| Text | co.sys.color.text.info.default | #3b2e4c |
| Icon | co.sys.color.icon.info.default | #3b2e4c |
Secondary
Used for secondary categories or alternative groupings.
Default
| Property | Token | Value |
|---|
| Surface | co.sys.color.surface.secondary.default | #f4f4fb |
| Border | co.sys.color.border.secondary.subtle | #bdc1ed |
| Text | co.sys.color.text.secondary.strong | #363b7d |
| Icon | co.sys.color.icon.secondary.subtle | #9ca1e3 |
Hovered
| Property | Token | Value |
|---|
| Surface | co.sys.color.surface.secondary.strong | #dee0f6 |
| Border | co.sys.color.border.secondary.subtle | #bdc1ed |
| Text | co.sys.color.text.secondary.strong | #363b7d |
| Icon | co.sys.color.icon.secondary.subtle | #9ca1e3 |
Success
Used to indicate a positive status or completed state.
Default
| Property | Token | Value |
|---|
| Surface | co.sys.color.surface.success.default | #edf3ec |
| Border | co.sys.color.border.success.subtle | #b5cfb4 |
| Text | co.sys.color.text.success.default | #414e40 |
| Icon | co.sys.color.icon.success.default | #414e40 |
Hovered
| Property | Token | Value |
|---|
| Surface | co.sys.color.surface.success.strong | #dae7d9 |
| Border | co.sys.color.border.success.subtle | #b5cfb4 |
| Text | co.sys.color.text.success.default | #414e40 |
| Icon | co.sys.color.icon.success.default | #414e40 |
Warning
Used to indicate a cautionary or at-risk state.
Default
| Property | Token | Value |
|---|
| Surface | co.sys.color.surface.warning.default | #ffe8db |
| Border | co.sys.color.border.warning.subtle | #ffa46f |
| Text | co.sys.color.text.warning.default | #66381e |
| Icon | co.sys.color.icon.warning.subtle | #ff8d4b |
Hovered
| Property | Token | Value |
|---|
| Surface | co.sys.color.surface.warning.strong | #ffd1b7 |
| Border | co.sys.color.border.warning.subtle | #ffa46f |
| Text | co.sys.color.text.warning.default | #66381e |
| Icon | co.sys.color.icon.warning.subtle | #ff8d4b |
Error
Used to indicate a negative status, error, or failure.
Default
| Property | Token | Value |
|---|
| Surface | co.sys.color.surface.error.default | #fad3dd |
| Border | co.sys.color.border.error.subtle | #ef7b98 |
| Text | co.sys.color.text.error.default | #891532 |
| Icon | co.sys.color.icon.error.subtle | #e94f76 |
Hovered
| Property | Token | Value |
|---|
| Surface | co.sys.color.surface.error.strong | #f4a7bb |
| Border | co.sys.color.border.error.subtle | #ef7b98 |
| Text | co.sys.color.text.error.default | #891532 |
| Icon | co.sys.color.icon.error.subtle | #e94f76 |
Design Tokens
| Property | Token | Value |
|---|
| Border radius | co.sys.border-radius.pill | 9999px |
| Border width | co.sys.border.width.normal | 1px |
| Padding (horizontal) | co.sys.spacing.md | 8px |
| Padding (vertical) | co.sys.spacing.xs | 4px |