TechnicalTeam grid with consistent portraits and short bios
Act as a designer and art director. Build a team grid for {{business_name}} in this style: {{visual_style}}, with brand colors {{brand_colors}}. Reuse existing image and card components.
Portraits that match:
- one crop for everyone: 4:5, eyes about 40% from the top, head and shoulders
- one treatment for everyone: the same neutral background, or a duotone in the brand colors applied in CSS or at export
- per-person object-position, so nobody's head gets cut off
- write me a short photo brief (light, framing, background) for new hires
- missing photo: an initials tile in a brand color, the same size and ratio, never a silhouette placeholder
Each person: name 17 to 18px weight 600, role 14 to 15px in a muted token that passes 4.5:1, one human line ("Ask me about fermentation"), and optional links (email, LinkedIn) whose accessible names include the person ("Email Ana Ruiz"). A longer bio opens in place with a Read more button using aria-expanded, or in a dialog, not a flip card.
Markup: a list of people, each an article with an h3; portraits with short alt text or empty alt since the name is right there; tell me which you chose.
Layout: 360: 2 columns, gap 16px; 768: 3, gap 24px; 1280: 4, gap 32px. Teams over 12 people get h2 groups by department; 1 to 2 people get a wide feature row instead of a sparse grid. Order by team or alphabetically, unless I say otherwise.
States: long names and titles wrap; links have hover, focus-visible and active; images lazy below the fold with width and height set.
Motion: none, or a 200ms photo fade on load; none under prefers-reduced-motion.
Avoid: AI-generated headshots, stock people, circular crops that cut off hair, grayscale-to-color hover gimmicks, flip cards.