System ColorDesigner InfoEngineer Info

Bits & Pieces

These components are crafted as blueprints; using only HTML/CSS. Any functionality provided in the examples is available solely with these technologies unless otherwise mentioned. Components can be enhanced with JavaScript but the core functionality is based on web standards which allows them to be wired into any framework with ease.

Designer Info

The term "Blueprint" comes from the Salesforce Lightning Design System.

Engineer Info

Markup decisions

One of the key factors in ensuring that we can include interactivity without JavaScript is by setting HTML elements in a deliberate structure to allow for CSS selectors to act with conditional logic.

For example, in the interactive components below, the <input> element found within is typically the first child of the element's container. This allows the CSS sibling selectors (+, ~) to help determine what elements exist in the container and make visual changes based on those elements.

In a simple case, the "Checkbox Hack" is used to open/close the select-summary component by targeting the input[type="checkbox"]:checked selector and affecting the visibility of the sibling content container. You should also be aware that in some browsers, you can affect the input using the keyboard and tabbing to this element will normally put the element into the viewport within a scrollable container.

Button

Buttons are a quintessential part of every design system as they invoke the user to take an action.

Designer Info
  • Horizontal spacing is 1rem (16px), vertical spacing is .5rem (8px). This provides a large target area for both cursor targetting and various sizes of tapping instruments.
  • Text is set as all uppercase and medium weight (500), font-size is decreased slightly (.9em) to counter this emphasis. Line-height at 1.5.
  • Borders are always applied, and are set to the background color unless specified. This keeps alignment with other buttons which may have a visible border.
  • Border-radius is set at 2px, matching the radius of other containers in the system.
  • Margins are not applied directly to the component's style but are instead dictated by the layout and should adhere to spacing guidelines.
  • Buttons come in one size that relates to the font. Emphasis is expected to be shown through the use of "primary" and "secondary" versions. More variations are not necessary as this does not provide a consistent experience.
  • When focused, a dashed outline should appear around the button.

default

The default button is provided without standout colors as it expects to target anciliary actions beyond primary and secondary buttons. This also designed to all buttons uses the default styles as a base to keep them consistent. The further variations of the button will come from additional attributes.

Designer Info
  • Background color is set as transparent, foreground color inherit's from the container.
  • Hover interaction sets the background color to a low contrast of the container, foreground color is now an accent color.

Default button


type:primary

The primary button is designed to draw attention to the main action we expect a user to take.

Designer Info
  • Background color is set as an accent color, foreground color is explicitly set as a color to compliment the accent color.
  • Hover interaction sets the background color to a low contrast of the container, foreground color is now an accent color.

Primary Button


type:secondary

The secondary button should only be used along side a primary button when a second choice is available to the user.

Designer Info
  • Background color is set as transparent, border color is set as the accent color, foreground color inherits from the container.
  • Hover interaction sets the background color to a low contrast of the container, foreground color is now an accent color.

Secondary Button


disabled

The disabled state of the button reduces the opacity and sets the mouse cursor to show a disabled state.

Designer Info
  • Opacity is set to .4 for all disabled buttons, cursor is changed to not-allowed.
  • Hover and focus interactions no longer activate.

Disabled Button

Colorfield

The colorfield component is highly specific to the needs of the design system pages. It is used to allow a user to choose a color and compute an output from it.

Designer Info
  • The input area always displays the selected color as a background, the text color will always contrast the selected color. The styles should otherwise mimic button styles except for font, which will inherit from the body and not change case.
  • The final value can either be a color (which should be colored in a similar way to the input) or a single value with no color applied. The styles should balance with the input in terms of spacing and alignment.
  • While only the input area may look interactive, the entire component can be tapped to change the value of the input.
  • When the component is focused, a dashed line should surround the entire component.
  • The delta between the input and value is never a color but instead a represented difference between the input and the final value.
  • Labels should be all uppercase, medium weight, and .9rem from the root font size to counteract the change in case.
  • All other text should match body font properties.
  • When the horizontal layout will not fit inside of its container, each part will stack vertically. Label first then the display below.
Engineer Info

To achieve the layout shifting when the component is too wide for its container, the Fab Four technique is used. This snaps the width at container breakpoints by forcing negative widths to refer to a minimum width. More information can be found in the article Responsive CSS without Media Queries.

Select-Summary

The select-summary component is a hybrid of a few components found in design systems which show and hide content.

