Dragonfruit Society Web Design
← Work

Fort Collins Food Co-op

A member-owned grocery store outgrew its Squarespace site. I led the rebuild into an accessible site whose facts can't go stale.

The Fort Collins Food Co-op home page on a cream background. The stacked beaver logo is top left with navigation to the right, then the headline "Your co-op, your community." in burnt orange beside a photo of the store aisle, and a strip with the address, winter hours and phone number.
Role
Project lead, Design, Development
Client
Fort Collins Food Co-op
Year
2026
Status
Preview live, domain move pending
Site
fococoop.dragonfruitsociety.com
Stack
  • Static HTML
  • Node build script
  • Cloudflare Pages
  • Pages Functions
  • Cloudflare D1
  • Resend
  • anime.js
  • Sharp
  • axe-core

The problem

The Fort Collins Food Co-op is a member-owned grocery store, also known as Mountain Avenue Market, and it has been going since 1972. When it moved stores, its Squarespace site didn’t keep up. The footer still showed the old address. One page was placeholder copy and another said “Under Construction”. Expired promos and typos were still up.

My role

I work for the co-op and led the rebuild, from the plan and the brand work through to the build.

What I designed

  • The brand, rebuilt in code. A cream, burnt-orange and sage palette, with colors darkened wherever the originals failed contrast.
  • Open-licence fonts standing in for the old licensed ones. The original logo and the beaver are kept exactly as supplied.
  • The real site’s own devices, kept so it still feels like the store: circular photo rows, an orange speckled band with scroll-driven bokeh, and hand-drawn strokes.
  • No generic template blocks. The “AI template” sections came out.
  • A leaner sitemap. Three membership pages merged into one, and a Visit page was added.

How I built it for the long haul

The site is plain static HTML written by a small Node script, so it is simple to host and easy to look after. The part I care about most is that it guards itself. Shared facts live in one file, and every page and all the search-engine data read from it, so the stale-footer problem can’t come back. The build fails if the site breaks a rule, which means a mistake gets caught before it ships rather than after a member sees it.

How it works

One source of truth for the facts

  1. Shared facts live in one file

    Address, seasonal hours and phone number are written once.

  2. Every page reads from it

    A small build script writes each page and the search-engine data from that file.

  3. The build checks the rules

    The build fails on the old address, typos, missing alt text, broken links, low contrast or oversized files.

  4. Static pages go live

    The finished pages are served from Cloudflare Pages.

What happens when a form is sent

  1. A visitor sends a form

    There are three: a deli order, a job application and a member update.

  2. It is saved

    Each submission is stored in a small database, so nothing is lost if an email fails.

  3. The right inbox is told

    An email goes to whoever handles that kind of form.

Color

The project’s own palette. Every chip carries its name, hex value and job, so color is never the only signal.

  • Cream#E5DED1Page background
  • Paper#F7F4EEInfo strips and banners
  • Sage#36523FLinks, headings and buttons, darkened to pass contrast
  • Burnt orange#C45E28Large headings and decoration only
  • Deep orange#9A4619Small orange text, darkened to pass contrast
  • Band orange#AD4D1DThe speckled membership band behind white text
  • Ink green#26352BBody text
  • Mint#98C4A8Decoration only, it fails contrast for text

Type

  • FredokaHeadings, buttons and labelsOpen licence (SIL OFL)

    Your co-op, your community.

  • LoraBody textOpen licence (SIL OFL)

    Everyone is welcome, member or not.

Open-licence stand-ins for the old site’s licensed fonts. Chosen to feel close to the originals without a licence fee.

The whole Fort Collins Food Co-op home page from top to bottom. It has the hero and info strip, a Double Up Food Bucks feature, circular photos of what the store sells, an orange speckled membership band, a news section, and a dark green footer.
The full home page, top to bottom.
The membership page on desktop. The heading reads "Become a member-owner", with a list of member benefits on the left and a bordered ownership share card on the right.
The Visit page on desktop, headed "Find the market", with the address, winter hours, phone and email on the left and a photo of people sharing a table in the store on the right.
The Double Up Food Bucks page on desktop. The heading reads "Double your SNAP dollars on fresh food", with numbered steps on the left and a photo of Double Up coupons on a counter on the right.
The home page on a 390 pixel wide phone, with the logo and menu on top and the hero headline stacked above the store photo.
The membership page on a 390 pixel wide phone, with the heading and the opening paragraph about ownership shares.

Where it stands

The rebuild has 15 pages, and axe-core ran on all 15 with no violations. The old addresses redirect to their new homes, and the redirects are tested. It is running now on a preview address, and the move to the co-op's own domain, fcfood.coop, is pending. Online membership is built to go through a hosted payment link, but it is not switched on yet.

The Fort Collins Food Co-op logo. A beaver pushes a cart of bread and carrots beside the words "Fort Collins food CO-OP" and the tagline "Good food and good folks since 1972". Visit the preview site