## 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-3.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-gallery

## Before you start
Ask the user what their product is, who it is for, and what their brand personality and visual identity are. Then apply the principles below to create an original gallery section for their product—not a replica of the reference.

## Build this section
Create a dark, editorial gallery section that introduces a collection of small product experiences, experiments, portfolio pieces, or feature previews. The section should feel tactile, calm, playful, and highly considered, with the cards doing most of the visual storytelling.

### Layout and alignment
- Use a near-black charcoal section background, approximately `#17151A`, with generous vertical padding of 80–120px on desktop.
- Constrain the content to a centered max-width of roughly 1160–1240px.
- Begin with a slim utility row: a short horizontal rule and muted eyebrow copy on the left; a compact replay or secondary action on the right. Keep both understated and aligned to the main content edges.
- Below it, use a two-column introductory layout: an oversized headline on the left and a concise explanatory paragraph with a small directional prompt on the right. On desktop, the headline should occupy about 60% of the row while the copy occupies 30–35%.
- Place a three-card gallery beneath the introduction. Use cards with slightly varied vertical positions or heights so the row feels composed rather than rigid, while keeping their bottom edges visually related.
- On smaller screens, collapse the introduction to one column and turn the card row into a horizontally scrollable gallery or a vertically stacked sequence. Preserve generous gutters and avoid shrinking the cards until their interface details become illegible.
- Add a small centered caption below the cards, separated by ample breathing room.

### Typography hierarchy
- Use a modern sans-serif with smooth geometric forms and excellent large-size rendering.
- Make the main headline very large and tightly tracked: approximately 76–96px desktop, 48–64px tablet, and 42–52px mobile; line-height around 0.9–1.0.
- Keep most of the headline in a warm off-white, approximately `#F5F3F7`, and use one short phrase or keyword in a soft lavender accent around `#BE9BEF`.
- Use compact 11–14px text for eyebrow labels, metadata, controls, captions, and supporting copy. Supporting text should use a muted grey-lavender such as `#B7B1BC`.
- Keep card titles noticeably larger than metadata but smaller than the hero headline, usually 20–26px with medium or semibold weight.
- Use tabular or clearly spaced numerals for clocks, temperatures, progress values, and other data-like content.

### Colour and surfaces
- Use a restrained palette: charcoal background `#17151A`, warm white `#F7F5F2`, pale cream `#F4E9D8`, and very light lavender `#E8DDF3`.
- Give each card its own subtle surface colour, but keep saturation low and harmonious.
- Use charcoal or deep plum text on light cards, approximately `#211E25`.
- Reserve the brighter lavender accent for meaningful emphasis, active states, progress indicators, or one headline phrase.
- Avoid gradients unless they are extremely soft and used inside a contained product preview.

### Cards and visual language
- Build three large, rounded cards with approximately 28–34px corner radius and 24–32px internal padding.
- Cards should feel like polished mini-app surfaces: combine an eyebrow or context label, a clear title or value, a central visual/data area, and a small footer with metadata or controls.
- Use hairline dividers in a slightly darker or lighter version of the card background, around 1px with low opacity.
- Create visual interest with simple UI-native forms—ticks, dials, weather symbols, orbiting shapes, progress bars, playback controls, or data rows—rather than decorative photography.
- Keep the central visual area generous and calm. Use subtle shadows, inset highlights, or tonal layering to suggest depth without making the cards glossy.
- Allow one card to be near-white, one warm cream, and one pale lavender so the row reads as a deliberate set.

### Interaction and motion
- Make the gallery cards interactive when appropriate: hover can slightly lift a card, shift a central element, animate a dial or orbit, or reveal a more obvious affordance.
- Use restrained transitions around 250–500ms with smooth easing. Motion should feel satisfying and physical, never frantic.
- Provide visible focus states for keyboard users using a lavender outline or halo.
- If a card contains playback, carousel, or data controls, make the hit areas at least 44px and provide clear accessible labels.
- On touch devices, support swipe or horizontal scrolling with snap points, while keeping the first card partially revealing the next card as an invitation to explore.
- Respect `prefers-reduced-motion` by removing decorative movement while preserving state changes and usability.

### Responsive and accessibility details
- Maintain strong contrast between the dark section and light cards; verify text contrast independently on each pastel surface.
- Keep the reading order logical: section context, headline, supporting explanation, cards, then caption.
- Give every meaningful control an accessible name and use semantic headings.
- Do not rely on colour alone to communicate active, selected, or completed states.
- Ensure the layout remains balanced when the headline wraps differently or card content becomes longer.

## Never
- Never copy the reference’s logo, product name, brand name, or exact wording.
- Never reuse the reference’s specific card content, labels, numbers, icons, illustrations, or imagery.
- Never reproduce the exact headline, card arrangement, proportions, or decorative artwork.
- Never use stock photography or borrowed illustrations from the reference; create original UI-native visuals suited to the user’s product.
- Never make the section a generic grid of identical cards—preserve the editorial composition, tonal variety, and sense of tactile interaction while adapting it to the user’s brand.