TMA design guidelines

info

Starting with Telegram app version 6.10, Telegram updated the color palette for Mini Apps (TMA) by fixing some old colors and adding new ones.

For context, let's look back at the update history.

Changelog

• bg_color and secondary_bg_color have been updated.

Reasons for these changes

• These colors were originally intended for page backgrounds, not UI controls.
• To maintain consistency, they have been updated.
• section_bg_color was introduced to color the backgrounds of different sections and cards.

To enhance your app’s appearance, adjust how you use color variables.

The example above clearly shows what will change on iOS; for the bg_color/secondary_bg_color update, there should be no changes on Android.

1. New colors. Many new colors have been added, with most noticeable on Android; the examples focus on Android but apply to all platforms.

2. Telegram header colors have become available for Mini Apps.

3. accent_text_color is now available for highlighting accent elements in your apps. Previously, developers used the less suitable link_color.

4. For all secondary cell labels, use subtitle_text_color to create more contrast and improve accessibility.

5. A new token section_header_text_color is now available for section headers of cards.

6. For cells that trigger a destructive action, use destructive_text_color instead of a custom color.

7. Use hint_color for hint text under sections; on backgrounds like secondary_bg_color, use link_color.

See also

• Original source

Was this article useful?