Skip to main content

TMA design guidelines

info

Starting with version 6.10, Telegram updated the Mini App color palette by fixing some old colors and adding new ones.

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

Changelog​

  1. 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. There should be no changes on Android.

New colors. Many new colors have been added with most being noticeable on Android. The examples focus on Android but apply to all platforms.

  1. Telegram header colors has become available for Mini Apps.

  1. accent_text_color is now available for highlighting accent elements in your apps. Previously, everyone used the less suitable dark link_color.

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

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

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



  1. A reasonable question arises: how should link_color and hint_color be used now?

Use hint_color for hint sections under different sections. For backgrounds like secondary_bg_color, use link_color.

See also​