pitch.com
Design analysis
A compact, full-width closing bar that uses a deep brand colour, generous horizontal padding, and a single small legal line. The softened bottom-right corner adds a subtle signature detail without competing with the rest of the page.
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/pitch-com/6703b162-6073-44e6-a626-e3df0dc35c4b-1789060650-11.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/pitch-com/6703b162-6073-44e6-a626-e3df0dc35c4b-1789060611-full.webp - Component on Kage: https://kage.design/component/pitch-footer ## Before you start Ask what the user's product is, who it is for, and what its brand personality and visual system are. Then apply the principles below to create a footer for that product—not a copy of the reference. ## Design the section Build a minimal legal footer as the final visual block of a marketing page. It should feel like a calm, confident closing edge rather than a dense navigation footer. - **Layout and alignment:** Use a wide footer container that spans the available content width, with a single legal/copyright line aligned to the bottom-left. Keep the content vertically centered within the bar. On large screens, use approximately 64–80px horizontal padding and 42–56px vertical padding; reduce to 24px horizontal and 28–36px vertical padding on small screens. Keep the footer visually connected to the page above, while allowing a small outer gutter if the surrounding layout uses one. - **Shape:** Give the footer a strong, simple block silhouette. Use a large bottom-right radius, approximately 24–32px, and optionally a smaller or zero radius on the other corners depending on how it meets the page edge. Avoid excessive decoration. - **Typography hierarchy:** Use one line of compact, medium-to-semibold legal text. Set it around 14–16px with a 1.3–1.5 line height. The text should be highly legible but clearly secondary to the page’s main content. Use the product’s sans-serif typeface or a similarly clean grotesk, with modest letter spacing. - **Colour:** Choose one deep, saturated brand tone for the background—roughly in the range of dark violet/navy, such as `#2D126B` to `#35157A`, but adapt it to the user's palette. Use a warm white or near-white for the legal text, such as `#F8F6F2`. Maintain strong contrast without pure black or harsh white unless the brand calls for it. - **Borders and radius:** Prefer no visible border. If separation from a light page background is needed, use a very subtle translucent edge such as `rgba(255,255,255,0.12)` or a 1px border in a related dark tone. Keep the radius intentional and consistent with the rest of the product’s design system. - **Content behavior:** Replace the legal line with the user's own copyright, company, or policy text. Allow the text to wrap naturally on narrow screens, but avoid adding large link groups or secondary navigation unless the product genuinely needs them. - **Interaction:** If legal links are included, give them a restrained underline or colour shift on hover and a clearly visible keyboard focus state. Do not add motion to the container; the footer should remain stable and quiet. - **Responsive behavior:** Preserve the strong horizontal bar on desktop. On mobile, let the legal text occupy the available width and wrap cleanly, keeping the same contrast and rounded-corner character. ## Never - Never use the reference’s logo, product name, company name, or exact copyright copy. - Never copy the reference’s exact colour values, dimensions, spacing, or corner treatment without adapting them to the user’s brand. - Never include the reference’s illustrations, imagery, icons, or other branded visual assets. - Never reproduce the source page verbatim; use this as a design-language reference for a footer with the same level of restraint and emphasis.
kage