Affordance

Affordance presents product work the way designers explain it in a review: a soft grey canvas, white cards on a 4px rhythm, pill chips, Instrument Sans headings with Geist Mono labels, and one indigo accent. Screens carry numbered callouts, mockups sit in phone and laptop frames drawn in CSS, and results show as metric cards with green deltas.

It is built on the Symelo portfolio foundation, so projects are a real content type with their own fields, and everything below works without a page builder:

• Projects: a Projects menu with disciplines and industries, client, year, role, duration, location, tools, a live link, a summary, galleries in four layouts, a before/after slider, the challenge / approach / outcome of the case study, results, credits, a client quote, a map and the next project. Values are edited with the free Secure Custom Fields plugin (the theme offers to install it) and keep showing without it.
• Case-study cards: the projects archive is a two-column list of cards with the summary and the headline metric; the home page opens with three featured case studies stacked as overlapping cards.
• Filterable work: discipline chips set as mono tags, search and sort; the grid updates without a reload, keeps the address shareable and works without JavaScript.
• Case studies as long reads: a reading progress bar, a sticky "On this page" table of contents with the project facts, numbered challenge / approach / outcome sections, impact metric cards, an "Old flow / New flow" before/after slider, screens, the client quote, the team and the next case study.
• Annotated screens: a screenshot with numbered callout dots and a matching numbered legend, for explaining design decisions.
• Heroes: case-study card stack, metrics bento, laptop and phone mockups, a Discover / Define / Design / Deliver timeline and a testimonial-led opening.
• Your studio: an availability badge ("Available for work from …") in the header, the hero and the footer; studio details, clients as a marquee, awards as an index table, services as a numbered list.
• Forms: a project inquiry form (it fills in the project a visitor came from), contact, collaboration request and newsletter forms. Messages are stored in the dashboard and emailed to you.
• Video: featured videos for projects and posts.
• Galleries: Masonry and Carousel gallery styles and a lightbox with captions, swipe and keyboard support.
• Motion: calm fade-ups, staggered grids and gently pulsing callouts; all of it off for visitors who prefer reduced motion.
• Light and dark: a switch in the header that remembers the visitor's choice, and three style variations besides the default: Figma-ish, Mint and Lavender, each with its own dark partner.

Templates: blog home, single post, page, archive, search (projects, posts and pages together), 404, the project page, the projects archive, discipline and industry archives, plus the custom templates Landing page, Wide and Case study. Template parts: header, header over a hero image, footer and a minimal footer.

More than fifty patterns: six heroes (the affordance statement, the project index, the showreel, the latest project, a split portrait and a disciplines marquee), selected work, the project index, the filterable grid, spotlight, services, process, the studio in numbers, clients, awards, testimonials, questions, galleries, video sections, forms, journal lists, calls to action, social links and full pages for Home, Work, Studio, Contact and a Landing page.

The demo content (Appearance → Import demo) installs a complete creative studio with nine projects, disciplines, industries, clients, awards and the Home, Work, Studio and Contact pages.