Written 21 October 2026. Screenshots of all three sites are in
/root/mobile-audit/shots/sites/ (pipeline, productquant, tradespro at 1440 and 390).
Logos pulled to /root/mobile-audit/brand-assets/.
| Site | Ground | Display type | Body type | Accent | Logo | |---|---|---|---|---|---| | productquant.dev | cream `#F8F7F4`, alt `#F0EEE9`, dark rooms `#060C1D` / `#0C1529` | Instrument Serif 400 | DM Sans | green `#047857`, cobalt wordmark `#1B45B8` | `logo-transparent.png`, 1756x318, cobalt | | pipeline.productquant.dev | `#FBFAF7`, soft `#F7F6F2`, white surfaces | Inter 600-840, Instrument Serif italic for the second line | Inter | ember `#F25A24` (`rgba(242,90,36,.09)` wash) | cobalt ProductQuant wordmark + `PIPELINE` in JetBrains Mono | | withtradespro.com | `#F7F9FB`, container `#ECEEF0` | Bricolage Grotesque 800 | Inter | orange `#F97316`, hover `#EA6C0A`, pale `rgba(249,115,22,.10)` | orange cube + TradesPro wordmark |
Bug found and fixed first. pipeline.productquant.dev was serving unstyled HTML: the page
returned 200 but every /assets/* request 404'd, so the site rendered as plain Times text with
a broken logo. Local tree was intact, the deployed project was missing its asset files. Rebuilt
the deployment from site/pipeline via Sydney (the NL box token is invalid). CSS now returns
200 at 72 KB, logo 200, homepage 200. Verified with curl on all three.
Consequence for this plan: the pipeline screenshots below are the *styled* site, taken after the
fix.
They are three different companies, not one brand in three colours. The banner sets must not
share a template.
| | ProductQuant | Pipeline | TradesPro | |---|---|---|---| | Buyer | B2B SaaS founders and growth leads | Same, buying a done-for-you 90-day programme | Trade business owners, one to twenty people | | Feeling | Consultancy. Dark, serif, quiet, expensive | Productised programme. Bright, orange, operational | Trades. Photo-led, plain, phone-first | | Hero device | Dark navy room, serif line, four-step ledger | White ground, 72px Inter, orange pill CTA | Photo of a tradie, chunky wordmark, price chip | | Proof style | Frameworks, diagnosis | Volume and calendar terms | Jobs, reviews, phone ringing | | What a banner must say | We find where growth stalls | 90 days, run for you | Booked jobs, not clicks |
The one thing they share: cobalt #1B45B8 in the parent wordmark, and Inter in the pipeline
site. Nothing else should be borrowed across them.
Two surfaces, because they are two different boxes:
| Surface | Files | Ratio | |---|---|---| | Company Page cover | 1512 x 256, plus 3024 x 512 retina, plus JPEG | 5.9:1 | | Personal profile banner | 1584 x 396, plus 3168 x 792 retina, plus JPEG | 4:1 |
LinkedIn documents 1512 x 256 as both minimum and recommended for a Page. A profile banner is
4:1, so a Page strip there is the "too wide" problem already hit on Autooopilot.
Safe zones, identical for all three: Page logo is drawn over the lower left, so nothing
important below y 60% in the left 30%. Profile avatar straddles the lower left, so nothing
important below y 55% in the left 15%. Key detail stays out of the lower right on both.
Ground: dark #060C1D. Type: Instrument Serif, white. Kicker in JetBrains Mono, green or
cobalt. Wordmark cobalt on a cream plate, top right. No photos, no product cards.
1. "Growth stalls in the gaps between the work." Four rows on the right, mono numbered:
01 Research / 02 Analytics / 03 Experiments / 04 Implementation, hairline rules.
2. "Diagnose first. Build second." Cream ground #F8F7F4, ink serif, one cobalt rule, one
line of DM Sans under it: *For B2B SaaS in healthtech, adtech and edtech.*
3. "One system, four levers, compounding." Dark, serif line left, a four-cell ledger right
with Research · Analytics · Experiments · Implementation.
Profile versions: same three lines, wordmark moved top left, all type above the avatar line.
Ground: #FBFAF7 with the soft #F7F6F2 wave from the hero. Type: Inter 700-800 at hero
scale, Instrument Serif italic for the second line, JetBrains Mono for kickers and the phone
number. CTA pill ember #F25A24. Use the exact hero line where possible; it is already the
sharpest copy on the site.
1. "Your next 90 days of growth. / Run for you." Kicker 90-DAY GROWTH KICKSTART in mono.
Right side: three mono rows, CONTENT, OUTREACH, MEETINGS, each with a hairline.
2. "5,000 ICP-fit buyers contacted a month." Mono sub-line: *One month setup, then three
sending months.*
3. "Content, outreach, meetings. One team runs it." With the phone line +1 907 416 6157
in mono at the bottom right of the profile version only.
Ground: #F7F9FB, white cards, orange #F97316. Type: Bricolage Grotesque 800 for the
statement, Inter for the sub-line. Photo-led: a tradie on site with a phone. Price chip
$47/MO, CANCEL ANYTIME in the site's exact chip style.
1. "Your phone rings with booked jobs while you're on the tools" — the live hero line.
Photo right, orange pill Get your site left.
2. "More jobs. Same crew." Photo-led, three chips: Website, Booking, Follow-up.
3. "$47/mo. One system." Price-led, four chips: Website · Booking · Follow-up · Reviews.
Price rule: $47/mo is published on the site, so it may appear. Nothing invented, no
competitor pricing on a banner.
| Step | Work | Effort | |---|---|---| | 1 | One renderer per brand, reusing the Autooopilot cover helpers (card, lockup, badge, export loop) | half a session each | | 2 | Render 3 concepts x 2 surfaces per brand = 18 assets, plus retina and JPEG | ~1 hour total once renderers exist | | 3 | QA: exact sizes, contrast ratio >= 4.5 on every text/ground pair, safe-zone probe at 390 wide, no clipping | scripted, minutes | | 4 | Publish: pipeline to `site/pipeline/brand/`, TradesPro to its `brand/`, ProductQuant to its `assets/brand/`, each linked from a small page | ~1 hour | | 5 | Upload copy (section 5 of the companion file) to the three Pages and the personal profile | manual, Jake |
Order of work: TradesPro first (most different, proves the system is not one template), then
Pipeline (closest to existing Autooopilot renderers), then ProductQuant (dark editorial, needs
its own type handling).
| Brand | Fonts | Status | |---|---|---| | ProductQuant | Instrument Serif, DM Sans, JetBrains Mono | Instrument Serif already self-hosted for Autooopilot; DM Sans needs adding | | Pipeline | Inter, Instrument Serif, JetBrains Mono | Inter and Instrument Serif already local; JetBrains Mono available from Google Fonts | | TradesPro | Bricolage Grotesque, Inter | Bricolage needs downloading from Google Fonts |
Logos in hand: /root/mobile-audit/brand-assets/logo-productquant.png (cobalt, 1756x318),
logo-pipeline-productquant.png (cobalt, 480x87), logo-tradespro-icon.png (1024x1024, white
plate, needs the white knocked out and the orange cube kept).
Gap to close before rendering: TradesPro's full wordmark (cube + "TradesPro") exists only in
the live page header, not as a file. Either capture it from the DOM at 4x or rebuild it in
Bricolage Grotesque 800 beside the cube.
1. Every file at its exact size, checked by PIL, not by eye.
2. Contrast measured on the render, not chosen from a palette.
3. Safe-zone probe: the Page logo box and the profile avatar circle painted onto a copy of the
render, and nothing readable inside either.
4. No price anywhere except TradesPro's published $47/mo.
5. No claim that is not already on that brand's live site.
6. Text at 390 wide still legible: nothing under 12 px effective.