Skip to content
Style Guide
v0.1.0

Basics

Logo and icon

Four lockups, two colourways, and a short list of rules that decide which one goes where. In an interface the logo usually appears exactly once, so it is worth getting right.

The four lockups

The Tomatico logo is a system, not a single file. Pick by the space you have and by what the surrounding screen has already established.

Tomatico stacked lockup: the tomato-bulb icon above the wordmark and the Smart Living tagline
Primary lockup Icon, wordmark and tagline stacked. The default for anything that introduces the brand: sign-in screens, splash screens, printed output, the top of a marketing page.
Tomatico horizontal lockup: the icon beside the wordmark
Horizontal lockup The same elements side by side. Use it in a masthead or any wide, short space where the stacked version would force the type too small.
The Tomatico wordmark with the Smart Living tagline
Wordmark Wordmark and tagline, no icon. Use where the icon already appears nearby — a browser tab, an app header, a document footer.
The Tomatico icon: a tomato and lightbulb fused around the letter T
Icon The mark alone. App icons, favicons, avatars, small spaces, and anywhere the name is already set in type.

Two disc versions also exist — the mark knocked out of a black circle, and set inside a white circle. Use them where a container is expected: an avatar slot, a circular app icon, a badge on a photograph.

The Tomatico icon in white inside a black disc
Roundel, dark White mark on a black disc. The default app icon.
The Tomatico icon in black inside a white disc with a thin outline
Roundel, light Black mark on a white disc, for dark backgrounds and photography.

Colourways

Every lockup ships in black and in white, both with transparent backgrounds. There is no third colourway. The mark is never grey, never tinted, never gradient-filled.

  • Black on white, on --tmt-grey-050, or on any light surface.
  • White on --tmt-black, on --tmt-grey-700 or darker, and on dark photography.

Mid-greys are the danger zone. On anything between --tmt-grey-300 and --tmt-grey-500 neither colourway has enough separation — put the logo on a solid light or dark panel instead of fighting the background.

Tomatico horizontal lockup in white on black
White on black

Clear space

The brand book's rule is "always maintain clear space around the logo". In interfaces, make that measurable: reserve a margin equal to the height of the icon (or the cap height of the wordmark, whichever lockup you are using) on all four sides. Nothing enters that margin — not text, not a border, not the edge of the viewport.

In the masthead that works out to at least --tmt-space-4 (16px) beside a 32px logo, which is why the masthead uses that value.

The exported PNGs are cropped tight to the artwork, so the clear space is yours to add with padding — it is not baked into the file.

Minimum size

Below these sizes the icon's interior detail — the T, the bulb's filament lines — closes up and the mark reads as a blob.

LockupMinimum on screenNote
Primary (stacked)64px wideBelow this the tagline is unreadable — switch to the horizontal lockup.
Horizontal120px wideBelow this, drop to the wordmark or the icon alone.
Wordmark96px wideThe tagline stops resolving first; that is the signal.
Icon24pxAt 16px use the favicon, which is drawn for that size.
16px and below is favicon territory. Do not scale the icon PNG down to favicon size — use the purpose-built files from Favicons.

Placing the logo in a product

One logo per screen, at the top, in the masthead. That is nearly always the whole answer. See Masthead for the markup.

The logo in the masthead links to the product's home or dashboard, and its alt text is the company name — "Tomatico" — not "logo" or "home". If the link's destination is not obvious from context, give the link an aria-label rather than padding the alt text.

Do and don't

Do

  • Use the approved files, unaltered.
  • Keep the icon's proportions — scale both dimensions together.
  • Maintain high contrast between the mark and its background.
  • Keep the tagline with the wordmark wherever the lockup includes it.

Don't

  • Change the icon's shape, or redraw any part of it.
  • Stretch, squash or rotate it.
  • Add effects — shadows, glows, outlines, bevels.
  • Recolour it, including tinting it grey to "soften" it.
  • Place it on a busy photograph without a solid panel behind it.
  • Rebuild the lockup by typesetting "TOMATICO" yourself.

Files

The web-ready PNGs used on this page live in docs/assets/brand/. They are transparent, cropped to the artwork, and sized for screens.

The full-resolution masters are in the logo kit on the Downloads page.

No vector master yet

Only raster artwork has been supplied. An SVG or EPS of the icon and wordmark would let the logo stay sharp at any size and be recoloured with currentColor. Worth requesting from the brand's designer — see About.