Design system gianlucacaico.com →
MenuClose

The standard · No stock photos

Imagery

Three kinds of image, all drawn in the system's own colours, glass and type. Each one shows real content from where it sits, never decoration.

Post artwork

One illustration per post, used three ways: the banner under the title, the thumbnail in post lists and the featured card, and the image people see when the post is shared.

1 2
1200 × 630, the shape of a link preview
  1. Keep what matters in the middle 80%. The featured card trims the sides.
  2. Keep the bottom-left corner clear. The Featured label sits there.
  3. Draw the post's actual idea. Ink background, colour fields, glass panels and Inter, using only words, figures and labels from the post.
  4. Check it small. It has to read as a thumbnail as well as a banner.

Project pictograms

Each project's key artefact, drawn for the right side of its card at full height and cropped by the card's edges. The eye goes from the client's name, to the pictogram's focal point, to the labels, with no frame or tile around it. The tints are under Colour, in Artwork.

1 2 3
240 × 156, the right of the card at full height (sample pictogram)
  1. Name corner stays clear: x under 60, y under 48. Check any name longer than "Generation Life" at phone width.
  2. Label corner stays clear: x under 110, y over 112.
  3. One focal point, fully inside. Draw big and let context run off the right, top or bottom edge, fading in from the left. A half-cut icon reads as a mistake.
  4. White, then one tint. White for main shapes, white at 20 to 45% for secondary ones, and exactly one tint for the insight, picked to contrast with the card.
  5. No words or figures. Only what the card itself already says.

Client names

Project cards write the client's name as text, top left, rather than showing its logo. A logo needs the client's formal permission, so the written name is the default.

  • Name as text. 18px, bold and white, top left of the card's art, clear of the pictogram.
  • Logos only with formal permission. If a client ever gives it: use the brand's own white version, never recoloured, stretched or redrawn, about 18 to 32px high, with the name as alt text.