Portfolio UI Kit — testimonials that name the relationship (FTC 16 CFR 465)
For freelance designers and small studios whose portfolio shows client quotes to US clients. Choose who wrote the quote and where your label sits, and you get the rule, the badge and the contrast. It runs in your browser; nothing is uploaded.
Why a free portfolio kit gets this wrong
Free portfolio kits ship a testimonial slider with a stock face and "Jane Doe, CEO", and put any disclosure in a hover tooltip. 16 CFR 465.2 bars a business from writing a testimonial by someone who does not exist, and 465.1(c)(4) says a disclosure you must hover to see is not clear and conspicuous. Under 465.1(a) a business includes an individual who sells services, so a solo freelancer is covered.
Stakes: up to $53,088 per violation, the maximum civil penalty under FTC Act Section 5(m)(1)(A), 16 CFR 1.98(d) (2025 level, kept for 2026 by OMB M-26-11). Yardstick: DOJ's Fitzpatrick Matrix rates a 15-year litigator at $851/hour for billing year 2026.
What is in the kit — 8 components, 28 variants
| Component | Variants | |
|---|---|---|
| Testimonial card | 4: paying client · discount disclosed · employee disclosed · placeholder, do not publish | free |
| Relationship badge | 4: paid client project · discount given · friend or family · employee | free |
| Portfolio button | 4: primary · secondary · download · disabled | full |
| Work filter chip | 4: selected · unselected · client work · concept | full |
| Section tab | 3: active · inactive · hover | full |
| Client avatar | 3: initials · logo slot · under NDA | full |
| Detail tooltip | 2: extra detail · hover-only, fails | full |
| Review request alert | 4: neutral ask · sentiment reward, blocked · sent · error | full |
Free: the testimonials section (card + badge, 8 variants) as Figma plugin, .sketch and SVG. Full: the rest of the portfolio page, 20 more variants. 6 color tokens you set to your brand HEX codes.
How to import: in Figma, drag the .sketch file onto the file browser (Sketch users open it directly), or copy an .svg and paste it, which lands as an editable vector. The .sketch carries each variant as a named, filled shape without its text label, and part of the component structure is simplified; the SVGs and the plugin carry the labels. Menu names differ by Figma version and UI language. This is a design file, not legal advice.