One brand for every
screen in the hotel

Versions

Each version belongs to one kind of background. Pick by the surface, never by taste.

Please don't

• Recolor the windows. Lit ones are always white.

• Light other windows. Only the n is lit.

• Stretch, squash or crop the mark.

• Recolor the building. It is always cobalt.

• Nomero

  Retype the wordmark or capitalize it.

• Rotate it or add glow, shadow or gradients.

On a hotel's own site

Guests book with the hotel, not with us, so Nomero stays small: one badge in the footer, in the hotel's language.

Работает на Nomero

Ramps

Use roles, not ramp steps. The ramps exist so roles have somewhere to point. Click any step to copy it.

Paper to ink

Cobalt

Roles

What components actually use. Contrast is measured against the page background of each theme, or against the fill a role sits on.

Status

Status marks come from the floor plan legend: squares for rooms, circles for money, always next to a word, so nothing depends on color alone.

Scale

Sizes come from the Tailwind scale and nothing else. Weights are 400, 500, 600 and 700 for headings; no italics, no black weights.

How we write numbers

Thousands take a narrow no break space, and the ₸ sign follows the number after a no break space. Columns of figures use tabular-nums.

Surfaces

• Backgrounds are flat. No gradients, no noise, no frosted glass on content.

• Borders go all the way around or not at all. No accent stripe on one side of a card.

• Only two shadows exist: the overlay shadow under menus, dialogs and toasts, and the soft cobalt glow under one featured sheet. Everything else is separated by a hairline.

• Night surfaces come only from #000000, #131209, #181818, #1F1F1F, #272727 and #313131.

Current item

• Animate transform and opacity only. Never top, left, width or height.

• No bounces, no spinners. Loading is a skeleton shaped like the content that is coming.

• With reduced motion turned on, movement becomes a plain fade.

• The room grid never animates while someone is reading it; only the stay that just changed moves.

• One y axis per chart. Two measures with different units become two charts.

• Labels, values and legends use text colors, never the series color.

• Status colors (paid, unpaid, attention) are never reused as series colors.

Before and after

Words we don't use

• революционный
• инновационный
• уникальный
• бесшовный
• супер
• effortless
• supercharge
• world class
• cutting edge

Generating images

Paste these into Higgsfield or any image model and keep the anchors: daylight, white architecture, one cobalt accent, documentary framing, no text. Generate in the Higgsfield app; the connector available to Claude can browse past generations but cannot create new ones.

Getting the files into an app

1. Publish brandbook/ as its own repo, hotelerkz/brand, with dist/ committed.

2. Add it to each frontend as a git submodule at brand/, the way backend-v2 already carries the booking widget, and turn on submodules for that app in Dokploy.

3. Import the CSS once in the app entry and remove the app's own color, font and radius definitions.

@import "tailwindcss";
@import "../brand/dist/fonts.css";
@import "../brand/dist/tokens.css";
@import "../brand/dist/tailwind.css";

/* then: bg-bg text-fg bg-action
   bg-stay-inhouse rounded-control
   font-mono ease-brand */

// tailwind.config.js
import nomero from './brand/dist/tailwind.preset.cjs'
export default {
  presets: [nomero],
  content: ['./index.html', './src/**/*.{vue,js}'],
}

/* src/assets/main.css */
@import '../../brand/dist/fonts.css';
@import '../../brand/dist/tokens.css';

@import "../brand/dist/fonts.css";
@import "../brand/dist/tokens.css";

body { background: var(--nm-bg); color: var(--nm-text); font-family: var(--nm-font-sans); }
.book { background: var(--nm-action); color: var(--nm-on-action); border-radius: var(--nm-radius-pill); }

/* Night theme: class="dark" or data-theme="dark" on <html> */

Why files in a repo, not a brand portal

Code