Social Images customization controls

The current social image design tool works great & easy to use for begginers but the design possibilities are quite limited with current control options.

The idea is to add a few more low effort controls that increases the design posiblities and improve outcome by a great margin.

1. Custom gradient backgrounds

Problem: gradients are fixed presets. A business cannot produce a background in its own brand colours, which is the single most common thing an SMB wants from a template. Today the only path to a brand-coloured background is a flat solid fill.

Behaviour: two colour stops with hex input, plus an angle control. Keep the existing presets as a starting row.

Implementation: two hex fields and eight fixed angles (0, 45, 90, 135, 180, 225, 270, 315) rather than a free dial, which is easier to build and produces better results from non-designers. Add a "generate from brand colour" button that derives a second stop by lightening the brand colour by roughly 25% and shifting hue 15 to 20 degrees. That button is the plug-and-play path, and most users will never touch the hex fields.

2. Automatic text contrast

Problem: with the card removed, review text is a fixed colour. Any user who picks a light background gets an unreadable image. Live bug in the two existing no-card templates.

Behaviour: compute relative luminance beneath the text and switch the text stack between light and dark. Applies to review text, author name, rating number, and the Google wordmark together.

Implementation: WCAG relative luminance. Sample at the text block's centroid for gradients; after the overlay for photos. Ship automatic with no user-facing control.

3. Background overlay, 0 to 70% darken

Problem: photo backgrounds only work behind an opaque card, so the photo is wallpaper. With the card off, text on a raw photo is unreadable on most uploads.

Behaviour: one slider applying a black overlay to the background layer only.

Implementation: one composited layer between background and content. Default 0% for colour and gradient, 40% when a photo is set.

Unlocks: photo backgrounds with the card removed, the layout style that reads as native social content rather than a template.

4. Text alignment, left or centred

Problem: every template is left-aligned.

Behaviour: one toggle covering review text, author row, and star row as a group. Logo and rating stay in the bar.

Implementation: trivial. Flag it in the template preset.

Unlocks: a visibly distinct variant of every existing template.

5. Bar treatment, height and style

Problem: the bar is a fixed-height strip whose only variable is colour, and it only exists when the card background is on.

Behaviour: a height option (compact / standard / tall) and a style option (solid / hairline / none). Allow a bar when the card is off.

Implementation: the bar becomes an independent layer rather than a child of the card. Hairline renders a 2px rule in the brand colour with the logo and rating on the background. None floats them directly.

Unlocks: the split-block layout via tall, the editorial look via hairline, and a light bar on dark templates.