Components
Input
Text inputs follow a 4-state model: default, focus, error, and disabled. The focus ring uses a 3px rgba blue glow. Errors are placed inline, directly below the field.
DefaultBorder: rgba(10,11,13,0.16)
FocusBorder: #2A6FDB + box-shadow: 0 0 0 3px rgba(42,111,219,0.18)
Must be a valid HTTPS URL
ErrorBorder: #dc2626 + error message below
Disabledopacity: 0.5 on entire field group
Specifications
Height
40–44pxRadius
8pxBorder (default)
1px solid rgba(10,11,13,0.16)Border (focus)
1px solid #2A6FDBFocus ring
0 0 0 3px rgba(42,111,219,0.18)Border (error)
1px solid #dc2626Label font
13px / weight 500Input font
14px / weight 400Disabled opacity
0.5 on field groupRules
- Error messages go below the field, inline — not in a global toast or banner.
- Disabled inputs maintain their size and label; never hide them from the layout.
- Focus ring is applied via box-shadow so it does not shift layout.
- Label is always visible — never use placeholder text as the only label.
- For grouped fields (e.g. phone + extension), apply error state to the specific field that failed.