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
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