Switch to WilmingtonOverview
Stroke
Stroke styles create harmony and consistency when defining the edges of objects within a design. These stroke styles are most commonly used on frames.
Stroke Variants
Solid
Use to define the edge of an object with a solid line.
| Hex | Width | Class | |
|---|---|---|---|
Green / Primary / Base | #007856 | 1px | .u-border-solid--primary |
White | #FFF | 1px | .u-border-solid--white |
Gray / Base | #BABABA | 1px | .u-border-solid--gray |
Gray / Light | #D7D7D7 | 1px | .u-border-solid--gray-light |
Gray / Lighter | #EFEFEF | 1px | .u-border-solid--gray-lighter |
Dashed
Use to define the edge of an object with a dashed line.
| Hex | Width | Class | |
|---|---|---|---|
Green / Primary / Base | #007856 | 1px | .u-border-dashed--primary |
Gray / Light | #D7D7D7 | 1px | .u-border-dashed--gray-light |
None
Use to remove an existing stroke.
Design Environment
Dashed strokes typically communicate that an object is a placeholder, such as in the Upload Field pattern.