Basics
Pattern
A repeating field of circuit lines, sensors and leaves, derived from the icon. It is a background element and nothing else — the brand book is explicit that it must never compete with content.
What the pattern is for
The Tomatico pattern is a visual language for the smart-living ecosystem. Its curves come from the tomato and the bulb; its lines represent a connected network; its dots stand for data moving through it. The brand book gives it four characters: subtle, consistent, scalable and flexible.
In an interface it does one job: it makes an otherwise empty area recognisably Tomatico. Sign-in screens, empty states, hero panels, cover pages, the back of a card. It is not a texture to spread across a working screen.
The three tiles
Three tiles ship with the system. They are interchangeable — pick by density, and use one per screen.
--tmt-pattern-image default.
Opacity is the rule that matters
The brand book gives a recommended range of 5% to 15%, and that is the one number to remember. Below 5% it is invisible and you have paid for an image nobody can see. Above 15% it starts competing with the text on top of it.
Using it in CSS
Add .tmt-pattern to any container. The pattern is drawn in a
pseudo-element behind the content, so it never interferes with the text on top or with
pointer events.
No devices yet
Add your first device to start controlling your home from here.
<div class="tmt-pattern">
<p class="tmt-h3">No devices yet</p>
<p class="tmt-small tmt-muted">Add your first device to start controlling your home from here.</p>
<button class="tmt-btn tmt-btn--sm" type="button">Add a device</button>
</div>| Class or token | Effect |
|---|---|
.tmt-pattern | Draws the pattern behind the container at 8%. |
.tmt-pattern--subtle | Drops it to 5%. |
.tmt-pattern--strong | Raises it to 15% — the maximum. |
.tmt-pattern--inverse | Black surface with a white pattern, for dark panels. |
--tmt-pattern-image | Swap the tile: url("../brand/pattern-02.png"). |
--tmt-pattern-size | Tile size, default 480px. Larger reads calmer. |
--tmt-pattern-opacity | Direct control. Keep it between 0.05 and 0.15. |
On dark panels
Smart living, made simple.
The pattern inverts to white on the black surface.
<div class="tmt-pattern tmt-pattern--inverse">
<p class="tmt-h3">Smart living, made simple.</p>
</div>Rules
Do
- Use it as a background, at low opacity, so content stays the focus.
- Keep clear space — leave room around text and key elements.
- Maintain good contrast between content and background.
- Use only the approved brand colours for it: black on light, white on dark.
- Use one tile per screen.
Don't
- Run it behind dense content — tables, forms, long articles.
- Push it past 15% opacity.
- Recolour or tint it.
- Mix two tiles in one layout.
- Animate it, or make it parallax.
Weight
The tiles are 1024px PNGs, around 130–190KB each. That is fine for one decorative background and wasteful if you load all three. Reference only the tile you use, and consider dropping the pattern entirely on data-heavy screens — it earns its place on empty and introductory ones.
The masters are 4500px and live in the pattern kit on the Downloads page, for print and large-format work.