## 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/planetscale-com/b4abfdd8-cd39-4289-8914-c1bd40d118b4-1789060673-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/planetscale-com/b4abfdd8-cd39-4289-8914-c1bd40d118b4-1789060620-full.webp
- Component on Kage: https://kage.design/component/planetscale-card

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual system are. Then apply the principles below to create an original version for that product—not a copy of the reference.

## Design the section
Create a long-form product information card for a technical software product. It should feel like a carefully typeset README or terminal transcript: practical, credible, text-first, and intentionally low-decoration.

### Layout and alignment
- Place the content in a single centered column with a comfortable reading width, approximately 960–1120px on desktop and 100% width minus 24–32px gutters on mobile.
- Keep every paragraph, heading, list, and quotation aligned to the same left content edge.
- Organize the card into several vertically stacked topic sections. Each section should contain a small heading, explanatory copy, optional bullet list, and optional link or testimonial content.
- Separate major sections with a full-width dotted horizontal rule using a subtle repeating-dot treatment rather than a solid border.
- Use generous vertical breathing room between sections while keeping the text rhythm compact enough to support dense technical content.
- On small screens, preserve the single-column structure, allow long text to wrap naturally, and avoid horizontal scrolling except inside explicitly marked code examples.

### Typography hierarchy
- Use a monospaced or highly technical sans-serif font throughout, or pair a readable monospace body face with a restrained sans-serif only if that better suits the user's brand.
- Use body text around 15–17px with a 1.45–1.6 line height and slightly expanded tracking where helpful for legibility.
- Make section headings compact, bold, and approximately 16–18px; underline them with a short, fine rule or text underline to give them an indexed-document feel.
- Use smaller bold subheadings for grouped lists inside a section.
- Render bullets with a simple asterisk or understated marker, and use hanging indentation so wrapped lines align with the text rather than the marker.
- Style testimonial quotations as a distinct block with a thin vertical rule, slightly muted text, and a smaller attribution line beneath.
- Use inline links as the main accent: coloured, underlined or clearly differentiated, but never oversized or button-like.

### Spacing and density
- Use a 4–8px base spacing scale.
- Give section headings roughly 28–36px of space above and 12–16px below.
- Keep paragraph gaps around 16–22px; use 10–14px between bullets in a dense list.
- Indent list content approximately 16–24px from the section edge.
- Keep the card padding generous—around 40–64px on desktop and 24px on mobile.

### Colour
- Use a warm near-white or very light gray background, approximately #F8F8F7 or #FAFAF9.
- Use a dark charcoal for primary text, approximately #3F4143, rather than absolute black.
- Use a medium gray, approximately #85878A, for attributions, secondary notes, and muted metadata.
- Use a calm technical blue for links, approximately #176B93 or #26759A; ensure it meets accessible contrast requirements.
- Make dotted dividers and quotation rules a pale gray, approximately #B8B9B8.
- If the user's brand has a stronger accent, substitute it for the blue while preserving restrained contrast and avoiding bright gradients.

### Borders and radius
- Keep the surface nearly flat and editorial: no heavy drop shadow, glass effect, or ornamental border.
- Use 1px rules for quotation blocks and dotted separators.
- If the component sits inside a card, use a subtle 1px border such as #E1E2E0 and a small 2–6px radius; otherwise let the page background define its edge.
- Avoid pill-shaped controls and excessive rounded corners.

### Interaction and responsive behavior
- Make inline links visibly interactive with a hover colour shift and/or underline transition.
- Preserve clear keyboard focus states using a 2px outline or high-contrast underline.
- If sections are collapsible in the user's product, use a minimal disclosure affordance while keeping the default state expanded for scanability; do not turn the content into an overly decorative accordion.
- Ensure text selection, zoom, and screen-reader semantics work naturally. Use real headings, paragraphs, unordered lists, blockquotes, and links rather than styling generic divs.

## Never
- Never use logos, product names, company names, or proprietary terminology from the reference.
- Never reuse the reference's exact copy, testimonials, claims, links, or section labels.
- Never copy illustrations, imagery, icons, screenshots, or decorative assets from the reference.
- Never make the result visually dependent on the reference's brand; adapt the colour, type, and content to the user's product.
- Never sacrifice readability for a fake terminal aesthetic, tiny text, excessive letter spacing, or an unnecessarily dense layout.