## 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-2.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

## Before you start
Ask the user what their product is, who it is for, and what brand personality, colours, typography, and content they want to express. Then apply the principles below to create an original version for their product—not a copy of the reference.

## Build a spacious editorial feature grid
Create a wide, responsive section that introduces the product, team, or central idea through a deliberately asymmetric grid. The composition should feel like a calm creative-studio statement: a small labelled visual cue on the left, a large headline toward the middle/right, and supporting body copy arranged in two readable columns beneath or beside the headline.

### Layout and alignment
- Use a warm off-white section background, approximately `#FAF9F7` or a brand-appropriate equivalent.
- Add a thin horizontal divider near the top of the section, inset to the same maximum content width as the grid. Use a low-contrast line around `#DDDCD8`.
- Constrain the content to a centered max-width of roughly `1160–1240px`, with generous horizontal padding of `32–56px` on desktop.
- On desktop, use a 12-column grid with a generous gap. Let the left introductory block occupy about 3–4 columns and the main content occupy the remaining 8–9 columns.
- Place a small eyebrow row in the left block: a short horizontal rule followed by a compact label. Align the rule and label on one baseline.
- Below the eyebrow, include a small abstract brand-neutral visual marker, such as two overlapping rounded cards or tiles. Keep it simple and geometric rather than illustrative.
- Place the primary heading in the main area, with a maximum width that creates a strong two-line composition. Below it, place two supporting text columns side by side with a clear but modest gap.
- Use substantial vertical breathing room: approximately `96–128px` from the divider to the content and `96–120px` before the section ends. Let the layout feel intentionally under-filled.
- On smaller screens, collapse to one column. Keep the eyebrow and visual marker above the heading, then stack the supporting copy with `24–32px` between text blocks.

### Typography hierarchy
- Use a clean contemporary sans-serif with a slightly humanist or grotesk character. If the product has a brand font, use it; otherwise use a system or web-safe sans-serif with careful weight and tracking.
- Set the main heading large and confident, approximately `44–52px` on desktop with `0.95–1.02` line-height and slight negative tracking around `-0.04em`. Use a regular or medium weight rather than an overly bold display style.
- Scale the heading responsively to around `36–42px` on tablet and `32–38px` on mobile.
- Set the eyebrow and supporting copy in a muted small-to-medium text size, approximately `13–16px`, with `1.45–1.6` line-height.
- Keep paragraph measure comfortable: roughly `26–34ch` per supporting column. Use a dark grey rather than pure black for secondary text.
- Ensure the heading is the clear focal point; do not compete with it using oversized labels or decorative typography.

### Colour, borders, and shape
- Use near-black for the primary heading, approximately `#171619`.
- Use a softer graphite grey for labels and body copy, approximately `#686664`.
- Keep borders extremely quiet, around `#DDDCD8`, `1px` solid.
- If using the overlapping visual marker, use two gentle pastel surfaces such as lavender `#DCCFF0` and warm yellow `#F0D18B`, with dark neutral symbols or abstract marks. Treat these as optional brand accents and adapt them to the user's palette.
- Use rounded corners on the small tiles, approximately `12–16px`; avoid rounding the entire section or adding cards around every text block.
- Avoid shadows unless the product's brand requires them. If used, keep them soft and nearly imperceptible.

### Interaction and behaviour
- Keep the section primarily editorial and easy to scan; the visual marker does not need to be interactive.
- If the small tiles are interactive, use a restrained hover response: a few-pixel lift or subtle rotation/translation, a gentle transition around `180–240ms`, and a visible keyboard focus state.
- Preserve the composition at all viewport sizes. Do not allow the headline to collide with the supporting copy or let the small label become unreadably small.
- Respect reduced-motion preferences and maintain strong colour contrast for text and focus indicators.

### Never
- Never copy the reference's logos, product names, brand names, or exact marketing copy.
- Never reuse the reference's specific visual symbols, illustrations, imagery, or tile lettering.
- Never reproduce the exact grid proportions, wording, typography pairing, or decorative arrangement; reinterpret the principles for the user's product and brand.
- Never turn the section into a dense card grid, noisy hero, or generic three-column marketing block.
- Never sacrifice responsive spacing, semantic heading structure, accessibility, or readable text measure for visual similarity.