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.
Monochrome, honest status colors
A single monochrome accent — white on dark, near-black on light — over a neutral graphite (dark) or paper (light) ramp. Green means success, amber means warning, red means danger — always. Values below are computed live from the current theme; flip the toggle to see both.
Noto Sans, 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.
Chat for everything. Build when you want.
Buttons, labels, sidebars, menus, settings, model pills and the whole builder. The same Noto Sans as prose — weight and size carry the hierarchy, staying legible at the 12–13px of dense chrome. 600 for headings, 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. Nested corners are concentric (outer = inner + padding). Depth is flat — hairline lines, never shadows. 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 — accent tileDESIGN.mdWritten spec for this systemcss/index.cssDesign tokens — the :root theme blocks