## 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/supabase-com/b03f69f9-4b47-487d-8f2b-17d7cd19e877-1789060353-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/supabase-com/b03f69f9-4b47-487d-8f2b-17d7cd19e877-1789060301-full.webp
- Component on Kage: https://kage.design/component/supabase-code-block

## Before you start
Ask me what my product is, who it serves, and what its brand personality and visual identity are. Then apply the principles below to create a template showcase section for my product—not a copy of the reference.

## Goal
Build a polished section that presents production-ready templates, starter projects, examples, or integrations. The section should help visitors quickly scan what is available, understand the use case, and preview the experience through visual cards.

## Design language and reusable rules

### Layout and alignment
- Use a wide, centered content container with a maximum width of approximately 1080–1180px and generous horizontal padding of 24–32px.
- Place the section heading and supporting action in one horizontal row on desktop. Align the action to the right and vertically center it with the heading block.
- Use a two-column card grid with equal-width columns and a 12–16px gap. Collapse to one column below approximately 760px.
- Keep all card content aligned to the same left edge, with consistent internal padding of 24px.
- Let the preview artwork sit below the text with a clear separation, and clip it inside the card so it feels like one composed object.
- Give the section substantial vertical breathing room; it should read as a distinct editorial block rather than a dense dashboard.

### Typography hierarchy
- Use a large, modern sans-serif heading around 34–40px on desktop, with a line height around 1.05–1.15 and medium weight.
- If the heading has two lines, use a deliberate tonal hierarchy: the first line can be muted while the key promise or outcome is darker and stronger. Adapt this contrast to the product’s brand rather than copying the exact treatment.
- Use a compact underlined or text-style section action around 14px.
- Card titles should be 14–16px, medium weight, and high contrast.
- Card descriptions should be 15–16px with a 1.45–1.55 line height and a softer neutral colour. Keep them to roughly two lines where possible.
- Template or platform labels may use a distinctive brand colour or wordmark-like treatment, but keep the hierarchy subordinate to the overall section heading.

### Colour
- Start with a very light neutral background, approximately #FFFFFF or #FCFCFC.
- Use near-black for primary text, approximately #171717–#202020.
- Use cool or warm grey for secondary text, approximately #6B6B6B–#737373.
- Use a subtle border around cards and preview frames, approximately #E5E5E5–#EAEAEA.
- Reserve the product’s accent colour for small labels, active preview details, or restrained emphasis. Avoid making every card brightly coloured.
- Ensure all text and links meet accessible contrast requirements.

### Borders, radius, and depth
- Use a thin 1px neutral border on each card; avoid heavy shadows.
- Apply a modest radius of approximately 8–10px to the outer card and preview frame.
- Make the preview frame feel like a browser or application window using a top chrome strip, a subtle divider, and three small circular controls or another product-appropriate affordance.
- Keep the preview illustration abstract and interface-oriented: panels, placeholder blocks, navigation, tables, or content modules. Use low-contrast surfaces and one restrained accent colour.
- Hide overflow so the preview can extend below the visible card area while remaining neatly cropped.

### Interaction and responsive behaviour
- Make the entire card clickable if it leads to a template detail or setup flow, while preserving a clear focus ring for keyboard users.
- On hover, use a restrained response such as a slight border-colour change, subtle lift, or gentle preview shift. Do not use dramatic scaling or distracting animation.
- Make the section action visibly interactive with underline and hover colour feedback.
- Preserve the visual order on mobile: heading, action, then cards. Stack the header controls if the available width is too narrow.
- Keep preview proportions consistent across cards so the grid feels orderly, while allowing each template’s abstract UI to vary.

### Content and accessibility
- Use concise, outcome-oriented template names and descriptions relevant to my product.
- Provide meaningful accessible labels for cards and preview images; if artwork is decorative, mark it as such and expose the card’s descriptive text instead.
- Do not rely on colour alone to communicate template type or state.

## Never
- Never reuse logos, product names, brand marks, or platform names from the reference.
- Never copy the reference’s exact card copy, labels, headings, descriptions, or link text.
- Never reproduce the reference’s illustrations, screenshot artwork, browser mockups, or specific interface details one-for-one.
- Never assume the user’s product is a developer platform; adapt the template concept, terminology, and preview content to the user’s product.
- Never add unrelated decorative imagery, stock photography, or visual clutter.
- Never remove keyboard focus states, responsive behaviour, or accessible contrast in pursuit of visual similarity.