Design essentials

Graphic devices

A small set of shapes that make a layout feel like Medicspot without the logo doing all the work.

Ribbons

Thick, rounded strokes that sweep through a panel and get cut off by its edge.

Arc
Hook
Loop
Ring

Do

  • One or two ribbons per panel, always cropped by the edge
  • Round ends, stroke roughly a sixth of the panel's short side
  • A tint of the panel's own colour: paler on pastels, the second navy on navy
  • Purple as the one accent ribbon, on navy only
  • Behind a cut out person, so they sit in front of it

Don't

  • Ribbons floating whole in the middle of a panel
  • Ribbons behind body copy or small text
  • More than two colours of ribbon in one view
  • Gradients, shadows or outlines on a ribbon
  • Thin lines. If it looks like a line, it is too thin

Highlights

A hand drawn circle or a single underline, on the one word in a headline that carries the idea.

A real person by your side.

This time you won’t be doing it alone.

  • One highlight per headline, never more.
  • Circles in lilac or yellow. On navy the lilac circle; on white or pastel the yellow one.
  • Underlines in purple, on light backgrounds only.
  • Drawn loosely, with a slightly uneven stroke. A perfect ellipse or a ruled line is not the device.
  • The stroke stays thin, about a fortieth of the cap height. It is a pen mark, not a ribbon.

Rounded corners

Every panel, card and photograph has rounded corners. It is the quietest thing that makes a layout ours.

20 px on screen
About 5 mm on A5
About 10 mm on A4

Scale the radius with the piece: about a fiftieth of the shorter side is a good start. Buttons are full pills. Small tags and inputs use a tighter radius so they still read as rounded. Nothing has a sharp corner except the page itself.

What is not a device

  • The brandmark as a pattern, a watermark or a frame
  • The stethoscope drawn on its own
  • Photographs with coloured overlays or duotones