Preview image. Unlock full-res
Functional color-swatch reference showing four primary colors as labeled boxes paired with directional arrow icons on a dark background.
Summary
Functional color-swatch reference showing four primary colors as labeled boxes paired with directional arrow icons on a dark background.
Visual description
A grid layout on a dark charcoal background displays four horizontal rows, each pairing a light gray rounded-rectangle label (containing the color name in bold black sans-serif) with a solid colored square on the right bearing a contrasting directional arrow or symbol. The colors are primary and vibrant: red with an up arrow, green with a right arrow, blue with a circle, and yellow with a left arrow. A footer line reads "Civil Medium" and "Superior Type" in small gray type, suggesting this is a typographic or design-system specification sheet.
Key takeaway
Pairing labels with color swatches using directional icons to hint at function or state. The use of simple, bold geometric shapes and high contrast to make color differences immediately legible. The grid structure as a scalable template for design-system documentation.
Reuse notes
Excellent reference for design-system color documentation, component libraries, or type-specimen sheets. The icon pairing works for indicating user interactions (up/down/left/right), priority, or intent. Clean, straightforward aesthetic that translates well to printed spec sheets or digital brand guidelines.
