## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/domestika-org/a1bec580-5d19-4289-a277-048dcd6cb3c6-1789146385540-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/domestika-org/a1bec580-5d19-4289-a277-048dcd6cb3c6-1789146380715.webp
- Design on Kage: https://kage.design/designs/domestika-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have, including the product name, colours, typography, imagery, and any existing logo. Wait for their answers before designing. Apply the reference's structural and interaction principles to that product, not to Domestika, and use the user's own content and brand assets.

## Page structure
1. **Urgency promotion bar:** Begin with a full-width orange strip containing a small circular brand-neutral symbol, a short promotional message, and a right-aligned countdown with a dismiss control.
2. **Primary navigation:** Place a dark charcoal navigation bar beneath it, with the user's wordmark at left, a compact set of links, an overflow menu, a wide search field, cart/account actions, and a high-contrast sign-up button.
3. **Promotional hero carousel:** Use a wide blue-toned hero band with a two-column layout: bold headline, supporting copy, small social-proof metrics, offer label, discounted price, and purchase CTA on the left; a colourful editorial product image on the right. Add centered pagination dots along the lower edge.
4. **Introductory value statement:** On a white background, add a constrained heading and one compact paragraph explaining the product's breadth and audience, with a subtle inline link.
5. **Featured course/product grid:** Show a dense four-column grid of cards. Each card has a rounded image, a small corner badge, title, creator line, truncated description, usage/rating metadata, offer label, struck-through original price, discounted price, and a full-width teal purchase button. Keep card heights aligned and repeat this pattern across several rows.
6. **Browse-more CTA:** Center an orange rectangular button below the grid to reveal or browse more items.
7. **Teacher/creator carousel:** Add a section heading followed by a horizontal carousel of pale-gray profile cards. Each card combines a portrait thumbnail, name, location or role, and compact audience/course metrics; include circular previous/next controls and pagination dots.
8. **Benefits section:** After a horizontal divider, create a spacious two-column benefits grid. Each item pairs a light gray outline icon with a short heading and two-line explanation. Cover self-paced learning, high-quality access, professional instruction, community, teachers, certificates, and course production quality.
9. **Footer taxonomy:** Use a very light gray footer with the brand treatment at top and multiple text columns for categories, subject areas, software/tools, and curated lists. The density should increase here through small link text and long lists.
10. **Footer utility row:** Add a divider, then columns for site sections, company/information links, support, language selector, and app-store badges. Finish with a bottom legal row containing copyright, policy links, and monochrome social icons.

## Design language
- Build hierarchy through a clear type scale: large bold hero heading, medium section headings, compact card titles, and small metadata/link text. Use a clean sans-serif with strong weight contrast rather than decorative typography.
- Let the page rhythm move from high-impact to dense to spacious: promotional banner and hero first, repeated card rows in the middle, a relaxed benefits section afterward, then a dense informational footer.
- Keep the base canvas white or near-white (`#ffffff`, `#f7f7f7`) with charcoal text (`#171717`) and muted gray secondary text (`#6f6f6f`).
- Use orange-red (`#f04416` approximately) for urgency, sale messaging, and the main browse CTA. Use a saturated blue (`#416bd0` approximately) for the hero panel and teal (`#078c91` approximately) for repeated purchase buttons. These accents should be functional and sparse, not decorative everywhere.
- Treat course imagery as the main source of colour and personality. Use varied editorial thumbnails in consistent aspect-ratio frames, with small badges layered over images.
- Use thin light-gray borders (`#e5e5e5`), subtle card shadows, and modest corner radii around 4–8px. Avoid glass effects, heavy shadows, or excessive pill-shaped UI; reserve pills for compact labels and badges.
- Keep the desktop content in a centered max-width container with generous side margins. Use four equal card columns, consistent gaps, and aligned card internals so the grid reads as a catalogue.
- Make commerce details easy to scan: place ratings and learner counts in a compact metadata row, show the original price with a strike-through, and give the purchase action a full-width button with a cart icon and high contrast.
- Use carousels only for promotional content and creator profiles. Provide visible pagination dots and simple circular arrow controls; do not make the main course catalogue feel like a carousel.
- Keep interaction feedback restrained: buttons can darken slightly on hover, cards can lift subtly, and carousel controls should remain visually secondary. Preserve the strong static grid and predictable scanning order.

## Never
- Do not copy Domestika's logo, wordmark, product name, course titles, promotional copy, illustrations, photography, instructor portraits, icon set, or exact branded content.
- Do not present the result as Domestika or imply affiliation with it.
- Do not reuse reference imagery; create or source original visuals appropriate to the user's product.
- Do not reproduce the exact page copy or brand-specific sale mechanics unless the user independently needs an equivalent feature.