How this site was designed and put together.

The concept

Most support-software marketing sites lean on one of two moods: cold enterprise blue, or a glassy dark-mode "we're a serious platform" look. Threadline's whole pitch is the opposite of that — support software that still feels like a conversation, built by a team that's tired of tools that feel like filing cabinets. So the site had to look warm before it looked "SaaS": cream instead of white or black, one confident coral accent instead of a gradient soup, and rounded, friendly UI mockups instead of sharp glass panels.

Every section of copy was written to reinforce that same idea — the product language avoids "ticketing" and "queue management" in favor of words like reply, conversation, and team, because that's the actual difference Threadline is selling.

Visual direction

The palette stays deliberately narrow: a warm cream base (never pure white), deep ink-navy for text and structure, and a single terracotta-coral accent used with intention — on buttons, tags, and the handful of moments that should draw the eye, not spread across the whole page. Two typefaces carry all of it. Fraunces, a warm display serif with soft, slightly old-style curves, handles every headline — it reads confident and a little editorial without tipping into corporate. Outfit, a rounded geometric sans, runs the body copy and UI labels, chosen for the same friendly roundness that shows up in the product mockups' own interface design.

Every card, button, and mockup frame uses a generous border radius on purpose — it's the clearest visual signal that this is a product built to feel approachable rather than austere.

The imagery

Since Threadline itself isn't a real company, every product screen shown across the site — the shared inbox, the saved-replies panel, the SLA dashboard, the live chat widget — was art-directed and generated rather than screenshotted from a real app. The direction stayed consistent across the whole set: the same cream-and-coral interface language used on the marketing site itself, so the "product" and the "site selling the product" always look like they were designed by the same team. Each mockup was generated as flat interface artwork only, then set into a browser-window frame built directly in the page's own code — that kept every frame crisp and consistent instead of relying on an image model to draw a convincing (and often slightly warped) browser chrome.

The three team portraits on the About page follow the same discipline in a different register: consistent soft, warm window light from the same direction, the same neutral cream studio backdrop, and the same relaxed, approachable styling — so the team reads as one company rather than three unrelated headshots.

Structure — five real pages

This is a genuine multi-page site, not a single scrolling page with anchor links standing in for navigation. Each section lives at its own address:

• index.html — the home page: hero, stat strip, core feature highlights, a live "how it works" demo, customer quotes, an integrations teaser, and a closing call to action.
• features/index.html — a deeper look at all four product pillars, each with its own generated mockup and a checklist of specifics.
• pricing/index.html — a three-tier pricing table with a working monthly/annual toggle, plus a pricing FAQ.
• about/index.html — the founding story, company values, and the team.

Every page shares the same header and footer, and every internal link is relative to that page's folder depth — the home page reaches its assets as assets/..., while a page one level down like features/ reaches the same folder as ../assets/.... Getting that consistent across five pages is a small but easy detail to get wrong, so it was checked page by page rather than assumed.

The signature motion

The centerpiece is a live-feeling "tickets arriving" demo on the home page: a real, coded inbox list — not a photograph — where each row animates in from the right with a soft, spring-like ease as the section scrolls into view, finishing with one ticket landing last in a highlighted "just arrived" state. It's meant to read less like a decorative reveal and more like watching the actual product receive a message in real time.

That idea repeats in smaller doses elsewhere: a floating "new ticket" toast and a pulsing "typing…" bubble layered over the hero's product screenshot, a soft trio of blurred color blobs drifting slowly behind the hero (pure CSS, always on, never distracting), animated stat counters that count up once they scroll into view, and — on the pricing page — a monthly/annual billing toggle that actually swaps every price with a quick, tactile motion instead of just changing a number instantly. Content reveals elsewhere on the site run through GSAP's ScrollTrigger, loaded from a CDN with no build step required, and everything respects prefers-reduced-motion by snapping straight to its final state.

Responsiveness and craft details

The layout was checked from a 375px phone width up through large desktop screens. The nav collapses to a slide-in panel below 860px, the pricing cards stack to a single column with the "Team" plan promoted to the top, and the FAQ uses native <details> elements so it's keyboard- and screen-reader-accessible without any custom JavaScript. overflow-x: clip is set on both html and body so nothing — including the full-width hero blobs and the wide stat strip — can force horizontal scroll on a narrow screen.

Deploying a site like this

There's no build step: plain HTML, CSS, and a small JavaScript file, with fonts and GSAP loaded from CDNs. That makes deployment just a matter of hosting static files. The straightforward path is Netlify — drag the project folder onto Netlify's deploy target, or connect a Git repository and let it deploy on every push, and the site is live on a Netlify subdomain within a minute or two, with a custom domain attachable afterward under Site Settings. Because every internal link in this project is relative rather than absolute, the whole folder also works dropped into any other static host — GitHub Pages, an S3 bucket with static hosting enabled, or a traditional shared host — without changing a single link.