Designing Sidecar: A Product Studio Agency Template

Sketch to shipped#

The case study page has the template's signature interaction: a slider that compares a week 3 pencil sketch of an app screen with the screen that shipped. Both are inline SVGs stacked on top of each other. A native range input clips the top layer:

function set() {
  var v = +range.value;
  top.style.clipPath = 'inset(0 ' + (100 - v) + '% 0 0)';
  line.style.left = v + '%';
  range.setAttribute('aria-valuetext', v + '% sketch');
}

Because it's a real <input type="range">, it works with arrow keys and screen readers for free, and aria-valuetext announces "50% sketch" rather than a bare number. The sketch even has its own faint grid, so it looks like it was drawn on the same paper as the rest of the site.

The rest of the artwork is drawn too: eight project illustrations in assets/img/work/, client wordmarks, a workbench, the studio front and a 404 page showing a feature "cut from v1." The 14 team portraits are generated in JavaScript by drawAvatar() from a few settings per person in data.js (skin tone, one of six hair styles, hair color, glasses and a background), which keeps the team page consistent and makes adding a person a one-line change.

An estimator instead of "contact us"#

Pricing is where most agency sites go vague. Sidecar's pricing page has an engagement estimator: pick services (design, engineering, launch), a team size from two to six, a number of weeks from 4 to 24, and a fixed sprint or a monthly retainer. The math lives in computeEstimate() and every number comes from data.js:

• The rate is the average per-person-week rate of the services picked ($4,500 for design, $5,000 for engineering, $4,000 for launch in the demo).
• A fixed sprint totals rate × people × weeks and shows a range from 0.9 to 1.15 times that, rounded to $1,000.
• A retainer is billed every four weeks at 10% below the sprint rate, for at least three months.

With the defaults (design and engineering, three people, 12 weeks, fixed sprint), the estimate reads $154,000 to $197,000. A sample timeline shares the weeks among the phases that apply, by weight, so the default plan reads discovery in weeks 1–2, design in 3–5, build in 6–11 and handoff in week 12. A yellow note says it's an estimate, not a quote.

The settings are saved in the browser and written to the URL, so an estimate can be shared with a cofounder. "Send this with a project brief" opens the five-step brief on the contact page with the services ticked and the matching budget range already picked. The services page adds a three-question helper that suggests a fixed sprint, a retainer or a "build to hire" engagement, and links into the estimator with that model selected.

A demo that never goes stale#

An agency site that says "next opening: March 2025" looks abandoned. Sidecar works out its next open start dates from today, in Central time, using a rule in data.js:

START_RULE: { leadDays: 21, everyWeeks: 4, count: 3, closed: { from: [12, 19], to: [1, 3] }, openings: [1, 2, 2] },

That's the first Monday at least 21 days out, then every four weeks, skipping a winter break from December 19 to January 3. The same dates feed the home page, the work page, the estimator's timeline and the start date choices in the brief. The team page has a live clock that says whether the Little Rock studio is open right now, and the copyright year fills itself in.

Making it your own#

• Change the accent by editing --color-pine and --color-pine-deep in src/input.css and rebuilding the CSS with npm run build. A few drawings use the green as a hex value, so search the HTML and assets/img/ for #17663f if you change the palette completely.
• Set your prices in SERVICES and ESTIMATE in data.js: the rates, team sizes, week range and the sprint and retainer multipliers. Keep the "estimate, not a quote" note.
• Add a project by adding an object to CASES and a 640×420 drawing or screenshot at assets/img/work/<id>.svg. The work page filters it by service and funding stage automatically.
• Match your calendar by editing START_RULE, or replace startDates() with a fixed list of dates.
• Connect the brief to a form service. The demo sends nothing; the forms guide and the template's DOCS.md show how to post it to a service like Formspree and show the success panel only when the service answers OK.
• Swap the fonts by changing the <link> and the two --font-* tokens. If the new sans has no MONO axis, point the mono utility at a monospaced family instead.

The customizing guide covers rebuilding the Tailwind CSS. Sidecar is also available for Next.js, Astro, Nuxt and WordPress. If it's not the right fit, the agency and studio templates include Studio, a minimal Swiss-style studio, and Agency, a bold, high-end agency site.