UI preview of content/display patterns built from interface components in other column.

Interface components

CSS classes should apply styling for MOST elements across the site. (example)

logo variations: light, dark, square, rectangular

color palette: base/brand – primary, secondary, accent; grays/contrasts, messaging – success, warning, error, info. Scaffolding elements (body bg, text color, headings, links, links-hover, links-dark-mode)

labels: within buttons, within lists, within controls, in forms

collections: cards, blocks, images – usually in a row or grid layout; tables are better for collections of text.

boxes: content separated from rest of the interface by a visible border or background color; can include a brief descriptive title (sentence-style capitalization, no ending punctuation other than a colon for settings boxes)

lists: bulleted, grouped table

buttons: default (secondary color), primary, primary-alt, secondary, secondary-alt, accent, accent-outline, disabled; segmented buttons (groups in a single bar- like sub navigation); chevron buttons

typography: font families, body paragraph, small text (usually italicized), hierarchical (headings and subtitles), links (+visited, +active, +focus), inline alerts (success, warning, error, info)

iconography for common actions and UI controls. if using a collection from a 3rd party site, link to.

form elements: text inputs, textarea, drop-downs (active, disabled states), radio buttons, checkboxes,