Skip to content
Style Guide
v0.1.0

Patterns

Bilingual and RTL

Tomatico works in Arabic and English. One stylesheet serves both, because every rule is written with logical properties — but there are things CSS cannot decide for you.

One layout, two directions

There is no tomatico-ui-rtl.css. The system uses CSS logical properties throughout, so setting dir="rtl" on the root element mirrors the entire interface — padding, margins, borders, alignment, the sidebar's active marker, the select's chevron, the switch's knob.

<html lang="ar" dir="rtl">
That is the whole switch

The RTL button in this guide's header flips every page, and each example on this site has its own RTL toggle. Use them — a mirrored layout is the fastest way to find a hard-coded left.

Logical properties

The rule for anyone writing CSS in a Tomatico product: if a property name contains "left", "right", "top" or "bottom", there is a logical version and you should be using it.

Instead ofWrite
margin-left / margin-rightmargin-inline-start / margin-inline-end
padding: 8px 16pxpadding-block: 8px; padding-inline: 16px
border-leftborder-inline-start
left: 0 / right: 0inset-inline-start: 0 / inset-inline-end: 0
text-align: lefttext-align: start
width / heightinline-size / block-size
border-radius: 0 4px 4px 0border-start-end-radius, border-end-end-radius

Flexbox and grid are already logical — flex-direction: row follows the writing direction, and justify-content: flex-start means the inline start. That is why most layouts mirror for free.

What mirrors and what does not

This is the part CSS cannot decide. Mirroring an icon that should not be mirrored is just as wrong as failing to mirror one that should be.

Mirror these

  • Layout: columns, sidebars, drawers, alignment.
  • Directional arrows: next, previous, back, forward.
  • Progress and stepper direction.
  • Text alignment and list bullet position.
  • A speech bubble's tail; an undo or redo arrow.

Never mirror these

  • The Tomatico logo and icon.
  • Clocks, and anything showing clockwise motion.
  • Photographs and illustrations of real things.
  • Media controls — play still points in the direction of playback.
  • Object icons: a gear, a trash can, a camera, a lightbulb.
  • Numbers, and Latin text embedded in Arabic.
  • Checkmarks.

The system gives directional icons an opt-in class rather than mirroring everything:

<!-- Flips in RTL -->
<svg class="tmt-btn__icon tmt-btn__icon--directional">…</svg>

<!-- Stays as drawn -->
<svg class="tmt-btn__icon">…</svg>
Directional icons

Mixed content

Real Tomatico screens are not purely one language. A device is called "Nest Hub", an energy figure is "3.2 kWh", a support reference is "TMT-4821". Dropping these into Arabic text without marking them produces genuinely wrong output — the bidirectional algorithm puts the punctuation in the wrong place.

تم توصيل جهاز Nest Hub بنجاح، ورقم المرجع هو TMT-4821. استهلك الجهاز 3.2 kWh هذا الشهر.

Latin inside Arabic
  • Wrap Latin runs in <span dir="ltr">: brand names, product names, URLs, email addresses, file names, code, reference numbers.
  • Use dir="auto" for anything a person typed — a device name, a room name, a comment. The browser infers the direction from the first strong character, which is right far more often than guessing.
  • Do this in database-driven output too. A device list is exactly where mixed direction shows up.

Typography in Arabic

Covered in full under Typography. The three rules that matter most:

  • Set lang, not a font class. The system switches to IBM Plex Sans Arabic from the lang attribute, which works on a whole page or a single word.
  • Line height rises to 1.7. Arabic diacritics need the room, and the Latin 24px line height clips them at 16px.
  • No letter-spacing, ever. It breaks the script's connections. That rules out .tmt-eyebrow and --tmt-tracking-wide for Arabic — use a Medium weight at the small size to get the same "label" feel.

Side by side

The same component, both directions. If anything differs beyond the mirroring, it is a bug.

Front door lock

Locked

Last changed 14:20

English · LTR

قفل الباب الأمامي

مقفل

آخر تغيير 14:20

Arabic · RTL

Switching language

  • Put the switch in the masthead, in the same place on every screen.
  • Label it in the language it switches to, and give that label its own lang attribute so it is pronounced correctly.
  • Stay on the same page. Send the person to the Arabic version of what they were reading, not to the home page.
  • Remember the choice — but let the URL win over the stored preference, so a shared link opens in the language it was shared in.
  • Do not use a flag to represent a language.

RTL review checklist

Run this before any bilingual screen ships.

  • Flip to dir="rtl". Does the layout mirror completely, or is one element stuck?
  • Every arrow: does it point the right way? Every non-directional icon: is it unmirrored?
  • The logo: unmirrored.
  • Numbers, times, dates, emails, URLs: still reading left to right, punctuation in the right place.
  • Tab order: still follows the visual reading order, right to left.
  • Text: no clipping from the taller line height; no letter-spacing on Arabic.
  • Buttons and fields: no fixed widths that a longer label overflows.
  • Scrollbars, drawers and off-canvas panels: entering from the correct edge.
  • Reviewed in place by someone who reads Arabic.