Flat Input Fields
Field States

Inline Status Messages
Redlines


Input Fields Properties
Redlines


Implementation Example
Redlines


Flat Input Fields Properties
Regular

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

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

Bottom Line
Thickness:
1px
Color:
Brand blue
Label Text
Style:
Meta Content-Light 14px
Color:
45% Black
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:
Meta Content-Light 14px
Color:
45% Black
Input Text
Style:
Body 16px
Color:
Black
Spacing:
8px bottom padding, 8px top padding
Disabled

Bottom Line
Thickness:
1px
Color:
20% Black
Input Text
Style:
Body 16px
Color:
20% Black
Color:
12px bottom padding
Error

Bottom Line
Thickness:
1px
Color:
Crimson Negative
Label Text
Style:
Meta Content-Light 14px
Color:
45% Black
Spacing:
4px bottom padding, 4px top padding
Input Text
Style:
Body 16px
Color:
Black
Spacing:
8px bottom padding, 8px top padding
Tip Text
Style:
Meta Content 14px
Color:
Crimson Negative
Spacing:
8px top padding
Icon
Color:
Crimson Negative
Warning

Bottom Line
Thickness:
1px
Color:
Amber
Label Text
Style:
Meta Content-Light 14px
Color:
45% Black
Spacing:
4px bottom padding, 4px top 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:
Meta Content-Light 14px
Color:
45% Black
Spacing:
4px bottom padding, 4px top 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:
Meta Content-Light 14px
Color:
45% Black
Spacing:
4px bottom padding, 4px top 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