# TaylorMade Solutions

> A portfolio rendered in many design systems: one content brief, rebuilt
> against a different DESIGN.md per style. Plus writing on machine
> legibility — making meaning readable to indexers, extractors, synthesizers
> and operating agents.

Maintained by Taylor Coteus — engineer working on design systems, multi-agent
build pipelines, and content engines.

## Core pages

- [Home](https://taylormade-portfolio.com/): who Taylor is and what the site demonstrates.
- [Design gallery](https://taylormade-portfolio.com/design-gallery): all 30 catalogued design systems, 20 of them built out as full pages.
- [Writing](https://taylormade-portfolio.com/blog): essays on machine legibility and agent-readable interfaces.
- [About](https://taylormade-portfolio.com/about): background and how the build pipeline works.

## Writing

- [Machine legibility: one discipline, four readers](https://taylormade-portfolio.com/blog/machine-legibility): The web grew a second audience that reads structure instead of pixels and greps instead of browses. Here is the thesis, and the four claims it rests on. (2026-07-25, 2 min)
- [The accessibility tree is the agent-web's SERP](https://taylormade-portfolio.com/blog/accessibility-tree-is-the-agent-serp): An operating agent's entire perception of a page is its accessibility snapshot. Whatever is not named there does not exist to the agent — which makes semantic HTML a ranking factor with teeth. (2026-07-24, 3 min)
- [SEO, AEO, GEO: one discipline, four consumers](https://taylormade-portfolio.com/blog/seo-aeo-geo-one-discipline-four-consumers): The acronyms fight over which reader you optimize for. Roughly 70% of the work is shared — and the fourth reader, the one that acts rather than ranks or quotes, has no acronym yet. (2026-07-23, 3 min)
- [Agentic retrieval: grep beats embeddings](https://taylormade-portfolio.com/blog/agentic-retrieval-grep-beats-embeddings): Inside agent harnesses, retrieval shifted from frozen embedding indexes to lexical, live, self-correcting loops. The reason is failure behavior — and the SEO consequence is that exact-match keywords are back. (2026-07-22, 3 min)
- [Five blind spots in the agent-SEO conversation](https://taylormade-portfolio.com/blog/blind-spots): Snapshot density, internal surfaces, the sr-only inversion, affordances as backlinks, and the fact that nobody's rank tracker sees agent traffic. Each with the one move that captures it. (2026-07-21, 3 min)

## Design studies

Each page below renders the same portfolio brief in a different brand's visual
language. Same content, different design system — useful as a corpus for
comparing how one brief reads across 20 distinct systems.

- [Supabase](https://taylormade-portfolio.com/styles/supabase): White canvas with emerald (#3ecf8e) accent and a dotted-grid backdrop. Inter substitute for Circular at -1.92px tracking. Hero is a faux Supabase project dashboard: macOS chrome + SQL editor strip with syntax highlighting + live database table showing engagements as rows with status pills. Near-black on-primary text on the emerald CTA — Supabase's signature button idiom.
- [Notion](https://taylormade-portfolio.com/styles/notion): Calm-canvas productivity aesthetic: white surface, Notion purple (#5645d4) accent, navy band breakout for the hero. Pastel card tints (peach/mint/lavender) on the three capability cards. Hero is a faux Notion workspace doc with sidebar + toggle rows + mention chips that rises from the navy band floor. Inter substitutes for Notion Sans.
- [Spotify](https://taylormade-portfolio.com/styles/spotify): Pure-dark canvas (#121212) with Spotify Green (#1ed760) used scarcely on primary CTA + now-playing dot. Heavy box-shadows on elevated surfaces. All buttons fully pill-rounded and uppercase with positive tracking. Hero is a faux now-playing card: 2x2 album-art mosaic + progress bar + playback controls + queue preview, framed beside the headline.
- [Cursor](https://taylormade-portfolio.com/styles/cursor): Warm-cream canvas (#f7f7f4) with Cursor Orange (#f54e00) reserved for primary CTA + wordmark dot only. Hero is a faux Cursor IDE: left half is a syntax-highlighted strategy.ts file with an inline AI suggestion at the cursor; right half is a Cursor AI chat panel with stage pills (Thinking / Reading / Editing / Done) in pastel accents. Inter substitutes for CursorGothic; JetBrains Mono for code surfaces.
- [Tesla](https://taylormade-portfolio.com/styles/tesla): Photography-first gallery aesthetic: pure white canvas, single Electric Blue (#3E6AE1) accent reserved for the primary CTA, no shadows / no gradients on chrome, 4px button radius. Universal Sans isn't public — Inter substitutes for both Display and Text. Hero is a stylized cinematic sky→land gradient stand-in for product cinematography. Contact section flips to a Carbon Dark fold for a 'credits roll' final CTA.
- [Vercel](https://taylormade-portfolio.com/styles/vercel): Pure white-on-black minimalism with the geometric triangle as the brand anchor. Inter substitute for Geist Sans + JetBrains Mono for Geist Mono. Shadow-as-border (0 0 0 1px rgba(0,0,0,0.08)) on cards instead of CSS borders. Hero is a faux deployment dashboard with build status, region pills, and metric strips. Workflow accents (Ship Red, Preview Pink, Develop Blue) appear only on the process pipeline.
- [Figma](https://taylormade-portfolio.com/styles/figma): Bold color-blocked rhythm with sectional surface flips: white hero → lilac capabilities → cream work → navy-inverse process → lime testimonial → pink contact. Inter substitutes for Figma Sans, JetBrains Mono for the eyebrow caps. Hero is a faux Figma desktop canvas with Layers / canvas frames / Properties panels — comments and tab toggles included. Single-page sectional palette beats anything atmospheric.
- [Airbnb](https://taylormade-portfolio.com/styles/airbnb): Warm consumer-marketplace: pure-white canvas, Rausch coral (#ff385c) as the single brand voltage on CTAs and accents, Plus Jakarta Sans standing in for Airbnb Cereal VF, soft rounded shapes everywhere (8px buttons, 14px cards, pill search), and a stylized stay-card color-field hero composition in warm coral-to-cream gradients.
- [Apple](https://taylormade-portfolio.com/styles/apple): Photography-first museum-gallery aesthetic: off-white parchment canvas and near-black product tiles alternate edge-to-edge with no decorative chrome — the color change is the divider. Single Action Blue (#0066cc) accent on pill CTAs. SF Pro system stack (Inter fallback) at negative letter-spacing for the signature Apple tight headline cadence.
- [Linear](https://taylormade-portfolio.com/styles/linear.app): Deepest-dark canvas (#010102) with a four-step surface ladder, hairline borders, and lavender-blue (#5e6ad2) used scarcely on brand mark, primary CTA, and focus rings. Aggressive negative letter-spacing on display type, single-voice Inter substitute for Linear Display/Text. Hero is dominated by a faux Linear issue panel framing the engagement pipeline as a project view.
- [Raycast](https://taylormade-portfolio.com/styles/raycast): Pure-near-black canvas with hairline borders, surface-ladder elevation, ss03-Inter typography, and a faux command-palette mockup as the load-bearing hero visual. Single white pill CTA; saturated category accents (yellow/red/green/blue) only inside extension-style icon tiles. Signature red diagonal-stripe gradient at the top of the hero — used exactly once.
- [ElevenLabs](https://taylormade-portfolio.com/styles/elevenlabs): Quietly editorial print-magazine aesthetic: warm off-white canvas, EB Garamond weight 300, and atmospheric pastel gradient orbs (lavender, sky, rose) as the sole color.
- [MiniMax](https://taylormade-portfolio.com/styles/minimax): Stark white canvas with maximum contrast: near-black pill CTAs and three vibrant gradient product cards (coral, magenta, blue) that create the MiniMax brand tension between austerity and color. DM Sans at 80px brings magazine-grade hero presence.
- [Mistral AI](https://taylormade-portfolio.com/styles/mistral.ai): Utilitarian-retro: Arial-everywhere system stack at huge scale, full-bleed sunset gradient hero with chunky 8-bit pixel motifs (orange M logo, space-invader mascot), and a six-band cream-to-crimson sunset stripe closing band. Deeply unfashionable, by design.
- [MongoDB](https://taylormade-portfolio.com/styles/mongodb): Deep navy-teal authority with electric-green pill CTAs: disciplined contrast, geometric Inter type, and flat hairline-border cards that earn trust through restraint.
- [Ollama](https://taylormade-portfolio.com/styles/ollama): Paper-white minimalism: zero gradients, zero shadows, single dark-surface inversion, and pill-shaped black buttons as the only visual punctuation.
- [Replicate](https://taylormade-portfolio.com/styles/replicate): AI lab notebook crossed with a print magazine: warm cream canvas, hot-orange stamp accent, aggressive display type at line-height 1.0, dark code-story band, and pill-rounded interactive elements.
- [Stripe](https://taylormade-portfolio.com/styles/stripe): White-canvas precision with deep-navy headings at weight 300, Stripe Purple accents, and blue-tinted multi-layer shadows that give elements an atmospheric, floating depth.
- [Cohere](https://taylormade-portfolio.com/styles/cohere): Enterprise AI command-center: white canvas, coral accents, deep-green feature band, monumental Space Grotesk type.
- [NVIDIA](https://taylormade-portfolio.com/styles/nvidia): GPU computing. Green-black energy, technical power aesthetic.

## Feeds

- [RSS](https://taylormade-portfolio.com/feed.xml)
- [Sitemap](https://taylormade-portfolio.com/sitemap.xml)