Back to palettes

Konkret Signals

Constructivist and decisive: three flat primaries used like highlighters against pure black and white, ruled by a visible construction grid. Clean, never muddy.

neutral with three hot primary signals, primary red.

Download .css

Colours

3 signature colours, 5 neutrals, 4 semantic.

Signature

Signal Red#E30613
Signal Blue#0057B8
Bright Yellow#FFD400

Neutrals

bg#FFFFFF
surface#FFFFFF
text#000000
muted#585858
border#000000

Semantic

success#007A3D
warning#FFD400
error#E30613
info#0057B8

primary-colors, swiss-grid, constructivist, flat-signals, pure-black-white, high-contrast

Using it

Do

  • Use pure black ink on a white ground as the default; let the three primaries enter only as signals.
  • Spend one primary per component — a status, a signal bar, a corner marker — never a surface fill.
  • Keep semantic colours quiet, on outline chips and small dots paired with text.

Avoid

  • Do not fill a surface with a primary or stack multiple primaries inside one component unless it is segmented data.
  • Do not introduce a fourth accent colour.
  • Do not cool the neutrals toward blue-grey or warm them toward cream; keep them pure.

Try a remix

Drop Konkret Signals onto any UI language and swap the art style. The preview recolours live.

UI language
Palette
Konkret Signals
Art style