Masthead — Tomatico UI Style Guide

The default masthead

A black bar is the most recognisable thing Tomatico can put on a screen — the brand book is black-first throughout. It is 64px tall, spans the full width, and its contents are constrained to the 1200px container.

Masthead

<header class="tmt-masthead">
  <div class="tmt-masthead__inner">
    <a class="tmt-masthead__brand" href="/">
      <img class="tmt-masthead__logo"
           src="/assets/brand/wordmark-white.png" alt="Tomatico">
      <span class="tmt-masthead__product">Home</span>
    </a>

    <div class="tmt-masthead__actions">
      <button class="tmt-btn tmt-btn--ghost tmt-btn--sm"><span lang="ar">العربية</span></button>
      <button class="tmt-btn tmt-btn--secondary tmt-btn--sm">Sign in</button>
    </div>
  </div>
</header>

Parts

Class	Purpose
`.tmt-masthead`	The black bar. Put it inside a `<header>`.
`.tmt-masthead__inner`	Constrains content to the container and sets the 64px height.
`.tmt-masthead__brand`	The logo link. Points at the product's home.
`.tmt-masthead__logo`	The white wordmark, 32px tall.
`.tmt-masthead__product`	The product name, after a thin divider.
`.tmt-masthead__actions`	Pushed to the inline end. Language, account, notifications.

Buttons placed inside the masthead invert automatically — ghost and secondary buttons switch to white text and lighter borders, and the focus ring turns white. You do not need a modifier for that.

Which logo

Use the white wordmark when the product name follows it, and the white horizontal lockup when it stands alone — the icon is what makes the bar recognisable at a glance, so do not drop it unless the wordmark is carrying the product name.

Give the image an alt of "Tomatico". Do not write "Tomatico logo" — the word "logo" is noise when it is read aloud. The product name is separate text, so it is announced as part of the same link.

See Logo and icon for clear space and minimum sizes.

With primary navigation

For a product with more than about four destinations, put the navigation in its own bar below the masthead rather than crowding it in beside the logo. The masthead stays about the brand and the account; the nav bar is about the product.

Masthead with navigation

The language switch

A bilingual product needs a way to change language, and it belongs in the masthead where it is in the same place on every screen.

Label it in the language it switches to — the button says "العربية" in the English interface and "English" in the Arabic one. A person who cannot read the current language still recognises their own.
Mark the label with its own lang attribute so it is pronounced correctly: <span lang="ar">العربية</span>.
Keep the person where they are. Switching language reloads the same page in the other language, not the home page.
Do not use a flag. Arabic is not a country.

Sticky behaviour

The masthead may stick to the top of the viewport. If it does, remember that anything you link to with an anchor will scroll underneath it — give your section headings scroll-margin-block-start equal to the masthead's height, as this guide does.

.app__header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--tmt-layer-nav);
}

:target,
.app__section {
  scroll-margin-block-start: 4rem; /* the masthead height */
}

Sticky masthead

Accessibility

The masthead is a <header> — a banner landmark, so assistive technology can jump to it.
A skip link comes before it in the DOM, so keyboard users are not forced through the logo and every action on every page. .tmt-skip-link is hidden until it takes focus.
Icon-only actions carry a hidden text label.
Notification counts are announced, not just shown — pair the badge with visually hidden text like "3 unread notifications".

Do and don't

Do

Keep it identical on every screen of a product.
Use the black surface — it is what makes the brand recognisable.
Limit it to four actions.
Link the logo to the product home.

Don't

Put a primary button in the masthead — it competes with the page's own action.
Add a search field, a breadcrumb and a nav all into the same bar.
Change its colour per section or per product.
Use the black lockup on it.