Portfolio UI Kit for EU Freelancers: your brand colour, WCAG-checked

If you are a freelance designer and your clients are in the EU, the UK or the US, your portfolio site does two jobs. It shows the work, and it collects the enquiry. The second job is where the rules live.

Start with the cookie banner. On 6 January 2022 the French regulator CNIL announced fines of €150,000,000 against Google and €60,000,000 against Facebook. The reason was not that the sites used cookies. It was that accepting took one click and refusing took several. The lesson for a one-person studio is the same as for a search giant: put Reject all beside Accept all, the same size, before any analytics loads. That exposure starts the day your analytics goes live, not the day someone complains.

Then the contact form. In Planet49 (C-673/17, 1 October 2019) the Court of Justice of the EU ruled that a pre-ticked box is not valid consent. If your contact form carries a newsletter or privacy checkbox, its default state has to be empty. Most portfolio mock-ups never draw that state at all, so it gets built however the developer guesses.

Then contrast. WCAG 2.2 level AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for user-interface components. Brand colours break this more often than anything else, because designers pick the colour first and put white text on it second. We ran a worked example on the free page: an amber brand colour, #F59E0B, with white text on the Hire me button measures 2.15:1. That fails AA. The page then darkens the colour in small steps until both text pairs pass and returns #A06603, which measures 4.78:1 with white text. A violet, #7C3AED, passes as it is at 5.70:1. The page computes them from the WCAG formula in your browser.

What this portfolio UI kit contains. Eight components with 26 variants: Project card (Default, Featured, Hover), Button (Primary, Secondary, Destructive, Disabled), Contact field (Default, Focus, Error, Disabled), Consent checkbox (Unticked by default, Ticked by visitor, Error), Cookie banner (EU-EEA and UK opt-in, US notice, Essential only), Availability badge, Skill tag and Project filter. Every variant's text and fill pair is measured, and the lowest pair in the kit is 6.18:1, red error text on the light surface. Every clickable variant is at least 24px tall, the WCAG 2.2 target-size minimum.

The region variants are there because the rule changes with the visitor. EU and EEA visitors, and UK visitors under PECR, get an opt-in banner: nothing non-essential loads until they choose. US visitors get a notice with an opt-out, because most solo freelancers sit below the thresholds that trigger state privacy laws such as California's. And if your site uses essential cookies only, the essential-only variant says so and asks for nothing.

What is free. The Project card and the Button, 7 variants, are enough to build the whole portfolio home page grid with hire-me buttons. They are yours to keep and ship. The paid kit is the go-live layer you only miss once the grid exists: the form states, the consent checkbox, the banners, the badge, the tags and the filter tabs.

How it arrives. Figma has no open file format for a third party to write, so the kit ships as a .sketch file that Figma opens when you drag it in, 26 SVG files you can paste as vectors, and a Figma plugin (manifest.json plus code.ts) that creates real components combined as variants once you compile it. Some component structure may be simplified in the .sketch import. Sketch users open the same file directly.

Before you pay anything, type your own brand hex into the free page and read your own ratios.