Raised Input Fields
Fields State

Inline Status Messages
Redlines


Input Fields Properties
Redlines


Implementation Examples
Redlines


Raised Input Field Properties
Regular

Bottom Line
Thickness:
1px
Color:
65% Dim Gray
Label Text
Style:
Body 16px
Color:
55% Black
Spacing:
16px right padding
Hover

Bottom Line
Thickness:
1px
Color:
Dim Gray
Label Text
Style:
Body 16px
Color:
55% Black
Spacing:
16px right padding
Focus

Bottom Line
Thickness:
1px
Color:
Brand Blue
Label Text
Style:
Body 16px
Color:
55% Black
Spacing:
16px right padding
Input Text
Style:
Body 16px
Color:
Black
Spacing:
8px bottom padding, 8px top padding
Filled

Bottom Line
Thickness:
1px
Color:
65% Dim Gray
Label Text
Style:
Body 16px
Color:
55% Black
Spacing:
16px right padding
Input Text
Style:
Body 16px
Color:
Black
Spacing:
8px bottom padding, 8px top padding
Disabled

Bottom Line
Thickness:
1px
Color:
20% Black
Label Text
Style:
Body 16px
Color:
20% Black
Spacing:
16px right padding
Error

Bottom Line
Thickness:
1px
Color:
Crimson Negative
Label Text
Style:
Body 16px
Color:
55% Black
Spacing:
16px right padding
Input Text
Style:
Body 16px
Color:
Black
Spacing:
8px bottom padding, 8px top padding
Tip Text
Style:
Meta Content 14px
Color:
Dim Gray
Color:
8px top padding
Icon
Color:
Crimson Negative
Warning

Bottom Line
Thickness:
1px
Color:
Amber
Label Text
Style:
Body 16px
Color:
55% Black
Color:
16px right padding
Input Text
Style:
Body 16px
Color:
Black
Spacing:
8px bottom padding, 8px top padding
Tip Text
Style:
Meta Content 14px
Color:
Dim Gray
Spacing:
8px top padding
Icon
Color:
Amber
Approved

Bottom Line
Thickness:
1px
Color:
Dim Gray
Label Text
Style:
Body 16px
Color:
55% Black
Spacing:
16px right padding
Input Text
Style:
Body 16px
Color:
Black
Spacing:
8px bottom padding, 8px top padding
Tip Text
Style:
Meta Content 14px
Color:
Dim Gray
Spacing:
8px top padding
Icon
Color:
Green Positive
Valid

Bottom Line
Thickness:
1px
Color:
Dim Gray
Label Text
Style:
Body 16px
Color:
55% Black
Color:
16px right padding
Input Text
Style:
Body 16px
Color:
Black
Spacing:
8px bottom padding, 8px top padding
Tip Text
Style:
Meta Content 14px
Color:
Dim Gray
Spacing:
8px top padding
Icon
Color:
Green Positive