Carbon Design System

Color

* Denotes a contextual color token that will change values based on the layer it is placed on.

Example of search

State	Element	Property	Color token
Focus	Field	border	`$focus`
Filled	Field text	text-color	`$text-primary`
	Close icon	fill	`$icon-primary`
Disabled	Field text	text-color	`$text-dsiabled`
	Label text (fluid)	text-color	`$text-disabled`
	Search icon	fill	`$icon-disabled`
	Field (fluid)	border-bottom	`$border-subtle` *

Search text should be set in sentence case, with only the first letter of the first word capitalized.

Element	Font-size (px/rem)	Font-weight	Type token
Field text	14 / 0.875	Regular / 400	`$body-compact-01`
Label text (fluid)	12 / 0.75	Regular / 400	`$label-01`

The width of the search field should appropriately fit the design and layout of content. The width may vary based on the grid and layout.

Element	Property	px / rem	Spacing token
Search icon Close icon	height, width	16 / 1	–
Small field	padding-left, padding-right	32 / 2	`$spacing-07`
Medium field	padding-left, padding-right	40 / 2.5	`$spacing-08`
Large field	padding-left, padding-right	48 / 3	`$spacing-09`

Structure and spacing measurements for default small search | px | rem

Structure and spacing measurements for default medium search | px | rem

Structure and spacing measurements for default large search | px | rem

The width of the search field should appropriately fit the design and layout of content. The width may vary based on the grid and layout.

Element	Property	px / rem	Spacing token
Label	margin-bottom	4 / 0.25	`$spacing-02`
Field	padding-left	16 / 1	`$spacing-05`
	padding-right	80 / 5	`$spacing-11`
	border	1px	–
	margin-top, margin-bottom	13 / .8125	–
Close icon	padding-right, padding-left	12 / .75	`$spacing-04`
Search icon	padding-right, padding-left	12 / .75	`$spacing-04`

Structure and spacing measurements for fluid search | px | rem

Search sizes | px / rem