SKY UX uses various line styles to bound, divide, and highlight content. The lines are designed to maintain visual hierarchy regardless of how complex pages become or how many nested containers they include.
As with other types of formatting or decoration in SKY UX, use lines minimally. Remember that white space and positioning can group or highlight content without extra subdivisions or boundaries.
SKY UX uses 3 generalized line styles that you can apply with a SASS mixin.
The light separator is a very light gray, single-pixel line that subdivides content within a container. Do not use it at the edge of a container. Only use it when it is adjacent to white space on both sides. SKY UX uses this style for:
- Subsection dividers within containers such as tiles
- Top boundaries for action bars on modals
- 1px solid #e2e3e4
- When this line style subdivides content within a container, use a 15px margin on both ends.
The dark separator is a moderate gray, single-pixel line. This heavier stroke holds up between two different colors, which makes it ideal for borders and boundaries. It also frequently separates active content from passive content. For example, it can separate a toolbar from the content that the toolbar acts on. SKY UX uses this style for:
- Borders on buttons
- Top and bottom boundaries for toolbars in areas such as tiles and grids
- Column dividers for header rows in grids
- Borders for cards
- Built-in data visualization axes
1px solid #cdcfd2
This line style separates members of a homogenous set. It separates the rows in grids
. The dotted style lowers its visual weight, and the moderate gray allows it to work with or without row striping on the list rows. It stretches to the full width of the rows (not the width of the container that holds the rows).
1px dotted #cdcfd2
In general, the component should handle the style of corners. If you need to directly specify the corners of an element, the rule of thumb is to use rounded corners for interactive elements and square corners for containers.
Rounded corners are primarily for interactive elements such as buttons
to distinguish them from non-interactive elements.
In general, the component should handle the use of shadows. Interface designs should be flat aside from these components and use other techniques to create visual separation.
Shadows provide visual offsets for elements such as dropdowns
that float over other elements.
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3)