diagramly.xyz
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.
kage