## 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/obsidian-md/18ba00bf-73a3-4c61-9eb0-f66f69cff1b6-1789060834-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/obsidian-md/18ba00bf-73a3-4c61-9eb0-f66f69cff1b6-1789060782-full.webp
- Component on Kage: https://kage.design/component/obsidian-md-card

## Before you start
Ask me what my product does, who it is for, and what its brand personality and visual identity are. Then apply the principles below to my product rather than reproducing the reference literally.

## Design the section
Create a dark, footer-like resource or community section for my product. It should contain:

- A centered primary call-to-action near the upper part of the section.
- A large amount of quiet vertical space between that CTA and a row of three related destination cards.
- Three equal-width cards aligned in one horizontal grid on desktop, with the row allowed to sit close to or slightly beyond the section’s lower edge so the cards feel like the next content layer.
- On smaller screens, stack the cards vertically while preserving clear separation and comfortable horizontal padding.

## Reusable design language

### Layout and alignment
- Use a full-width, near-black background, approximately `#101010` or a brand-appropriate equivalent.
- Constrain the card row to a centered container around `1120–1200px` wide.
- Use a three-column grid with a gap of approximately `24px`.
- Keep the CTA centered horizontally and give it a strong vertical position near the top of the section.
- Use generous vertical spacing—roughly `120–160px` between the CTA and cards—so the composition feels spacious rather than crowded.
- Give the section enough bottom padding for the cards to feel intentional; if using an overlapping or cropped treatment, clip it cleanly and avoid accidental overflow.
- Maintain consistent card heights and align card content to the same top baseline.

### Typography hierarchy
- Use a modern sans-serif with a neutral, highly legible character.
- Make card titles prominent but compact: approximately `20–22px`, weight `600–700`, with a line height around `1.25`.
- Use a clear, readable CTA label around `16–18px`, medium-to-semibold weight.
- Keep text hierarchy simple: one strong destination title, with optional supporting text or a subtle arrow if the product needs additional context.

### Colour
- Page background: approximately `#101010`.
- Card surface: approximately `#202020` to `#242424`, visibly lighter than the page but still subdued.
- Primary text: approximately `#F2F2F2`.
- Secondary text: approximately `#A8A8A8`.
- CTA background: a vivid purple gradient or solid purple around `#7C3AED`–`#8B3DFF`.
- CTA text: white or near-white.
- Keep the palette restrained: purple should signal action and interaction, not decorate every element.

### Borders, radius, and depth
- Use a subtle 1px card border around `rgba(255,255,255,0.08)`.
- Give cards a medium rounded corner, approximately `10–12px`.
- Give the CTA a similar but slightly smaller radius, approximately `7–9px`.
- Avoid heavy shadows; rely on surface contrast and the border to separate cards from the background.
- Use generous internal card padding, approximately `24px`.

### Interaction
- Make the CTA and every card fully clickable, with clear keyboard focus states.
- On hover, slightly brighten the card surface and border, and optionally translate the card upward by `2px`; keep motion quick and restrained.
- On CTA hover, increase brightness or deepen the purple gradient without changing its size.
- Use `150–220ms` ease-out transitions and respect `prefers-reduced-motion`.
- Ensure focus rings are visible against the dark background, using a high-contrast purple or white outline.

## Content guidance
Use destination labels that are relevant to my product, such as community, support, documentation, integrations, or learning resources. Write original copy that fits my product’s voice and avoid generic filler.

## Never
- Never copy the reference site’s logos, product names, labels, or exact copy.
- Never reuse its illustrations, imagery, icons, or branded graphic assets.
- Never reproduce the exact spacing, dimensions, or visual styling as a pixel-for-pixel clone.
- Never assume the purple accent is right for my product; adapt the colour system to my brand while preserving the contrast and hierarchy.
- Never hide focus states or make the cards appear clickable without an interaction cue.