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