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