16 px gutters
Design from 375 px. Keep controls at least 44 px tall and body text at 16 px.
Gem / Interface guide
Small screens
Shared rules
One visual language for the assistant, the apps people make, and the tools behind them.
Room for the essentials
48 px bar
Build on the left. App title in the middle. Share on the right. Safe top inset sits above it.
Telegram colors
Use the person’s theme. Outside Telegram, follow the operating system. No theme toggle.
Ready to ship
Client library integration
// Load gem-defaults.css after the existing injected defaults.
// Update these on theme and viewport changes.
const root = document.documentElement;
root.dataset.theme = gem.dark ? 'dark' : 'light';
root.style.setProperty('--gem-safe-top', gem.safe.top + 'px');
root.style.setProperty('--gem-safe-bottom', gem.safe.bottom + 'px');
// Existing hooks stay unchanged:
// #gem-bar · #gem-screen · .gem-btn · .gem-btn2
// Use the host’s existing share handler and keyboard shortcuts.The library supplies Telegram’s --tg-theme-* variables. Keep its current no-zoom viewport and input handling. The CSS adds no dependencies and uses system fonts.
Cards in a conversation
Plain text and Telegram buttons. The typography belongs to the chat client.
Weather in Dubai
32 °C · Clear
Cooling to 28 °C this evening.
Updated 5 min ago
32 °C · Clear
Cooling to 28 °C this evening.
Updated 5 min ago
Gem-Pong
Play someone new or take on the computer.
Play someone new or take on the computer.
Bot text / no Markdown
Weather in Dubai 32 °C · Clear Cooling to 28 °C this evening. Updated 5 min ago [ ↻ Update (2) ] [ Save ] [ Share ]
Use the card question as the first line. Keep the latest answer below it, followed by its age. The number belongs to the Update button. While loading: ◌ Updating…; after success: ✓. Keep the old answer if an update fails. App cards have Open instead of Update.
Yours, or saved
Cards holds saved answers and app cards, including apps made by other people. An app card offers Open and Share.
Apps holds apps you own, marked Yours. Open, Edit, Admin and Delete stay together. Play is a small row below that list, with the same three showcases as the landing page.