HMR (همر) — "Your Smart Mobile Advisor." An AI-powered conversational assistant that guides Iranian users across the full lifecycle of a mobile phone — with a deliberate focus on hardware: choosing a new device, buying used safely, troubleshooting faults, understanding components, and picking accessories. Bilingual (English + Persian, RTL-aware). Ships as a website (Astro, Cloudflare Pages, hmrbot.com) and an Android app (Flutter).
This design system unifies the visual language across both surfaces: dark neon-blue glassmorphism. It exists so any agent or designer can produce on-brand HMR interfaces, marketing pages, chat surfaces, and assets for either product.
HMR is not a general chatbot. Its moat is a localized, continuously-updated knowledge base (RAG) of the Iranian mobile market — real prices, registry (رجیستری) status, model-specific defects, counterfeit-part detection, accessory compatibility, and warranty rules. The product is positioned as an advisor, not a decision-maker: when it doesn't know, it says so and refers the user to a human expert.
Five core pillars (all under one theme — hardware):
- New phone purchase guidance — pick the right device for a budget/need.
- Used phone purchase guidance — fair-price checks, inspection checklists, registry status, counterfeit-part detection.
- Troubleshooting & fault diagnosis — describe a symptom in plain language, get a likely cause + safe fix or a referral.
- Mobile hardware education — translate spec sheets (camera, RAM, chipset, display, battery) into decisions.
- Accessory guidance — the right case, glass, charger, earphones for a specific model.
Surfaces: a marketing site (/, /blog, /about, /contact, /privacy, /disclaimer) + a chat experience (/chat) on the web, and a native Android app (login → conversation history → chat) with Google Sign-In.
Behind the scenes: the chatbot engine runs on FlowiseAI (Agentflows v2 / multi-agent) via an admin dashboard at srv.hmrbot.com, connected to OpenRouter-hosted models (Gemini for generation, OpenAI embeddings, Google reranking), on a Dockerized Ubuntu VPS.
- Local codebases (attached, read-only):
hmr-design-system/— a prior Claude Design export containing the recreated brand tokens, components, and a website UI kit.hmr-chatbot-flutter-design/— a Claude Design mock of the Flutter chat screen, plus the actualhmr_flutter/Flutter source (screens, theme, widgets).- Raw brand assets:
hmr-logo.png/svg,hmr-avatar.png,HMR-AI-Chat.html, PSD source files.
- GitHub repositories (explore these further to extend or verify this system):
- wikigoo/HMR-Astro — the website source (Astro + Cloudflare Pages).
src/styles/tokens/*.cssis the ground truth this system's color/type/spacing/effects tokens were verified against;src/components/{core,chat,brand}/mirrors this system's component groups. - wikigoo/HMR-Flutter — the Android app source.
lib/theme/app_theme.dartis the ground truth the Android UI kit's colors/type were checked against;lib/screens/{login,conversations,chat}_screen.dartare the source for the three recreated screens. - wikigoo/HMR-VPS — server/deployment (Docker, Ubuntu 24.04, Nuremberg). Not a design source, but useful context for the "Server" component of the system.
- flowiseai/flowise — the open-source chatbot-engine framework HMR's admin dashboard (
srv.hmrbot.com) is built on. Not skinned by this system (it's an internal ops tool, not a branded HMR surface) — explore it if you need to design admin/ops screens.
- wikigoo/HMR-Astro — the website source (Astro + Cloudflare Pages).
- Logo: the original supplied mark (
assets/hmr-logo-original.png) was recreated in-brand asassets/hmr-logo.svg+assets/hmr-lockup.svg— see "Logo" under Iconography below. - Fonts: the full Vazirmatn family (regular → black + variable) was provided and is self-hosted here.
The reader may not have access to the GitHub repos or local codebases, but they are recorded here so the lineage is traceable — explore them further for anything this system doesn't cover.
Voice. Confident, plain-spoken, protective. HMR talks like a knowledgeable friend who happens to be a mobile expert — never salesy, never hypey. The throughline is trust and honesty: the product openly admits the limits of what it knows.
Person. Addresses the user directly as "تو/شما" ("مشاور هوشمند موبایل شما", "قبل از خرید"). Speaks about itself as HMR or "دستیار" — not first person in marketing copy. The chat persona uses first person ("من همر هستم…") when introducing itself, but sparingly.
Persian only. Every surface — website and app — is fully Persian, fully RTL. There is no language toggle and no English UI copy. Latin characters appear ONLY for: the brand wordmark "HMR", code/URLs (hmrbot.com), and model names/numbers that are inherently Latin (iPhone 13, Samsung A54, Redmi Note 12) — these sit inline with Persian text using correct bidi (Latin substrings render LTR within an RTL line; don't force the whole line LTR for one model name). Vazirmatn is the only UI typeface; it renders at relaxed line-height (--lh-relaxed / height: 1.8-1.9 in Flutter) for readability. Space Grotesk is used narrowly — the "HMR" wordmark and standalone Latin numerals/labels — never for Persian sentences.
Tone examples (real product copy, Persian):
- Hero: "با اطمینان موبایل انتخاب کن" ("Choose your mobile with confidence") — "خرید، تعمیر و شناخت گوشیات را با راهنمایی بومی و بهروز انجام بده."
- Chat greeting: "من همر هستم، مشاور هوشمند سختافزار شما. چه کمکی از دستم برمیآید؟" ("I'm HMR, your smart hardware advisor. How can I help?")
- Honesty guardrail: "وقتی اطلاعات کافی نداشته باشم، صادقانه میگویم و شما را به یک کارشناس مورد اعتماد ارجاع میدهم."
- Registry safety advice (real chat answer): a price range, then a plain-language warning about buying unregistered phones, with a concrete threshold ("only if at least 15% cheaper") and a way to verify (
#06#dial code) — Persian numerals throughout.
Casing. Sentence case for headings and body. UPPERCASE only for small eyebrows/badges and section labels, always with letter-spacing. Never all-caps for long text.
Numerals. Real market specifics are a feature, not slop — prices in Tomans, model names (iPhone 13, Samsung A54, Redmi Note 12), registry status. Persian numerals (۰-۹) are used in the Android app's timestamps and prices. Use specifics where they build trust; don't invent stats.
Emoji. Not used in the core product voice. (One legacy exception exists in the Flutter source — a 🚀 on a sidebar CTA — treat it as an outlier, not a pattern to repeat.)
Vibe. Premium-but-accessible, techy, calm. Dark, glowing, spacious. The feeling is "a trustworthy expert in a sleek interface" — not a flashy gadget store.
Overall motif: dark neon-blue glassmorphism over a living neural field. Deep navy page/screen base, ambient blurred glow blobs, translucent glass cards with thin cyan hairlines, neon gradient accents, and (on the website) a faint animated particle graph behind everything.
Color. Page/screen base is near-black navy (--hmr-navy-950 #05070f). The brand's "light" is a neon ramp: cyan #00d4ff → electric blue #2f6bff → indigo #6366f1. Cyan is the signature (hairlines, glows, links, online-status dot); blue carries CTAs; indigo cools the far end of gradients. Pink #ff2d78 and amber #f6b73c survive only as rare accents (amber also flags disclaimers in the app). Text is cool off-white #eaf2ff/#fff with #b9c6e4/#8a96b3 secondary/muted. Status: green #34e0a1 (online), amber #f6b73c (warning/disclaimer), red/pink #ff5470 (danger, e.g. "clear history"). Confirmed identical in both the Astro tokens and the Flutter AppTheme — this is one palette, not two.
Type. Display & Latin → Space Grotesk (geometric, techy). Persian/body → Vazirmatn (self-hosted variable, all weights). Display is fluid on web (clamp(2.3rem, 6vw, 4rem)), bold-to-black weight, tight line-height. Body is 0.95rem/14px at 1.65-1.8 line-height depending on density; Persian prose relaxes further (1.8-1.9) for legibility. Gradient text (web only) is reserved for hero/section emphasis via .hmr-gradient-text.
Spacing & layout. Web content column maxes at 1100px with 24px gutters; reading pages narrow to ~720px. A 4-based spacing scale (--space-1…--space-24). Generous vertical rhythm on web (64–96px section gaps); the app is a single full-bleed screen per view, no scroll chrome beyond the message list.
Backgrounds. Never flat, but never a costly live canvas by default either. Web: navy base → a cheap static two-blob CSS radial-gradient (body::before in ui_kits/website/index.html) is the default texture; the neural particle canvas is an opt-in accent layered on top (see Performance budget below). App: navy base → three radial glow blobs (cyan top-right, indigo bottom-left, blue center) at 10-22% opacity, no particle canvas (cost/battery). No photographic hero imagery; no repeating textures.
Glass. The defining surface: translucent navy/white fill + backdrop-filter: blur + a 1px cyan or white hairline + soft outer shadow. Web: rgba(18,26,48,0.55) fill, cyan hairline rgba(0,212,255,0.18). In the app, and in the website's chat message list: bubbles/cards use a solid translucent fill (~54-72% alpha) without backdrop-filter, deliberately, to avoid per-frame blur cost inside a scrolling list — a documented performance trade-off (see AppTheme comments and ChatBubble.jsx). Composer bars, sidebars, nav, and dialogs — static, non-scrolling chrome — do use blur.
Performance budget (hard requirement, both surfaces). HMR must stay smooth on a mid-range Android phone over a slow connection:
- At most 1-2 blurred (
backdrop-filter) layers on screen at once, and never inside a scrolling list. A scrolling message list uses solid fills; the composer/header/sidebar above or below it may blur. - Glows and shadows are subtle, few, and static — reuse the small shadow/glow set in
tokens/effects.css; don't add new large or animated glows. - The neural particle background is an opt-in accent, off by default.
assets/particles.jsships capped at ~26 nodes, pauses viavisibilitychangewhen the tab is hidden, and does nothing at all underprefers-reduced-motion(the canvas is hidden, no JS runs). A page opts in with<body data-particles-on>; otherwise use the cheap static two-blob CSS gradient inui_kits/website/index.html(body::before) — prefer that over the canvas unless the particle effect is the specific thing being showcased. - Fonts: Vazirmatn is self-hosted and subset to the weights actually used (Regular/Medium/SemiBold/Bold/Black + variable), loaded with
font-display: swap; only the primary weight should be preloaded in production. Space Grotesk loads from Google Fonts for Latin-only use (wordmark, numerals) — keep it off the Persian-copy critical path.
Corner radii. Soft, consistent across both products: chips/links 8px, icon wells/contact cards 12px, CTAs/stat tiles 14px, feature cards/glass panels 18-20px, chat bubbles 22px (tailed corner set to 0), phone chat frame 39-46px. Nothing sharp; nothing fully circular except avatars, FABs, and the logo.
Cards. Glass fill + hairline + rounded (14-22px) + resting shadow (soft, black, large). On web, cards lift on hover (translateY(-4px)) and the hairline brightens with a cyan glow bloom. The app has no hover state (touch-only) but uses the identical resting shadow/radius/hairline language.
Shadows & glows. Two flavors everywhere: neutral depth shadows (black, soft, large) for resting elevation, and neon glow shadows (cyan, used on focus/CTAs/online-status/new-chat FAB/send button). Composer focus ring and CTA glow both key off the same cyan-alpha formula.
Borders. Hairline-thin (0.8-1px). Default is low-opacity cyan or white; a slightly stronger cyan marks focus/active. No heavy or dark borders anywhere.
Motion. Calm and springy-soft. Standard ease is cubic-bezier(0.22,1,0.36,1) at 0.2-0.4s on web. In the app: typing-indicator dots bounce gently (1.2s loop), the send button spins while loading, a copy-toast fades up, sidebar/dialogs slide or blur in. No bounce, no aggressive spin beyond the loading spinner. Everything degrades to static under prefers-reduced-motion on web. Only animate transform/opacity — never animate filter/box-shadow/layout properties on a loop.
Hover / press (web). Hover = brighten (hairline + glow) and lift. Press = settle back down. Links brighten from secondary text toward cyan. Press (app, touch). Buttons dim to ~70% opacity while busy; no scale/shrink effect is used.
Imagery vibe. Cool, dark, luminous — neon-on-navy. No photography anywhere in either product today; if introduced, it should be cool-toned and dark.
- Web: Lucide line icons (~1.75-2px stroke, rounded caps) —
https://unpkg.com/lucide@latest, standardizing a handful of bespoke inline SVGs found in the original theme. - App: Flutter's built-in Material icons (
Icons.menu_rounded,Icons.forum_outlined,Icons.add_rounded,Icons.arrow_back_ios_new,Icons.delete_sweep_outlined,Icons.shield_outlined,Icons.logout_rounded,Icons.arrow_upward_rounded, …) at 18-24px, tinted cyan or off-white. In this system's HTML recreation these are redrawn as matching-weight inline SVGs (seeui_kits/app/screens.jsx) since Material Icons isn't a web-embeddable font here — same stroke/fill logic, not a new icon system. - Treatment: icons live in glass wells — a rounded-12px tinted-cyan square with the icon stroked in cyan or off-white. Wells are deliberately translucent so the background reads through.
- Google "G" glyph: the app draws Google's four-color mark with a
CustomPainterrather than shipping a PNG/SVG asset — this system's HTML recreation matches that with inline flat SVG paths. - Brand mark:
assets/hmr-logo.svg(icon) andassets/hmr-lockup.svg(icon + wordmark) — see "Logo" below. - Emoji: not used as iconography. Unicode dingbats: avoid. Use Lucide (web), Material icons (app), or the brand mark.
No usable original logo mark was supplied at the start of this system — the earlier reference files (a draft PNG, and PSDs under UI/PSD/) were superseded when the real mark arrived: a robot-face glyph (a ring "head" with two antenna knobs and a visor band holding two round eyes), supplied as hmr-logo-source.png. This is now the canonical mark — do not revert to the earlier blue-orb recreation.
Since the source is a flat, clean raster (not a hand-drawn approximation, and not reconstructed from memory), it was cropped tight to content and re-exported at fixed sizes rather than hand-traced: assets/hmr-icon-{48,192,512}.png (square, app/favicon use), assets/hmr-icon-{1x,2x,3x}.png (60/120/180px, Flutter launcher densities), assets/favicon.png, and assets/hmr-mark-240.png (natural aspect ratio, ~1.19:1, for flowing layouts). assets/hmr-logo.svg and assets/hmr-lockup.svg are lightweight SVG wrappers around that raster (icon-only, and icon + "HMR" wordmark + tagline as live <text> respectively) so the mark can be dropped into HTML at any size via one file. assets/hmr-logo-source.png is kept as the untouched original for any future re-export.
Use assets/hmr-icon-*.png directly for app bar / chat avatar / launcher icon / splash contexts; use hmr-logo.svg or hmr-lockup.svg for web nav/footer/header. Keep a soft glow (drop-shadow(0 0 14px rgba(0,212,255,.35))) when placing the mark on dark surfaces — skip it in small/dense contexts (favicon, list-row avatars) where it would just muddy the glyph.
Reusable React primitives, each with a .jsx, a .d.ts props contract, and a .prompt.md:
- core/ —
Button(primary/secondary/ghost CTA),GlassCard(the core glassmorphism surface),Badge(uppercase letter-spaced pill),IconWell(translucent cyan tile holding a line icon). - chat/ —
ChatBubble(one advisor-chat message, AI or user — solid fill, no blur, since it lives in a scrolling list),SuggestionChip(pre-written sample-question chip),ChatComposer(pill glass input + neon send, controlled). - brand/ —
PillarCard(product-pillar feature card, composes GlassCard + IconWell).
One type scale, one spacing scale, one radius set, one shadow/glow set — defined once in tokens/ and applied identically on web and in the Android app (see app_theme.dart cross-references above). There is no separate "app" or "web" token set.
No component inventory was defined by a Figma file for this project — the set above is standard-sized to what both products actually use (verified against the real src/components/ folders in the Astro repo and the reusable widgets referenced in the Flutter screens), not a generic default kit.
Foundations (root):
styles.css— global entry point (imports only). Consumers link this.tokens/colors.css·tokens/typography.css·tokens/spacing.css·tokens/effects.css·tokens/base.cssfonts/— Vazirmatn family +fonts.css(@font-face).assets/—hmr-logo.svg,hmr-lockup.svg,hmr-icon-{48,192,512,1x,2x,3x}.png,favicon.png,hmr-mark-240.png,hmr-logo-source.png(untouched original),particles.js.
Specimen cards (cards/) — render in the Design System tab. Colors: neon ramp, navy ramp, text & status, glass surfaces, brand gradients. Type: display & gradient, body & Persian, weights. Spacing: scale, radii & shadows. Brand: logo, neural background.
Components (components/) — see "Components" above; each directory also has an @dsCard-tagged demo (*.card.html).
UI kits (ui_kits/):
website/— interactive Persian/RTL recreation of the HMR marketing site + advisor chat (landing ⇄ chat). See its ownREADME.md.app/— interactive recreation of the HMR Android app: guest/Google login → conversation history (with slide-in account sidebar) → advisor chat. See its ownREADME.md.
Other: SKILL.md (Agent-Skill wrapper), this readme.md.
Want a faithful page-or-screen-level recreation beyond what's here? Explore wikigoo/HMR-Astro (website) or wikigoo/HMR-Flutter (Android app) directly.