v1.0.0 · Deep Tech / Cyber

Telegram Bot
Design System

Canonical UI tokens, components, and brand guidelines for the
Frisky Developments ecosystem — bots, mini-apps & portals.

Explore Tokens GitHub →
design-system.initialize
❯ Frisky Design System loaded ❯ Tokens: 47 design tokens ❯ Components: 12 primitives ❯ Telegram API: inline ready ❯ Listening on channel...
section 01

Design Tokens

Every color, type scale, and spacing unit — consumable across all Frisky repos.

Background & Surface

--fds-bg #050505
--fds-bg-glass rgba(255,255,255,0.05)
--fds-bg-glass-dark rgba(0,0,0,0.4)

Text

--fds-text-primary #ffffff
--fds-text-body #cbd5e1
--fds-text-technical #34d399

Accent Colors

Accent Gradient #c084fc → #34d399
Purple #c084fc
Emerald #34d399
section 02

Components

Reusable UI primitives for Telegram bots, mini-apps, and web portals.

Buttons

Button primaries use the accent gradient + premium glow

Status Badges

● Online ● Degraded ● Offline ● AI Active

Glass Card

connection.status ● Live
latency 42ms
node sfo3-01
status Operational

Terminal Feed

bot.resolver
❯ Resolving master stream...
❯ KVS source identified: sfo3-edge
❯ Quality: 1080p · Size: 142MB
❯ Uploading to Telegram... done
section 03

Telegram Bot UI

Inline keyboards, bot message cards, and mini-app surfaces — designed for the Telegram canvas.

⬡
FriskyBot BOT
stream.resolved ● PRO

Master Stream Resolved

source kvs://sfo3-edge/stream_01
quality 1920×1080 · 14.6s resolve
expires in 23h 42m
Inline Keyboard Layout
section 04

Framework Evaluation

Built for Cloudflare Workers + Pages. Zero-config deployment via Wrangler.

⚡

Cloudflare Workers

Edge-deployed API endpoints for Telegram webhooks, bot logic, and mini-app backends. Sub-ms cold starts, global distribution.

deploy.cmd
npx wrangler deploy
📄

Cloudflare Pages

Static hosting for design system docs, mini-app SPAs, and landing pages. Git-integrated CI/CD with branch previews.

deploy.cmd
npx wrangler pages deploy public
🎨

Design Tokens

CSS custom properties + JSON tokens. Import into any framework — React, Vue, or plain HTML. Single source of truth for the Frisky ecosystem.

import.css
@import '/css/tokens.css';
🤖

Telegram Bot API

Design tokens map directly to Telegram's inline keyboard, message, and mini-app specs. MarkdownV2-ready for bot message formatting.

bot.message
InlineKeyboardMarkup
+ ParseMode.MarkdownV2