## 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/linear-app/3b71fb78-773e-45c4-803c-426bf7f1ae53-1789060209-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/linear-app/3b71fb78-773e-45c4-803c-426bf7f1ae53-1789060182-full.webp
- Component on Kage: https://kage.design/component/linear-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 an original version for that product rather than reproducing this reference.

## Design direction
Build a testimonial-led footer section that feels like a confident closing statement at the end of a marketing page. Use a two-card composition with one dominant wide panel and one narrower supporting panel. The section should feel editorial and spacious, with the quote carrying most of the visual weight and the attribution anchored near the bottom of each card.

### Layout and alignment
- Place the section inside a dark or near-black page background with a small, consistent outer inset so the cards read as framed tiles rather than edge-to-edge content.
- Use a responsive two-column grid: approximately 2:1 or 65/35 width split on desktop, with a tight gap of 6–10px.
- Make both cards equal in height, with a generous minimum height around 460–560px depending on the surrounding page scale.
- Align quote text to the top-left with a consistent inset of roughly 28–34px on desktop.
- Anchor each attribution row to the bottom-left using flex layout or absolute positioning with safe padding; never let it drift based on quote length.
- On mobile, stack the cards vertically, preserve the visual order, and reduce the card height while retaining generous vertical breathing room.

### Typography hierarchy
- Use a clean modern sans-serif with slightly tight tracking and a calm, high-quality appearance.
- Set the main quote in a large display size, roughly 30–38px on desktop, with a line height around 1.05–1.15 and normal-to-medium weight.
- Keep the quote width constrained within each panel so line breaks feel intentional and readable.
- Format the person’s name as compact, dark, medium-weight text around 13–15px.
- Place role, company, or context beneath the name in a smaller 13–14px style with reduced contrast.
- Treat quotation marks as part of the quote, not as a separate decorative graphic.

### Colour and surface
- Use two distinctly contrasting but harmonious panel colours: a pale cool tint such as #DDEAFF or #E6E9FF for the larger card, and a vivid acid yellow-green such as #E8FF00 or #DFFF00 for the smaller card.
- Use near-black text such as #111111 on both cards to maintain a crisp editorial contrast.
- Set the page surround to near-black, approximately #0B0D0E.
- If adding a subtle background treatment to the primary card, keep it extremely restrained: a low-opacity oversized abstract tonal shape or gradient is acceptable, but it must remain subordinate to the quote.
- Use a thin, low-contrast divider between attribution details and any avatar or mark, around #000000 at 10–18% opacity.

### Borders, radius, and spacing
- Give each panel a modest radius around 7–10px: polished but not pill-like.
- Avoid heavy visible borders; let the dark page surround create the separation. If a border is needed, use a 1px black or white border at low opacity.
- Keep the gap between quote and attribution flexible, using the card’s full height rather than a fixed text-to-footer margin.
- Use approximately 16–20px between attribution elements, 8–12px between name and role, and 10–16px between an avatar/brand mark and the text block.

### Attribution and imagery
- Include a small avatar, monochrome symbol, or brand mark only when the user’s product has a suitable asset. Keep it visually quiet and approximately 30–38px square.
- Separate the mark from the attribution text with a subtle vertical rule or deliberate whitespace.
- Do not let avatars or symbols compete with the quote; the quote remains the primary action and focal point.

### Interaction and responsive behaviour
- This section can remain static, but add a restrained hover treatment if the cards are clickable: a slight lift of 1–2px, a very subtle brightness shift, or a gentle shadow.
- Do not use aggressive animation, auto-rotating testimonials, or distracting parallax.
- Ensure focus states are clearly visible if a card links to a case study or customer story.
- At narrow widths, reduce quote size to approximately 25–30px, stack the cards, and preserve readable line lengths and bottom attribution spacing.

## Never
- Never copy the reference’s logos, product names, people, companies, quotes, or exact copy.
- Never reuse the reference’s illustrations, brand marks, avatars, or imagery.
- Never make the design dependent on the Linear brand, its colours, or its specific testimonial content.
- Never create cramped cards, arbitrary line breaks, weak attribution contrast, or a footer that feels like a generic multi-column link list.
- Never use decorative imagery or gradients that overpower the testimonials.