Margins

The problem

Teacher marketplaces are loud. Near-duplicate listings pile up, and covers shout over each other for attention. Margins is the quieter room. It is designed so that every listing is reviewed before it goes live, and so that search understands both standards codes and plain words.

My role

I am the sole designer and builder. There is no team behind this, so the brand, the design system and the working product all come from one set of hands, which keeps them consistent.

What I designed

• The brand. A name, a “margin line” logo, and the tagline “Lessons worth keeping.”
• Voice rules. Colleague, not cheerleader. Plain words, sentence case, honest about money.
• A token-based design system. Notebook-paper colors (graphite, margin red, ruled blue and pencil yellow), Literata paired with Atkinson Hyperlegible, a 4px spacing scale, and light and dark themes.
• A 38-component library, each documented in its own README.

What I built

• A catalog, search, resource pages and seller storefronts.
• A listing editor, cart and checkout, and a buyer library.
• An admin area, a review-verification page, and methodology, license and content-policy pages.
• AI-assisted review of uploaded resources.
• Payouts to sellers through Stripe Connect.
• Watermarked downloads and branded transactional emails.

Craft and quality

The design system is enforced by the build, not just written down. A design-rule linter runs in CI and fails on raw color values or anything off the 4px scale. The tokens are generated from DTCG source files, so a color change happens in one place.

Accessibility is a target I test against, not a badge. The goal is WCAG 2.2 AA, and Playwright tests run axe accessibility checks across the app. I also wrote a UX audit of every route, then worked through the fixes: custom 404 and error pages, no disabled buttons without an explanation, and no sideways scrolling down to a 320px screen.