Bubble, inline, spotlight, inline input, docs assistant, hosted page
One script tag, immutable and cached at the edge
Colour, type, radius, elevation, spacing and motion — 66 are colour
Brand, core, forms, feedback, data and navigation
WelcomeAI is an independent multi-tenant RAG SaaS. A customer uploads PDFs, Word files and Markdown, points the crawler at a site or connects a CMS, and the content is indexed into a knowledge base on PostgreSQL with pgvector. Indexing runs in the background and reports per file, so a failed crawl is visible instead of silent.
What makes it different is what comes back. Every answer arrives with the passages it used and their similarity scores, so you fix the document instead of guessing at the prompt. Where no passage clears the score threshold, the assistant says so and names what it can answer instead, rather than inventing a parameter.
One Next.js app serves four hosts: the workspace at app.welcomeai.dev, the marketing site at welcomeai.dev, the widget from cdn.welcomeai.dev, and an admin console. English sits at the bare path and Spanish under /es — a first-class mirror written to the same register and the same length discipline, not a machine pass.
Getting content in, tuning how it is retrieved, putting the answer on a page, and everything that happens after a conversation ends.
PDF, Word, Markdown, a crawled site or a connected CMS. Indexing runs in the background and reports per file, not per batch.
Chunking, score threshold and answering model, with a Playground that shows the passages exactly as the model saw them.
One runtime and one script tag: a bubble, an inline panel, a spotlight, an inline input, a docs assistant and a hosted page.
Conversations, captured leads, analytics and the plan allowances that govern them, all in the same workspace.
The product resets every framework default and uses one palette. Everything below was read out of the product’s own source — the Tailwind v4 theme block, the component barrel and the lint rules that reject a violation in code review — not reconstructed from screenshots.
#6D4AFF
The accent, and the only primary colour in the product. Violet 700 (#5730F0) is its hover — hover is a colour change and nothing else.
#0E0A1F
The dark brand layer: the landing page, the widgets and every code surface. It never appears in the workspace.
#C6F24E
A signal, not a colour. One lime element per screen, and only on the marketing layer and the widgets.
#FAFAFB
The workspace ground. White cards sit on it; the product has no gradients and no dark panels except code.
#E8E7EE
Elevation in the workspace is a one-pixel line, not a shadow. Inputs get the slightly darker #DDDCE6.
#14131A
Heading and body ink on light surfaces, with #6B6880 as the muted level below it. Text is never transparent.
#C9A9FF
Eyebrow labels on the ink layer only. The system does not put it on white.
These are WelcomeAI’s colours, printed here as documentation. Nothing on werun.dev is drawn from them.
Display is 44px at −0.03em tracking; h1 34, h2 22, h3 16, all negative. Product page titles are 24px — the 34 and 44px sizes belong to marketing. The product loads it through next/font, so the design system loads the same family from Google Fonts and invites a licensed copy to replace it.
15px base at 1.55 line height, 13px small, 12px for placeholders and hints — the smallest type in the product. Body copy is set with text-wrap: pretty.
Ids, quantities, file paths and similarity scores, in tabular figures. It also carries the one uppercase treatment in the system: the 11px eyebrow label at 0.14em tracking.
Named, not loaded — this page sets every family above in werun.dev’s own type.
The workspace is light and quiet. The ink layer belongs to the marketing site and the widgets, and there it allows exactly two backgrounds: a 120px vertical grid of 1px lines at 5% white, and one 420px violet halo bleeding off a corner. Nothing else.
One lime element per screen, and only on the marketing layer and the widgets. On the landing page that is the sign-up button, then the hero call to action below the fold — never both in view. A second lime element makes the first one mean nothing.
Never the used value alone: 12,480 / 20,000, 6.2 / 10 GB, 3 / 10. Unlimited is ∞, not the word. A number without its ceiling does not tell a customer whether to worry, which is the only reason they looked.
title= is banned in favour of a hint popover, more than five options become a searchable select, and every listing is a div grid whose cells edit in place. Lint and tests enforce all three, so an icon-only button with no label is a failing build rather than a review comment.
The colour, type, radius, elevation, spacing and motion tokens were copied out of the app’s own theme block: 135 of them, 66 of those colour, 7 radii from the 6px chip to the 999px pill. The design system is a diff against the product, not a drawing of it.
9px nav rows, 18px card padding, 11px badge sides, 13.5px grid-cell text. They are written into the spacing scale on purpose so that a rebuild does not quietly tidy them onto a 4px grid and change the density of every screen.
The 45 primitives mirror the product’s own component barrel. The pieces that need real logic to be faithful — the chart wrapper, the Markdown renderers, command-K, the guided tour and the bug reporter — are named as not rebuilt, so nobody assumes they were missed.
No photography, no illustration library, no stock imagery, no generated art. Where a concept needs a picture it is made from CSS on real elements, and the product screenshots inside marketing pages are live component mocks rather than images.
