## 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/madebydaedalus-com/ae0cc407-2597-43fd-9c0f-0722227b2dcc-1789060549-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/madebydaedalus-com/ae0cc407-2597-43fd-9c0f-0722227b2dcc-1789060515-full.webp
- Component on Kage: https://kage.design/component/madebydaedalus-feature-grid-2

## Before you start
Ask me what my product is, who it is for, and what its brand personality, colours, and content are. Then apply the principles below to create an original feature-grid section for that product—not a copy of the reference.

## Design the section
Build a spacious, editorial feature grid that introduces a curated set of featured items beside a list of linked entries. The section should feel calm, selective, and typography-led, with the content doing most of the visual work.

### Layout and alignment
- Use a wide desktop container with generous horizontal gutters, approximately 56–72px on large screens and 20–24px on mobile.
- Create a two-column layout: a left editorial panel occupying roughly 42–46% of the width and a right list panel occupying the remainder.
- Align both columns to the same top baseline.
- In the left panel, place a small eyebrow row with a short horizontal line followed by a muted label. Below it, add a large multi-line heading, then a concise supporting paragraph.
- In the right panel, display 3–6 stacked feature rows. Each row should have a title with compact secondary metadata, a one-line description beneath it, and a subtle arrow/action affordance aligned to the far right.
- Separate rows with thin horizontal rules. Add a rule above the first row and below the last row.
- On smaller screens, collapse to one column: keep the introduction first, then place the feature list below with comfortable vertical spacing. Prevent long titles and metadata from colliding with the arrow.
- Make each row, or its primary title area, keyboard-accessible as a single link when appropriate.

### Typography hierarchy
- Use a clean contemporary sans-serif with a slightly editorial feel; use the product’s own typeface if available.
- Set the main heading large and tightly composed: approximately 48–60px on desktop, 38–44px on mobile, with a line-height around 0.98–1.08 and modest negative letter spacing.
- Use the eyebrow and metadata at approximately 11–13px, with relaxed tracking and muted colour.
- Set feature titles around 20–23px with medium or semibold weight.
- Set descriptions around 13–15px with a comfortable 1.4–1.6 line-height.
- Use clear weight and colour contrast rather than decorative styling to establish hierarchy.

### Spacing
- Give the section generous vertical padding, approximately 96–132px on desktop and 64–88px on mobile.
- Keep 28–38px between the eyebrow and heading, and 22–30px between the heading and supporting copy.
- Give each feature row approximately 28–34px of vertical padding, with enough room for the title, description, and interaction affordance to breathe.
- Keep the gap between the two desktop columns around 64–96px.

### Colour and surface
- Use a warm near-white background, approximately `#F8F7F5` or a brand-adjusted equivalent.
- Use a deep charcoal for primary text, approximately `#19181B`, rather than absolute black.
- Use a soft grey for descriptions and metadata, approximately `#6F6C70`.
- Use a low-contrast rule colour, approximately `#D9D7D4`.
- If the surrounding page has a colour transition, allow a restrained pastel or brand-colour band outside the component, but keep the grid itself quiet and readable.

### Borders, radius, and controls
- Prefer 1px rules and sharp or very lightly rounded corners; the reference language is editorial rather than card-based.
- Avoid heavy containers, drop shadows, pills, or boxed cards.
- Render the arrow as a simple text/icon treatment, such as a thin diagonal arrow, with enough hit area for touch interaction.
- On hover, subtly darken the row or arrow, shift the arrow a few pixels diagonally, or reveal a very restrained background tint. Keep transitions around 180–240ms and respect reduced-motion preferences.
- Provide visible keyboard focus using a clear outline or underline that meets accessibility contrast requirements.

### Content behaviour
- Keep titles concise and descriptions to one or two lines where possible.
- Support variable title and metadata lengths without breaking the grid.
- Use semantic section, heading, list, and link elements. Ensure the layout remains readable at narrow widths and at increased text sizes.

## Never
- Never copy the reference’s logos, product names, domains, project names, exact copy, or list content.
- Never reuse illustrations, imagery, icons, or decorative artwork from the reference; create only generic UI affordances where needed.
- Never reproduce the exact composition as a branded clone. Preserve the underlying principles—editorial introduction, ruled feature list, generous whitespace, and restrained interaction—while adapting the content and styling to the user’s product and brand.