Designer Info
  • The content area does not flyout and appear on top of other content; it will push outside content down.
  • There is no default maximum height, a maximum height can be applied based on the content provided if it is believed to help the user experience. It should noted that this may include an additional scrollbar which could be challenging to navigate for some users. One scrollbar (for the page) is much easier to manage typically.
  • Each version allows for control via the spacebar to open and close the content drawer.
  • Using native HTML elements within the dropdown will also make the component accessible by using the tab key on focusable elements. JavaScript is required to provide additional functionality such as arrow key navigation for options.
  • The summary will typically display as a label unless it is meant to display one of the values within the content area (ie, type:select). Label styles are all uppercase, medium weight, a font-size of .9rem to balance the previous styles.
  • The content drawer can be styled however is appropriate to match the rest of the system in color, typography, spacing, et cetera.
  • The menu type does not have a visible container itself but is expected to exist along side siblings in a larger group.
  • The select type is designed to provide affordance to other dropdowns found across the web. It can be enhanced to provide a typeahead experience using a textfield.
  • The summary type is designed to be unique from the other types to suggest the content inside is prepared differently. This also allows for icon variations to help with clarifying content and visibility. The icon should reflect what will happen once interaction occurs. For example when a summary is collapsed, the icon should display an visual indicating that it can be shown. Similarly, when expanded it should show a visual indicating it can be hidden.
  • The icon in the label that displays state or helps clarify content should be focusable; indicated by a dashed outline.

type:select

When in the "select" configuration, the component acts like a stylized <select> component. Additional JavaScript is required for the value to appear in the value slot on selection.

Option 1keyboard_arrow_downkeyboard_arrow_down

Example of a JavaScript enhanced version; value changes on selection:

Pick a fruitkeyboard_arrow_downkeyboard_arrow_down

type:menu

When in the "menu" configuration, the component is prepared to hold navigational items. No additional JavaScript is required for this component to work.

GroupaddaddChild link 1 Child link 2 Child link 3

type:summary

When in the "summary" configuration, the component acts similarly to native HTML5 <details> and <summary> components. No additional JavaScript is required for this component.

Want to hear a joke about construction?visibilityvisibility_off

I’m still working on it.

Textfield

The textfield is composed of a single input and label with an optional button to accompany the component.

Designer Info
  • To provide a differentiation between other components in the system, the textfield is displayed as a box with a low contrast background to its container and a single line beneath.
  • The label follows the same pattern as other labels; all uppercase, medium weight and .9rem font size for balance. It is found within the same box as the input to show the relationship. All textfields must have a label; the placeholder is not a substitute.
  • The text entered into the input should match body text styles.
  • When focused, a dashed outline should appear around the input area. It should not include the label.
  • Any additional elements included with the input should not be visually within the input. For example, a button attached to the input can coexist in the same horizontal space but must be visually separated from the input itself.
LabelLabel Label Label Label

Toggle-Range

This hybrid component was designed to share styles between toggle switches and ranges merely by changing the type of input you are using within the component.

Designer Info
  • The knob feature of the component is invisibily larger than the design to provide a large target area for both cursor targetting and various sizes of tapping instruments.
  • Text for the label is set as all uppercase and medium weight (500), font-size is decreased slightly (.9em) to counter this emphasis. Line-height at 1.5.
  • Labels are aligned left to the page in which the component exists. This is unique to other interactive inputs as most have 1rem (16px) of space between the label and container edge. This is because other interactive elements contain other visual motifs that span to the edge of the page while the toggle-range does not.
  • There is 1rem (16px) of space between the control and the surrounding elements.
  • When focused, a dashed outline appears around the visual control. It will not include the label.

Toggle

When using the component like a checkbox, the spacebar will toggle the switch.

Designer Info
  • When in use as a toggle, the background color of the track should change to the accent color, indicating an "on" state.
Checkbox toggleEngineer Info

Checkbox vs. range

The component was originally engineered to keep the input[type="range"] element for both toggles and ranges and only shortening the component (with a few other specific state attributes) since they were crafted to look similar. Using input[type="checkbox"] differs by requiring the label to be present, however this shouldn't be a concern as the label should always be present for any interactive element.

Unfortunately, using input[type="range"] requires much more JavaScript to get a working toggle that would otherwise be done with the "Checkbox Hack".


Range

The range component allows the user to choose a value between a minimum and maximum value. It is composed of a native HTML input[type="range"] element and is interactive as such.

Designer Info
  • The output value for the range could include an icon to better indicate how this value is affecting the system, ie.: a speaker icon to denote volume changes. Otherwise, the text is set to the inherited paragraph style.
Range3