Case Study / 01

Silvestra

Off-the-shelf templates would have compromised the brand's artisanal soul. I engineered a bespoke headless solution from scratch, ensuring the digital experience feels as premium as the physical product.

Core Stack

Next.js 15

TypeScript

Shopify API

Tailwind v4

GitHub Packages

Key Metrics

Passed

Core Web Vitals

Lighthouse

Visit Live Site Check the Repo

The Process

Engineering narrative.

The Visual System

Tokenizing the Brand

Before writing code, I systematized Silvestra's identity in Figma. I defined a strict set of tokens for typography (Acorn & Geist), spacing, and an earthy color palette. This isn't just 'drawing'; it's defining the physics of the interface so development becomes purely execution.

The Translation

Figma to CSS Variables

I mapped the Figma tokens directly to CSS variables using Tailwind v4's new engine. Instead of magic numbers, I use semantic variables. This creates a single source of truth: if I update '--p-gold-500' in the root, the entire 'Accent' system updates automatically across the app.

the-translation.ts

:root {
  /* Primitives */
  --p-gold-500:  #B68045;
  --p-sage-500:  #84968B;
  --p-black-800: #1D1D1F;
  --p-white-000: #FFFFFF;
}

@theme {
  /* Semantic Mapping */
  --font-display: var(--font-playfair);
  --font-sans: var(--font-md-sans);

  --color-primary: var(--p-gold-500);
  --color-accent:  var(--p-sage-500);
  --color-foreground: var(--p-black-800);
  --color-background: var(--p-white-000);
  }

The Architecture

Decoupled UI Logic

I didn't want the UI to be trapped inside the Shopify project. I built the design system in a separate repository using Radix UI and exported it as a private package. This separation of concerns ensures that the 'Atomic Interactions' are pure, testable, and reusable, unburdened by the complex business logic of the e-commerce store.

the-architecture.ts

// Imported from my external Design System
import { Button, Card } from "@christian/ui";

// The store logic simply consumes the UI
export function AddToCart({ product }) {
  return (
    <Card variant="glass">
      <Button
        variant="primary"
        onClick={() => add(product.id)}
      >
        Add to Cart
      </Button>
    </Card>
  );
}

System Architecture

Type-Safe
Data Pipeline

Bridging the gap between Shopify's flexible API and a rigid TypeScript frontend. I implemented GraphQL Codegen to ensure that if the API changes, the build fails before production, enforcing strict contract adherence across the stack.

Headless CMS

Shopify API

Source of truth for product data & checkout logic via Storefront API.

GraphQL Layer

Typed Queries

Precise data fetching preventing over-fetching and reducing payload size.

CodeGen Engine

Type Safety Guard

Auto-generated TypeScript definitions tailored to the schema.

Server Components

Next.js 15 RSC

Hydrated interactive islands served from the Edge.

Configurationcodegen.ts

codegen.ts

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  // 1. Live Schema Introspection
  schema: {
    [`https://${process.env.SHOPIFY_STORE_URL}/api/2025-07/graphql.json`]: {
      headers: {
        "X-Shopify-Storefront-Access-Token": process.env.SHOPIFY_TOKEN!,
        "Content-Type": "application/json",
      },
    },
  },
  // 2. Watch for queries in React components
  documents: ["src/**/*.{ts,tsx}"],

  // 3. Generate strictly typed outputs
  generates: {
    "src/gql/": { preset: "client" },
  },
};

export default config;

This config automatically scans src/lib/shopify for GraphQL queries and generates TypeScript interfaces in real-time.

Design System Lab

Atomic
Interactions.

A living component playground to test usability, feedback states, and aesthetic consistency in isolation.

Properties

Variant

Size

State

Inspection Mode

Button.usage.tsx

<Button
  variant="primary"
  size="default"
  isLoading={false}
  onClick={() => handleClick()}
>
  Click Me
</Button>

Engineering Foundations

The technical
pillars I build on.

I’m naturally curious, but I’ve learned that innovation needs a solid floor. For Silvestra, I established these core principles not as constraints, but as the stable ground that allows the design to truly shine without breaking.

Real-world Accessibility

For a real store, accessibility is just good business. I used Radix UI to ensure that anyone, regardless of how they navigate, can buy a terrarium without friction. It's about empathy through code.

WCAG 2.1 Compliant

The 100 Score Goal

In e-commerce, speed is revenue. I obsessed over every millisecond, using Next.js 15's architecture to make sure the store feels instant, even on slow mobile connections.

Lighthouse Performance

Organic Physics

Static feels cheap. I used Framer Motion to inject real physics—damping and stiffness—into the UI. This creates tactile, 'expensive' interactions that feel organic, strictly maintaining 60fps.

Framer Motion Powered

Type-Safe Commerce

I don't like surprises in production. By integrating GraphQL Codegen, I made sure that every product price and description is strictly typed from the Shopify schema to the UI.

Zero Runtime Errors

Retrospective

Engineering
Trade-offs.

Every project is a series of decisions. Here are the critical pivot points where I had to balance technical purity with business reality.

CSS as an API

I stopped writing styles and started consuming a system. Treating Tailwind not just as utility classes, but as a strict API for my design tokens, removed all guesswork. It turned the subjective task of 'making it look good' into an objective engineering process.

Key Takeaway

AI Orchestration

I treat AI not as a replacement, but as a high-speed engine that needs a steering wheel. I use granular, highly supervised prompts to guide Cursor through micro-iterations. It allows me to skip the boilerplate and focus purely on architectural decisions, maintaining total control over the code quality.