## 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-1789060674-7.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-feature-grid

# Build an editorial technical feature grid

## Before you start
Ask me what my product is, who it is for, and what its brand personality, colour palette, and tone should be. Then apply the principles below to create an original version for my product—not a copy of the reference.

## Goal
Create a feature-grid section for a technical product such as infrastructure, developer tooling, analytics, security, or APIs. The section should make a complex product feel credible and easy to scan by pairing a dense list of capabilities with a short customer proof point and a structured set of supporting navigation or categories.

## Design language

### Layout and alignment
- Use a centered, wide content container with a restrained maximum width of approximately 1100–1200px.
- Build the main feature area as a vertically flowing editorial column or asymmetric grid: dense capability bullets should occupy the primary reading width, while supporting content can sit below or alongside it depending on viewport width.
- Align every text block to a consistent left edge. Avoid floating cards, excessive centering, or decorative hero composition.
- Place a testimonial or proof point after the feature list, separated by substantial vertical space so it reads as a considered conclusion rather than another bullet.
- Finish with a multi-column navigation/category grid. Use equal-width columns on desktop and stack or reduce to two columns on smaller screens.
- On mobile, preserve the reading order: heading or context, features, testimonial, then category links. Let long technical lines wrap naturally.

### Typography hierarchy
- Use a technical editorial voice with a highly legible sans-serif or humanist monospace-inspired type system. A true monospace font may be used for technical products, but prioritise readability.
- Feature copy should be medium-sized body text, approximately 16–18px, with a line height around 1.45–1.6.
- Emphasise linked terms, product concepts, or named capabilities with a muted blue accent and subtle underline or hover underline.
- Make section labels and navigation headings compact, bold, and slightly underlined or otherwise visibly rule-based.
- Keep testimonial text at the same general reading scale, using quotation marks or an editorial quote treatment without oversized display type.
- Use small uppercase or compact labels only where they improve orientation; do not over-label the interface.

### Spacing
- Use a generous top and bottom section rhythm: roughly 80–120px on desktop and 48–72px on mobile.
- Separate individual feature bullets by 10–18px, while grouping related content through consistent indentation.
- Add approximately 72–120px between the end of the feature list and the testimonial.
- Add approximately 96–144px before the bottom navigation grid.
- Keep horizontal gutters around 24px on mobile and 40–64px on desktop.

### Colour
- Use a warm off-white or very pale grey page background, approximately `#f7f7f5` or `#fafaf8`.
- Use near-black charcoal text, approximately `#303030` or `#262626`, rather than pure black.
- Use a restrained technical blue for links and highlighted terms, approximately `#176b96` or `#1f729d`.
- Use a soft neutral grey for rules and quote markers, approximately `#b8b8b3`.
- Keep the palette mostly monochrome; colour should clarify interaction and technical emphasis, not decorate.

### Borders and radius
- Prefer thin, crisp 1px rules over filled cards and shadows.
- Use dashed or segmented borders in the lower category grid only if they reinforce the technical/editorial character; otherwise use solid neutral rules.
- Keep corners square or use a very small radius, around 0–4px.
- Avoid drop shadows, gradients, glass effects, and pill-shaped UI unless the product context genuinely requires them.
- Give the testimonial a thin vertical rule or left border to distinguish it from the surrounding copy.

### Interaction
- Make linked technical terms keyboard-accessible with clear focus states.
- Use a restrained colour shift or underline transition on hover; keep the motion fast and subtle, around 150–200ms.
- If the category grid contains links, make the entire label or link target easy to select and provide a visible hover/focus treatment.
- Do not add interaction merely for spectacle. The component should feel like a stable technical document or product overview.

### Content guidance
- Write 5–8 concise capability bullets. Each bullet may include a highlighted link-like term, but keep the sentence understandable without it.
- Follow the list with a short testimonial or evidence statement attributed to a role or customer type that fits the user's product. Use original copy.
- End with 4–6 category columns containing short headings and a few links or metadata items. These can represent product areas, resources, integrations, learning, or community.
- Keep language specific and credible. Avoid generic claims such as “best-in-class” or “revolutionary.”

### Responsive and accessibility requirements
- Use semantic lists for features and navigation lists for category links.
- Maintain sufficient contrast between charcoal text, blue links, and the pale background.
- Ensure keyboard focus is visible and never rely on colour alone to communicate links.
- Test long technical words, URLs, identifiers, and compound terms so they wrap without causing horizontal overflow.
- At narrow widths, reduce font size only slightly; preserve the dense editorial character and generous vertical spacing.

## Never
- Never use the reference site's logos, product names, brand names, customer names, or exact copy.
- Never reproduce the reference layout pixel-for-pixel or imitate its identifying visual details too literally.
- Never use illustrations, screenshots, icons, or imagery from the reference.
- Never use the reference's exact navigation labels, testimonial wording, technical terms, or link text.
- Never add decorative gradients, oversized marketing slogans, or card-heavy UI that weakens the technical editorial tone.