[[TOC]]

NOTE: Examples defined in this page come from ibm.com form

What needs to be identified are the following elements:

• Label
• Text Field
• Dropdown
• Text Area

In case one of this elements were missing on template form, make sure of replace it with the element tag to see its behavior. Example: Convert input on textarea

Id	Image	Element name
1		Label
2		Text Field
3		Dropdown
4		TextArea

Do's

• font sizes, weight, line heights
• letter-spacing
• border sizes

Dont's

• Colors of any kind (borders, background, text): will be done in a different section
• paddings & margins: will be done in a different section
• heights & widths: should not have width or height. widths will be defined in layout elements.

Make sure you check not only Desktop but other views in case properties change!

Property	Value
font-size	0.875REM
letter-spacing	0.1 REM
font-weight	400
line-height	1.125REM

Make sure you check not only Desktop but other views in case properties change!

Property	Normal	Focus	Incomplete
outline	2px	2px	2px
font-size	0.875REM	0.875REM	0.875REM
letter-spacing	0.1 REM	0.1 REM	0.1 REM
height	3REM	3REM	3REM
width	100%	100%	100%
border(s)	none	none	none

Make sure you check not only Desktop but other views in case properties change!

Property	Normal	Focus
outline	2px	2px
font-size	0.875REM	0.875REM
letter-spacing	0.1 REM	0.1 REM
height	3REM	3REM
width	100%	100%
border(s)	none	none

Make sure you check not only Desktop but other views in case properties change!

Property	Normal	Focus
outline	2px	2px
font-size	0.875REM	0.875REM
letter-spacing	0.1 REM	0.1 REM
height	3REM	3REM
width	100%	100%
border(s)	none	none

To have in mind:

• list all values in an excel, grouped by property
• Convert values to rem to have a single measurement
• remove duplicates
• Order them from low to high

	1	2	3
font-size	1rem	2rem	2.5rem
line-height	1	1.1 rem	1.5
weight	300	400	300
letter-spacing	0.1 REM	0.1 REM	0.1 REM
height	3REM	3REM	3REM
width	100%	100%	100%
border(s)	none	none	none