Style Guide v0.1.0

Tomatico UI

The design system behind Tomatico's digital products — websites, web apps, dashboards and internal tools. One place for the colour, type, spacing and component decisions, so every screen looks like it came from the same company.

Smart living, made simple.

Tomatico brings intelligence, comfort and security into everyday life through connected, thoughtful and sustainable solutions. This guide translates that promise into interface decisions.

Get started Browse components

Who this is for

Designers and developers building anything with the Tomatico name on it. If you are deciding a colour, a font size, a corner radius or the wording of an error message, the answer should be here. If it is not, that is a gap worth reporting — see About.

The guide assumes you have read the Tomatico Brand Guidelines v1.0. It does not replace them: the brand book governs logo, print and marketing, and this guide governs interfaces. Where the two overlap, the brand book wins.

How it fits together

Everything is driven by CSS custom properties in a single stylesheet, tomatico-ui.css. Components never hard-code a colour or a size; they reference a semantic token, and the token resolves differently in light and dark mode. That is what makes a theme switch a one-attribute change rather than a rewrite.

Brand layer Five locked colours, two typefaces, one pattern. Straight from the brand book. System layer Semantic tokens, the 4px space grid, the type scale, focus and motion rules. Component layer Buttons, forms, tables, cards and the rest, built only from tokens. Pattern layer Components assembled into solutions: validation, bilingual layouts, accessibility.

Two things to know first

The palette is monochrome. Tomatico's approved colours run from white to near-black with nothing in between but grey. Interfaces get their hierarchy from weight, space and contrast rather than hue. A small set of functional colours exists for status only — never for decoration. See Colour.

Every component is bidirectional. Tomatico operates in Arabic and English, so the stylesheet is written with CSS logical properties throughout. There is no separate RTL sheet — set dir="rtl" and the layout mirrors. Use the RTL button in the header to check any page in this guide. See Bilingual and RTL.

Status

This is version 0.1.0 — the first release. The tokens and the components documented here are stable enough to build on, but names may still change before 1.0. Pin the version you build against.

Not yet covered

Modals, tooltips, toasts, pagination, date pickers, charts and the icon library. See the roadmap.