You tell it, it ships.
That is the product: you tell Jomoq what you want, and it becomes the thing. The Q's tail breaking out of its box is the whole idea in one stroke — the conversation that escapes the chat window and ships as something real.
Wordmark & mark
The wordmark is a stroke-based SVG that inherits currentColor, so it adapts to any
surface. The mark is the Q alone — the box with the breakout tail.
Do
Inline the SVG so it inherits text color · keep clear space of one letter-width · nav size 24–28px tall · use the accent-tile mark for avatars and icons.
Don't
Never stretch, recolor per-letter, outline, or shadow the mark · never use
jomoq.png (a placeholder raster that is not our logo) · never set the wordmark in a font.
White canvas, black ink, pastel blocks
The product runs on black and white: a white canvas with #F5F5F5 fills and #E6E6E6 hairlines in light, editor greys (#1E1E1E canvas, #2C2C2C panels) in dark, and one monochrome accent. Marketing pages are always white and set the product UI on flat pastel blocks. A single blue marks focus and selection. Green means success, amber means warning, red means danger, always. The theme swatches below are computed live; flip the toggle to see both.
The system font, everywhere.
One family carries everything you read and everything you use — prose, docs, headlines, buttons, sidebars, menus, settings, the builder. Weight does the work: 600–700 for headings, 500 for labels, 400 for body. KaTeX renders formulae in its own faces, and Noto Sans Mono is the technical thread for code, data, and the eyebrow label. Each device draws its own UI font (SF Pro, Segoe UI, Roboto) at a 14px base; Cyrillic, Kazakh and Kyrgyz letters included, comes from Noto Sans.
Chat for everything. Build when you want.
Buttons, labels, sidebars, menus, settings, model pills and the whole builder. The same system font as prose — weight and size carry the hierarchy, staying legible at the 12–13px of dense chrome. Display type is regular weight with tight tracking; 600 for emphasis, 500 for labels.
Jomoq keeps the whole job in one thread: questions, files, research with sources, and the moment a reply is not enough, a live page. 16px body, 1.5–1.65 line height, muted color for supporting text, italic for emphasis and 600 for weight.
∫₀^∞ e−x² dx = √π ⁄ 2 · ∑ aₙ xⁿ · α β γ δ ∂ ∇ ≤ ≥ ≈ ∈ ℝ
> diff_apply --op replace_text · 200 OK · 8,192 tokens
THE EYEBROW LABEL: 11PX · UPPERCASE · +0.08EM
32–68pxHero display22–36pxSection title16pxBody text14pxUI labels, buttons13pxDense UI, messages11pxEyebrow / microThe scales
Everything sits on a 4px grid. Buttons are 8px, panels 12–16px. Depth is mostly flat: hairlines separate, and one soft shadow lifts floating UI (the composer, product mocks on the marketing pages). Motion is 120–260ms on a sharp ease-out, and none at all for high-frequency actions.
--space-1--space-2--space-3--space-4--space-5--space-6--space-7--space-8Plain, confident, technical
Short sentences. No hype. We say what the product does, and microcopy stays calm.
We say
"Start a thread." · "Copied." · "Reply finished." · "When a reply is not enough, build it."
We never say
"Supercharge your workflow! 🚀" · "Unleash the power of AI" · "Oops! Something went wrong 😢"
The component library
Rendered live from the production stylesheet — these are the real classes, not mockups. Flip the theme toggle and everything below follows.
Buttons
.btn .btn-primary / .btn-secondary / .btn-danger / .btn-sm / .btn-pillPrimary is tactile: a 2px "lip" that compresses on press. Every button scales feedback within 120ms and shows a visible focus ring.
Select
.custom-select- Llama 3.3 70B · Groq
- Deepseek V3
- Gemini 2.5 Flash
Inputs & checks
.settings-field · .custom-checkMessages
.message-row .message .user / .assistantAgent activity
.live-agent-bubble · .streaming-previewStatus
.sync-pill · .status-pill · .provider-tag · .token-meterMenus
.mode-menu · .vscode-context-menuEyebrow & kbd
.eyebrow · kbdDialog
.storage-modal-cardClear local data?
This removes chats, playgrounds, and version history stored in this browser. Synced data stays in your account.
Dialogs open at 260ms from center with focus trapped inside; exits are faster than entries. Destructive confirms always pair a quiet cancel with an explicit danger action.
Files
jomoq-logo.svgWordmark — currentColor SVGfavicon.svgThe mark — bare Q, follows the browser themefavicon.icoThe mark on a dark tile — 16/32/48 fallback for Safari and legacy tabsapple-touch-icon.pngThe mark — 180px, full-bleed for iOS home screensog.pngShare card — 1200×630 link previewDESIGN.mdWritten spec for this systemcss/index.cssDesign tokens — the :root theme blocks