## 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/drizzle-team/742c665e-9ce1-4c98-831f-72085091350d-1789073809-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/drizzle-team/742c665e-9ce1-4c98-831f-72085091350d-1789073797-full.webp
- Component on Kage: https://kage.design/component/drizzle-team-hero

## Before you start
Ask what the user's product is, who it is for, and what brand personality, fonts, colours, and visual assets they want to use. Then apply the principles below to create an original hero for that product—not a copy of the reference.

## Design direction
Build a compact, editorial hero section for a modern software or technology website. The section should feel calm, human, and deliberately under-designed: the message is carried by a short greeting and a simple introductory statement rather than a large illustration, dashboard mockup, or dense call-to-action group.

### Layout and alignment
- Use a full-width, mostly white or near-white canvas.
- Align the content to the same left content edge used by the site's global navigation and subsequent sections.
- Place a small conversational greeting on the first line, optionally ending with a restrained emoji or brand-appropriate symbol.
- Put the main introduction directly below it as a single short line or two-line statement.
- Keep the hero relatively shallow, with substantial empty space around the text so it reads as an opening beat rather than a conventional marketing banner.
- Use a responsive max-width container, approximately 1120–1280px on large screens, with 24–64px horizontal padding depending on viewport size.
- On mobile, preserve the left alignment and reduce the vertical whitespace without centering the text.

### Typography hierarchy
- Use a clean sans-serif or the product's own brand typeface.
- Make the greeting smaller and slightly heavier than body text, around 18–22px desktop, with comfortable line-height.
- Make the introduction larger but understated, around 24–32px desktop, using regular or medium weight rather than an oversized display style.
- Use a muted secondary colour for the introduction if the greeting is the strongest line.
- Keep line lengths short and avoid adding supporting paragraphs unless the user's product needs them.

### Colour
- Start from a light neutral background such as `#FFFFFF` or `#FAFAF9`.
- Use a dark charcoal for the greeting, approximately `#202124` or `#252525`.
- Use a softer grey for the supporting line, approximately `#6B6F72` or `#737373`.
- If using an emoji or accent, keep it small and use the user's brand accent rather than introducing a decorative colour system.

### Borders, radius, and spacing
- Avoid visible cards, shadows, gradients, and decorative containers.
- If the surrounding page needs a section boundary, use a subtle 1px line such as `#E7E7E5`.
- Do not add corner radii to the hero itself; the composition should remain open and editorial.
- Use approximately 8–12px between the greeting and the introductory line, with 72–128px of breathing room above or below the text depending on the surrounding page structure.

### Interaction
- Treat the hero as primarily informational and non-interactive.
- If a link or CTA is necessary for the user's product, add only one quiet text link near the introduction, using an underline or small directional cue on hover.
- Keep hover transitions subtle: 150–200ms colour or opacity changes, never a large movement or animated entrance.
- Respect reduced-motion preferences and avoid auto-playing animation.

## Never
- Never copy the reference site's logos, product names, wording, or brand-specific assets.
- Never reuse the reference copy or greeting verbatim.
- Never include illustrations, photographs, avatars, or imagery from the reference.
- Never reproduce the reference page's exact spacing, typography, markup, or visual treatment; adapt the underlying editorial principles to the user's product and brand.
- Never invent a competing brand identity when the user's product guidelines are available.