Edge City Goods (case study)

the brief —

A store with no system is a store that can't scale, can't hand off, and can't be touched by AI tools without breaking. Every hour a developer spends guessing your design intent is money wasted. Every AI tool that can't find your store is a sale that went somewhere else.

Edge City Goods had the aesthetic. What it didn't have was a system — or discoverability. We built both.

what I built —

A complete design system and AI-native commerce layer for goods.edgecity.live. Documented in real-time as we built, not written up after the fact.

Two deliverables. One goal: a store that any developer can build on, any AI agent can find, and that doesn't depend on you to keep running.

DESIGN.md — saves time. saves money. —

DESIGN.md is a plain-text spec in the repo root written to be read by AI coding tools — Cursor, Claude Code, Copilot. Every token, every surface rule, every Do/Don't.

Before it existed: AI-generated UI came back generic. Default Shopify patterns. Wrong fonts. Raw rgba values. Accent colors used decoratively.

After: AI sessions open with full design context. Right tokens. Right patterns. Right constraints. The gap between "AI-generated" and "on-brand" collapses on the first pass.

This is what turns a design system from documentation into infrastructure. It doesn't just tell humans what to build — it tells the tools.

without DESIGN.mdwith DESIGN.md

Add to Cart

product image

Esmeralda 2026 Tee

$45.00

background#ffffff

fontArial, sans-serif

button#2563EB solid fill

imagestatic placeholder

border1px solid #e5e7eb

brand foundation —

The aesthetic isn't arbitrary. It traces back to a worldview.

Edge City lives at the intersection of Buckminster Fuller's systems thinking, the Whole Earth Catalog's democratized knowledge, and the conviction that small groups of high-agency people can bend trajectories. The store is a relic-maker — objects that carry meaning because of what happened around them.

clouds → boundlessness, frontier, altitude above the default glass → transparency, nothing hidden, weightless precision float → unhurried, dreamy, slightly above everything white on sky → restraint, doing more with less

color

Semantic tokens. No raw values in components — ever. --color-accent is for interactive elements only. Any accent-colored element that isn't clickable is a violation.

--color-surface

rgba(255,255,255,0.15)

Product cards, nav pill, cart panel.

--color-surface-dark

rgba(0,0,0,0.35)

Modals, overlays, size guide.

--color-surface-solid

rgba(255,255,255,0.80)

Form inputs, focused states.

--color-text

#ffffff

All primary text.

--color-text-muted

rgba(255,255,255,0.50)

Secondary labels, metadata.

--color-accent

rgba(255,255,255,0.80)

Interactive elements only — never decorative.

--color-border

rgba(255,255,255,0.20)

Standard borders on glass surfaces.

--color-border-subtle

rgba(255,255,255,0.10)

Dividers, quiet structure.

typography

Two fonts. Strict roles. No overlap.

Instrument Serif italic → navigation and menu labels only. Always italic. The single expressive element in an otherwise minimal system.

Inter → everything else. Product titles, prices, descriptions, labels, policies. The workhorse.

The constraint is the point. When only one element is expressive, it carries more weight.

page-title

2.5rem / 500 / 1.0 / uppercase

Edge City Goods

product-title

1.25rem / 500 / 1.3

Esmeralda 2026 Tee

product-price

0.875rem / 400 / 1.4

$45.00

nav-label

1rem / 400 / 1.0 / italic

Shop · Archive · About

body

1rem / 400 / 1.6

Objects that carry meaning because of what happened around them.

body-sm

0.875rem / 400 / 1.5

Limited. When it's gone, it's gone.

label

0.75rem / 500 / 1.0 / uppercase / 0.08em

New Drop · Esmeralda 2026

surface hierarchy

Every surface in the store is one of three glass levels. Naming them as tokens means no raw rgba values in component code — any developer or AI tool knows exactly which surface to reach for without guessing.

glass light

glass dark

glass solid

--color-surface

Product cards, nav pill, cart panel. The default surface — sits lightly on top of the cloud.

^ hover to preview ^

motion

Two motion patterns define the brand feel.

float

product images drift -12px vertically on a 6s ease-in-out loop. Ambient, unhurried. Every floating element has a staggered delay so nothing moves in unison.

sibling dim

when one product is hovered, siblings drop to 70% opacity. The hovered item scales to 1.05× and rotates 1°. The effect pulls focus without hiding anything.

Both animations respect prefers-reduced-motion. No exceptions.

^ try hover over a product ^

cross-platform tokens

One tokens.json file. Two platforms. Change a value once — web store and iOS app stay in sync.

web → CSS custom properties in app.css, consumed by Tailwind

iOS → BrandTokens.swift — glass surfaces become native .ultraThinMaterial and .regularMaterial. better performance, better system integration

