Kage Design logo kage
diagramly.xyz
Diagramly footer component

Design analysis

The footer returns to a compact utility layout: brand summary and action on the left, grouped navigation in the middle, contact on the right, and a small legal row at the bottom.

Prompt preview
## 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/diagramly/9b8d5fcc-855c-4b01-a046-ef496ed19a9b-1792044172-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/diagramly/9b8d5fcc-855c-4b01-a046-ef496ed19a9b-1792044070781-full.webp
- Component on Kage: https://kage.design/component/diagramly-footer

## Before you start
Ask the user for the product name, footer links, legal requirements, contact details, and preferred brand treatment. Build an original footer using the reusable principles below.

Create a compact responsive footer on a lightly textured paper background. Use a multi-column layout with a short brand description and secondary action on the left, grouped product/explore/legal links in the center, and a contact or support destination on the right. Finish with a thin divider and a small copyright/legal row.

### Design language
- Use a warm paper surface near `#fcfbf7`, subtle dotted texture around `#e9e5dc`, primary text `#292925`, and muted text `#77756f`.
- Use a distinctive brand/display face only for the wordmark or small heading; use a clean sans-serif for all links and metadata.
- Set generous horizontal padding, a max-width container, and 3–5 columns on desktop. Keep headings uppercase or small caps at 10–11px with modest letter spacing.
- Use 12–14px link text with 10–14px vertical spacing. Add a small dark rounded action button under the brand summary if useful.
- Separate the legal row with a 1px border near `#e8e4db`; keep it visually quiet and aligned to the same container.
- Collapse into stacked groups or a two-column arrangement on mobile, with enough spacing for touch targets.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never copy the reference footer labels, email address, copyright line, exact column arrangement, or brand mark.

More components