FOLLOW US!

Stay up to date on latest trands and cool link to get inspired

subscribe

We share all studio videos on our YouTube Channel

We have great stuff to share!

Subscribe to our mailing list to get great stories, event & updates.We won't junk your mail :)
Oops,our robot think the email address is wrong, please double check
Raised Input Fields
UI Components

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