Shopify design that looks like a brand and converts like a pro.

Design and development as one team

A mockup handed over the wall is how Shopify projects die. Six weeks into the build, the designer notices the dev didn’t carry a token through. The dev wants to know why the design file shows a grid that doesn’t fit any Shopify section. The brand team finds out the photography direction didn’t survive responsive. Launch slips.

Our designers work in the same Slack channel as our developers. Work from the same design tokens that ship to the theme. Review the same PRs. Sit in the same discovery calls. What gets drawn is what gets shipped, because the people drawing it know what ships well on Shopify OS 2.0 — and the people shipping it understand the brand system they’re building inside.

The practical output: fewer surprise edits, faster reviews, a theme that still matches the design file six months later.

Brand expression on Shopify

Dawn with a color swap isn’t a brand. It’s a template with a hat. Real brand expression on Shopify shows up in typography pairings that hold their character across screen sizes, motion that feels intentional not ambient, photography direction that a staff photographer can reproduce for season two, and illustration that isn’t a stock library.

What we bring to this:

• Typography system — display pairing (variable font where possible, stage-appropriate for brand), body stack, mono or accent fonts for technical/editorial surfaces, kerning and leading specific to the brand voice
• Motion budget — one orchestrated moment per page (hero reveal, scroll-triggered section entry), not scattered micro-interactions that add up to visual noise
• Photography direction — shot lists that the brand can reproduce, composition rules, post-production standards, crop systems for responsive
• Custom illustration or iconography when the brand earns it — not decorative, but supporting the actual content hierarchy

The goal: a store that still looks like your brand when a new PDP image lands in 18 months.

Conversion-led UX

Pretty doesn’t pay. Every layout decision has to answer a conversion question: does this reduce friction for the 75% of buyers who already decided, and does it add confidence for the 25% who haven’t?

The places where this shows up most:

Product detail pages. Hero imagery, variant selection, price and value prop, add-to-cart above the fold on mobile, trust signals (reviews, shipping, return policy) close enough to be seen without scrolling three sections. Details (materials, fit, care, FAQ) below, organized so skimmers and deep-readers both win.

Cart and checkout. Cart as a slideover on desktop, full page on mobile where thumb reach matters. Shipping thresholds surfaced (free shipping progress bars work when they’re honest). Upsells that are relevant — not every SKU you can think of. Checkout customization via Functions only where it earns a measurable conversion lift.

Collection pages. Filter patterns that respect actual customer decisions (size, color, price — not 47 dimensions). Product card density tuned for the catalog; small catalogs get space, large catalogs get information density. Sort options that reflect intent, not the default.

Social proof placement. Reviews near decision points, not in a “testimonials” section off to one side. Press logos near value props, not in the footer. UGC integrated into collection and PDP, not a separate “community” page nobody visits.

Form design. Five fields is a lot. Three is comfortable. Inline validation. Keyboard-friendly. Error states that tell the customer what to do next, not what they did wrong.

Design systems on OS 2.0

OS 2.0 changed what’s possible. Sections everywhere, blocks, metafields, app blocks. A real design system maps 1:1 to these primitives so the client team can keep building after launch without calling us.

Our default system architecture:

• Design tokens in Figma (via Figma Variables) mirror the theme’s settings_data.json and CSS custom properties — one source of truth across design and code
• Component library matches the sections and blocks we build — hero, feature grid, product card, review block, CTA block, FAQ, editorial callout
• Section-block patterns documented alongside the Figma components so the merchandising team knows which sections to combine for a landing page
• Metafield-driven content surfaces where the design calls for rich extended content (ingredient lists, fit guides, material details, author bios)
• App blocks for third-party surfaces (reviews, subscriptions) integrated into the theme’s design system, not dropped in as islands

The merchandising team ends up with a layout builder that matches the design. New pages come from the same tokens. The design doesn’t drift.

Custom theme or theme customization?

A decision tree, not a sales pitch. We lose a lot of custom-theme revenue telling clients to fork Dawn or extend Horizon — and we keep telling them when that’s the right call.

Fork or extend when:

• Catalog is under 500 SKUs
• Brand is still in motion (product line, voice, visual language evolving)
• Budget is under $40k for design + build
• Team needs to keep shipping while design is in flight

Custom theme when:

• Catalog is complex (5k+ SKUs, deep collection hierarchy, international, B2B)
• Brand is locked, and the distinctive parts can’t be reached inside a theme’s architecture without rewriting half of it
• PDP or collection patterns demand non-standard UX
• Performance budget can’t be hit on top of an existing theme
• Team has the resources to maintain a custom codebase

Most engagements end up in the extend-then-custom pattern: first build is an extended Dawn or Horizon fork, shipped in 6–8 weeks. As the brand locks in and the catalog grows, we rebuild as a custom theme in year two. That’s often cheaper and faster than starting custom on day one.

Mobile-first speed

Seventy-five percent of Shopify traffic is mobile. Design that looks great on a 1440 monitor and falls apart on a 390 iPhone isn’t design — it’s decoration.

Our defaults:

• Every component designed and built at 375×812 first; desktop is derived
• Image pipeline targeting AVIF/WebP with responsive srcset (set width/height to prevent CLS)
• Font loading: preload critical, font-display: swap, subset aggressively
• LCP target < 2s on mobile 3G (real device testing, not just Lighthouse)
• INP target < 200ms for interactive components
• CLS target < 0.1 across all above-fold content

Speed isn’t a post-launch audit. It’s a design constraint. Design files that can’t be built fast get revised before build starts.

Accessibility

WCAG 2.1 AA is table stakes. Design system ships with accessibility baked in, not retrofitted later:

• Color contrast tokens designed to hit AA minimums by default (not “hope we get there”); AAA where content earns it
• Focus states visible and designed — not the browser default
• Keyboard paths explicit in interactive components (cart, drawers, modals, navigation)
• Screen reader semantics in the component specs (landmark roles, aria-labels, live regions)
• Motion that respects prefers-reduced-motion
• Form field labels and error states compliant with screen reader conventions

We run an accessibility audit in the last week before launch and again 30 days post-launch. Issues found go on the stabilization list, not a “nice to have” backlog.

Our design process

• Discovery (week 1–2). Brand audit, catalog audit, audience definition, competitive analysis. Output: a written brief you can challenge before we start drawing.
• Wireframe (week 2–3). Component-first, mobile-first, reviewed before any visual work. Wireframes show structure + hierarchy, not style.
• Visual (week 3–6). Design tokens, component library, key pages (home, PDP, collection, cart, checkout, editorial). In Figma with Variables wired to the token system.
• Build handoff (week 6 onward). Tokens, components, and behaviors documented alongside the Figma file. Dev review of every component before implementation.
• Measure. Post-launch analytics + CRO plan inside the first 30 days.

Selected design work

• CLIENT, DTC redesign + SEO engine — LCP mobile 2.9s → 1.4s, CVR +22% on mobile PDP.
• Full portfolio: selected work.