Flat Input Fields
UI Components

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