## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/workid-ai/2843b616-ed30-482d-adaf-40c736e4842a-1789106674-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/workid-ai/2843b616-ed30-482d-adaf-40c736e4842a-1789106613949-full.webp
- Component on Kage: https://kage.design/component/workid-logo-cloud

## Before you start
Ask what the user's product does, who it serves, and what its brand personality and visual identity are. Then apply the principles below to create an original version for that product—not a copy of the reference.

## Build a compact hiring-activity logo cloud
Create a lightweight social-proof section that communicates that recognizable organizations are actively using or participating in the product. The component should feel like a calm, trustworthy pause in the page, with a clear path for another organization to take part.

### Layout and alignment
- Use a full-width section with a white or near-white background and generous vertical breathing room.
- Center-align the entire component within a constrained content column, roughly 520–680px wide on desktop.
- Place a short, bold headline above the cloud. Keep it to one line on desktop where possible and center it precisely over the content.
- Arrange participating organizations as responsive rounded pills in two or three centered rows. Let the pills wrap naturally rather than forcing a rigid grid; vary row lengths slightly so the cloud feels curated and compact.
- Each pill should contain a small brand/avatar mark area followed by the organization name. Use realistic placeholder marks generated for the user's product, not copied logos.
- Add a final subdued placeholder pill beneath the participating organizations to suggest an open slot or future participant. Pair it with a small handwritten-style or informal annotation only if that suits the user's brand; otherwise use a subtle helper label.
- Put the primary CTA beneath the cloud, centered and visually separated from the pills by about 20–28px.
- On small screens, reduce pill padding and gap, allow two-column or natural wrapping, and keep the heading readable without horizontal overflow.

### Typography hierarchy
- Use the product's typeface if available; otherwise use a clean modern sans-serif.
- Set the heading in a strong semibold or bold weight, approximately 28–32px desktop and 24–28px mobile, with tight line-height around 1.1–1.2.
- Set organization names around 15–16px with medium weight and comfortable line-height.
- Keep helper or annotation text smaller, around 13–15px, with a relaxed line-height and lower visual emphasis.
- Use sentence case and avoid excessive capitalization.

### Spacing and shape
- Give the section approximately 64–96px of vertical padding, adjusting to the surrounding page rhythm.
- Use 8–12px gaps between pills horizontally and vertically.
- Give pills generous horizontal padding, around 14–18px, and 9–14px vertical padding.
- Use fully rounded pill geometry with a radius of 999px.
- Make the CTA approximately 180–200px wide and 44–48px tall, with a clear label and comfortable internal padding.

### Colour and surface treatment
- Start with a neutral background near `#FFFFFF` or the product's lightest surface colour.
- Use near-black heading and text tones such as `#111111` and `#2A2A2A`.
- Style pills with a very light neutral fill around `#F7F7F8` or `#F4F5F7`, plus a barely visible border around `#ECEDEF`.
- Keep placeholder content lower contrast, using a fill around `#F0F1F3` and text or icon tones around `#C8CBD1`.
- Use the product's primary brand colour for the CTA. As a generic fallback, use a confident blue near `#347FEA`, with white text and a slightly darker hover state near `#2569C8`.
- Avoid heavy shadows; if needed, use only a soft, diffuse shadow such as `0 2px 10px rgba(20, 30, 50, 0.04)`.

### Interaction and accessibility
- Make the CTA visibly interactive with a subtle colour shift, lift, or shadow on hover and a clear focus ring for keyboard users.
- If organization pills link to profiles or filtered results, provide hover and focus feedback; otherwise render them as non-interactive badges.
- Ensure sufficient colour contrast, meaningful accessible labels for any avatar marks, and a logical reading order from heading to organizations to CTA.
- Respect reduced-motion preferences and keep transitions short, around 150–200ms.

### Never
- Never reuse logos, product names, organization names, copy, illustrations, handwritten annotations, or imagery from the reference.
- Never make the cloud so dense that individual organizations become difficult to scan.
- Never rely on tiny logos or colour alone to communicate meaning.
- Never invent claims of real customers or hiring activity unless the user's product has supplied that data.