One field shape across the product: 40px tall, 9px 12px padding,
10px radius, 13px text. Form fields take the stronger #D1D5DB hairline;
search and filter fields take the lighter #E5E7EB.
States
Enter a valid email address.
Locked after the agency is appointed.
Select
The same field with appearance: none, 32px of right padding
and a chevron drawn as an inline SVG data URI at right 12px center.
Search
A field with a leading icon: left padding grows to 36px and the border
softens to #E5E7EB. Everything else is unchanged.
Specs
| Property | Value |
|---|---|
| Height | 40px · box-sizing: border-box |
| Padding | 9px 12px · 9px 14px 9px 36px with a leading icon |
| Radius | 10px · 8px on the compact edit form |
| Border | 1px #D1D5DB on form fields · 1px #E5E7EB on search and filter fields · rgba(255,255,255,.18) / .12 in dark |
| Surface | #FFFFFF · rgba(255,255,255,.05) in dark |
| Text | 13px / 400 · #1F2937 · placeholder #9CA3AF |
| Outline | none — the product does not draw a focus ring on inputs |
| Label | 13px / 600 · display: block · margin-bottom 6px |
| Invalid | border #DC2626 + box-shadow 0 0 0 1px rgba(220,38,38,.15) |
| Error text | 11px · #DC2626 · margin-top 4px |
| Select chevron | 12×12 inline SVG, stroke #9CA3AF, at right 12px center · padding-right 32px |
Two error reds exist in the product: the field border uses #DC2626, while one older form renders its message in #EF4444. Use #DC2626. |
| Inputs carry no focus ring. Do not add one to the DS that the product does not draw. |