selected components

Full component library in Figma, tokens synced via Tokens Studio — no manual re-entry. A few examples:

CHECK OUT

CART×

Edge Esmeralda Tee40$

CORAL

QTY 1DELETE

shippingcalculate at checkout

subtotal40$

OVERSIZED TEE (SIZE GUIDE)×

S

M

L

XL

2XL

3XL

LENGTH

27.56"

28.35"

29.13"

29.92"

30.71"

31.10"

SHLDER

20.87"

21.65"

22.44"

23.23"

24.02"

24.80"

CHEST

22.05"

22.83"

23.62"

24.41"

25.20"

26.38"

SLEEVE LENGTH

8.19"

8.46"

8.74"

9.02"

9.29"

All measurements in inches. Sizes may vary slightly.

ADD TO CART$40

A speculative sketch of what flourishing looks like when you build it on purpose: part summer field journal, part founding document. Hilltop conversations, open-air dinners, whiteboard sessions past midnight, and mornings that feel like permission — each moment suspended between transience and permanence.

sizing info >

Fabric: 100% cotton

Color: CORAL

Size:

SMLXL

0merch market place policy Edge City×

Figma is one path. But because DESIGN.md fully specifies every token, surface rule, and interaction pattern, an AI agent can build components directly from the spec — to the same standard, without opening a design file. Every interactive component in this case study was built that way: DESIGN.md as the brief, Claude as the builder.

the AI-native commerce layer — increase visibility. —

AI-mediated shopping is growing. When someone asks Claude or Perplexity "where do I get Edge City merch?" — you need to be the answer. This layer makes that possible.

llms.txt + llms-full.txt — the emerging standard for LLM discoverability. Every product, every page, in plain language. Crawled by Claude, Perplexity, and others automatically.

user asks AI agent

"where do I get Edge City merch?"

agent crawls domain root

goods.edgecity.live /llms.txt

reads plain text file

products, pages, pricing, intent

builds context

structured for LLM parsing

returns accurate answer

"Edge City sells limited-run..."

^ this happens automatically, every time an AI agent encounters the domain ^

JSON-LD Schema.org markup — structured product data auto-generated from live Shopify data. Every product, including future ones, marked up correctly without touching the code again.

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Product", "productID": "ecg-001", "name": "Edge City Unisex Tee", "description": "permanent piece documenting Edge City's foundational design language", "brand": { "@type": "Brand", "name": "Edge City Goods" }, "color": "black", "material": "100% cotton", "size": [ "S", "M", "L", "XL", "2XL" ], "additionalProperty": [ { "@type": "PropertyValue", "name": "fit", "value": "unisex oversized" }, { "@type": "PropertyValue", "name": "effect", "value": "acid wash" }, { "@type": "PropertyValue", "name": "type", "value": "permanent" }, { "@type": "PropertyValue", "name": "event", "value": null }, { "@type": "PropertyValue", "name": "edition_size", "value": null } ], "offers": { "@type": "Offer", "availability": "https://schema.org/InStock", "priceCurrency": "USD" }, "creator": [ { "@type": "Person", "name": "Tessa Maneewong" }, { "@type": "Person", "name": "Timour Kastour" } ], "isBasedOn": "Buckminster Fuller patent 3197927" } </script>

FAQ page built as explicit Q&A — the format chatbots parse most effectively. What is Edge City? What is a network state? What does "tools for human flourishing" mean? Structured for answer engines, not keyword density.

Product metadata strategy — SEO titles, descriptions, and tags written to answer real questions people ask AI, not keyword-stuffed for Google.

AI-mediated discovery is still in early adoption. Most brands haven't structured their inventory for machine consumption yet. This builds that infrastructure while the gap is still open.

outcome —

The brief named two problems: no design system, and no machine legibility. Both were resolvable — they just required building the right artifacts in the right order. Each deliverable below maps directly to one of those problems.

BRAND.md — the living brand document. the why behind every visual decision.

DESIGN.md — one file any developer or AI coding tool reads before touching the codebase.

tokens.json — platform-agnostic token file. web and iOS in sync.

Figma library — full component library, every variant, every state.

llms.txt + JSON-LD — the store is machine-readable.

FAQ page — structured for answer engines.

INSTRUCTIONS.md — a reusable workflow that reproduces this entire deliverable set for any future project.

A developer joining the project cold can open DESIGN.md and build to spec from day one — design decisions made once carry through every future build.

An AI coding session that previously returned generic Shopify patterns now opens with full token context. The gap between AI-generated and on-brand closes on the first pass.

When an AI agent is asked where to find Edge City merch, the store surfaces in the answer — not as a ranked result, but as a direct response with product name, price, and availability.