Session Overview
Sam asked for replacement "Team" cards for the OptiSigns digital signage screens at app.optisigns.com/app/assetManagement. The existing cards (Team Austin, Abigail, Jimmy, Trent, Payton, Jon, Nick, Terry, etc.) use an off-brand green and cream/tan kraft-paper look that does not match Sam Aguiar Injury Lawyers branding, and the member headshots have inconsistent backgrounds (black, navy gradient, office bokeh). Goal: 3 mockups that incorporate brand colors, with creative freedom on fonts and layout, plus better/unified photo backgrounds. Pick a winner, then apply the template to every team.
What Was Accomplished
Three distinct 1920x1080 PNG concepts were generated, all using the firm palette (Aguiar Blue #0B212D, Aguiar Orange #D97706, Deep #0a1520, White, Light Gray #F5F5F5) and Poppins. Each was built with the real Team Austin members and photos: Austin Pollard (Attorney), Austin Johnson (Case Manager), Jennifer Paxton (Legal Assistant).
The mismatched photo backgrounds were unified with a consistent navy radial vignette plus a mild navy color grade, so all three headshots now read as one dark backdrop without per-image background removal. This is a mockup-stage harmonization; true subject background removal is offered as an optional upgrade.
Concepts:
- A, Spotlight: dark navy gradient field, white firm wordmark top-right, rounded photo cards with soft shadow + small orange base accent, white names, orange role labels, thin orange footer rule. Understated and corporate.
- B, Billboard: orange-forward TEAM AUSTIN headline, diagonal navy panel + orange corner sliver echoing the firm billboard style, orange top-edge on each card, solid orange role pills, two-line brand footer. Most attention-grabbing on screen.
- C, Editorial: light gray background, navy top header band with the wordmark, navy photo frames with orange L corner accents, navy names, orange outline role pills. Brightest and most legible from a distance; closest in feel to the current light cards but on-brand.
Technical Specifics
- Renderer: Python + Pillow (PIL). Reliable native PNG output; no headless browser needed. Script at outputs/make_cards.py (working copy).
- Output spec: 1920x1080, RGB, PNG, ~0.85 to 0.95 MB each. Matches OptiSigns landscape Full HD; well under size limits. ~90px safe margins for overscan.
- Fonts: local Poppins at /usr/share/fonts/truetype/google-fonts/ (Bold, Medium, Regular, Light; no SemiBold present, Bold used as fallback for semibold).
- Logo: Documents/Images/Full Logo.PNG is white+orange artwork on a BLACK background. Black is luminance-keyed to transparent so the wordmark drops cleanly on navy. NOTE: Documents/Images/Logo.png is NOT the firm A-mark; it is a round badge (reads ATAA-like) and should not be used as the brand mark. The keyed Full Logo is the correct mark.
- Headshots used: Documents/Images/Pollard Headshot.jpg (3124x4165), Documents/Staff Headshots/Austin Johnson.jpg and Jennifer Paxton.jpg (2304x1728). A full Documents/Staff Headshots/ folder exists with most other team members, which makes a batch run across all teams feasible.
What Was Tried And Didn't Work
- Playwright/Chromium HTML-to-PNG: pip installed but the chromium binary download was slow and the bash wrapper timed out. Pivoted to PIL, which is more reliable here and gave full control over gradients, rounded masks, shadows, and Poppins text. No need to revisit unless a future design needs CSS-grade effects.
- First render had bottom crowding (role labels collided with the footer) on A and B, and B initially used the wrong round badge and had a subtitle overlapping its underline. All fixed: cards raised/shortened, badge swapped for the keyed wordmark, subtitle repositioned, B phone line set to white for contrast over the orange sliver.
Decisions Made
- Move off the green/cream look entirely to firm navy + orange. The brief was to incorporate brand colors; the current cards are off-brand.