Recognizably Gem Clearly useful

Gem helps with everyday questions and tasks, gives projects a place on the web, and runs small apps in Telegram. Across those jobs, people should recognize the same controls, understand what is happening and know what to do next.

BotFather provides the interface foundation: surfaces, controls, corners and states. Gem adds its upright sparkle, custom pictograms, Noto Sans typography and plain language. These rules apply to the public pages and product interfaces.

Build on a graphite canvas, flat grouped surfaces, rounded controls and blue actions. The dark palette comes from BotFather’s public stylesheet; the light palette is Gem’s adaptation. Use the semantic tokens below so both themes stay consistent.

BotFather uses 12px × 15px button padding and 11px × 14px field padding. In Gem, controls must also meet the 44–48px target size. Keep keyboard focus visible, text selectable and browser zoom available.

The theme belongs to the person

In Telegram, use the host’s theme parameters and respond to themeChanged. Outside Telegram, follow prefers-color-scheme, including changes while the page is open. The selector here is for comparing the two palettes.

bg_color → --bg
secondary_bg_color → --bg2
section_bg_color → --surface
text_color → --text
hint_color → --hint
link_color → --link
accent_text_color → --accent
button_color → --button
button_text_color → --button-text
header_bg_color → --header

The dark status, dropdown, hover and accent-wash colors follow BotFather’s published variables. Light equivalents are adapted for Gem. Telegram theme parameters override the defaults inside Telegram.

Use Noto Sans for headings, body text and controls in both English and Russian. Establish hierarchy through size, weight and spacing; keep all type sans serif.

'Noto Sans', Arial, sans-serif

gem.bot/yourname

Noto Sans was selected with reference to Kogda’s style guide. Gem uses it for body text too. The font is self-hosted under the SIL Open Font License. It is the shared font for the brand book, builder kit and public pages.

The library contains 34 symbols with a shared stroke weight and rounded construction. It includes the original sparkle and 12 editorial symbols for writing, diagrams, charts and publishing.

34 icons

No matching icons. Try another name.

<svg class="icon" aria-hidden="true">
  <use href="#gem-memory" />
</svg>

.icon { width: 24px; height: 24px; color: var(--link); }

Do not replace this family with emoji or a mixed stock icon set. Telegram Stars may appear as ⭐ when describing the currency, not as a generic interface icon.

Use the shared spacing scale to keep related items close and separate distinct sections.

Public pages finish with Gem by Labs. The Mini App has no marketing footer. Native disclosure elements work well for FAQs and keep content readable without JavaScript.

Social cover composition: the headline is centered horizontally and vertically; the sparkle illustration sits above it, @gembot below. Use the same palette and type. Russian copy is rewritten naturally. This is a reconstructed layout specimen, not a claim to be the archived cover file.

Motion should settle

Keep decorative motion brief and optional. Avoid continuous sparkle loops. Remove animations and transitions for prefers-reduced-motion: reduce. Keep the content complete in the still frame.

Gem is the chat you turn to with a question, a half-written reply or something you keep forgetting. Write for that moment. Name the thing the person needs, say what Gem can do with it, and stop before the explanation becomes a pitch.

Give each product its own reason to exist

Assistant copy starts with something to ask or hand over. Project copy starts with the person’s work and the people who need it. App copy starts with something to make or use. The examples below show different situations in each language; they are writing samples, not live results.

Write Russian from the situation

Start again with what the reader wants to do. “Get more done” does not have to become «Успевай больше»: name the unfinished letter, the question or the forgotten appointment. Use «ты», short verbs and ordinary word order. Read the result aloud. If it sounds like a translated button or a presentation slide, rewrite it.

«Осуществить публикацию» → «Опубликовать». «Ваш запрос успешно обработан» → «Заметка сохранена». «Узнай, как использовать возможности платформы» → «Посмотри, как сделать приложение».

Keep the facts aligned across languages: availability, limits, prices and what happens after a click. English uses 1,000,000 Stars; Russian uses 1 000 000 ⭐. A different example or headline is welcome. A different promise is not.

Use this book for presentation decisions. Use the current product code and API documentation for routes, behavior and availability.

Keep core content readable without JavaScript. Respect reduced motion and system appearance changes. Loading, error and empty states should explain what happened without blaming the person.

Where this comes from

Primary reference: Telegram BotFather and its public stylesheet, inspected 20 October 2026. The app itself required an active Telegram session; measurements here come from the stylesheet, not an authenticated screen review. Gem’s 34-symbol library, public page patterns, Mini App conventions and writing rules complete the system.

Start new work from this reference. Check capability claims against the current product, refresh examples as it changes and extend the icon library with the same construction rules.

Published reference: gem.bot/style. This edition defines the brand book and reusable assets used by Gem’s public pages. Functional pages are checked separately against these tokens. The assets are vector/code originals; Noto Sans is bundled locally, with no external font service.