## 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/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106717-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106640138-full.webp
- Component on Kage: https://kage.design/component/noodle-seed-logo-cloud

## Before you start
Ask the user what their product is, who it is for, and what their brand identity looks like. Then apply the principles below to create an original credibility section for that product—not a copy of the reference.

## Build this section
Create a compact, full-width social-proof band for a dark website. The section should communicate two distinct forms of trust side by side: a third-party recognition or achievement on the left, and a short line of supporting organizations, customers, partners, or backers on the right. Keep the composition quiet and premium, with proof points presented as supporting evidence rather than a loud sales pitch.

### Layout and alignment
- Use a centered container with a maximum width around 1120–1200px.
- Divide the section into two equal or near-equal columns using a very subtle vertical rule.
- Add a subtle horizontal rule above and below the band; let the rules span the viewport or the section container according to the surrounding page layout.
- Vertically center both columns within a compact band, roughly 140–170px tall on desktop.
- In the left column, align a small award badge or abstract recognition marker beside a short achievement label and a discreet external-link indicator.
- In the right column, center a small explanatory eyebrow above a single horizontal row of three to four monochrome wordmarks or text-based organization names.
- Collapse to a stacked layout below approximately 700px: remove or shorten the vertical divider, preserve the horizontal rules, and give each proof group its own generous row.
- Keep the content optically centered rather than forcing every item to share a strict baseline.

### Typography hierarchy
- Use a clean modern sans-serif with slightly rounded or neutral forms.
- Supporting labels should be small, around 12–14px, with normal weight and generous line height.
- The recognition title can be 14–16px and medium weight; keep it concise.
- The supporting eyebrow should be muted and sentence case, not uppercase-heavy.
- Organization names should be larger—approximately 24–30px—using text or simple typographic marks, with varied weights to create a natural logo-cloud rhythm.
- Use modest letter spacing; avoid over-styling or overly bold marketing typography.

### Colour
- Page and band background: near-black, approximately `#050505` to `#080808`.
- Primary text: soft white, approximately `#F2F1EE`.
- Secondary text: muted warm gray, approximately `#A6A3A0`.
- Rules and dividers: extremely subtle charcoal, approximately `#1B1B1B` to `#242424`.
- Recognition badge and organization marks: soft white or light gray, with no bright brand colors.
- Maintain accessible contrast for readable labels while allowing decorative marks to be slightly subdued.

### Borders, radius, and spacing
- Prefer 1px rules over cards or filled containers.
- Do not place each logo in an individual pill or bordered tile.
- Keep the section radius-free if it sits directly on the page background; if the surrounding design uses panels, use only a restrained radius around 8–12px.
- Use approximately 32–48px horizontal padding and 36–52px vertical padding on desktop.
- Leave 28–44px between the eyebrow and the organization row, and around 20–28px between the award marker and its text.
- Preserve generous empty space around the marks so the section feels confident and uncluttered.

### Interaction and accessibility
- If the award or supporting organizations link to external pages, make the entire relevant proof group a clear link with a subtle hover state: text brightens, and the external-link icon shifts or underlines gently.
- Do not add distracting animation; a 150–220ms colour or opacity transition is enough.
- Use semantic section markup, accessible link labels, and meaningful alternative text if actual logo assets are used.
- On small screens, keep touch targets comfortably large and avoid shrinking the logos until they become illegible.

## Never
- Never reuse the reference’s logos, organization names, award name, product name, or exact copy.
- Never include the Noodle Seed brand, its visual marks, or any recognizable elements from the reference.
- Never copy the exact logo shapes, arrangement, proportions, or wording; invent brand-appropriate proof content for the user’s product.
- Never use illustrations, photography, or decorative imagery in this component.
- Never turn the section into a loud testimonial, testimonial carousel, or dense logo grid.