## 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/coldiq-x-slack/e029c4ff-104d-4249-8c7e-44961fb1d1f9-1790748085-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/coldiq-x-slack/e029c4ff-104d-4249-8c7e-44961fb1d1f9-1790748039437-full.webp
- Component on Kage: https://kage.design/component/coldiq-x-slack-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and primary conversion goal are. Apply the principles below to that product rather than reproducing the reference.

Build a compact SaaS header with an optional announcement strip above it. Use a full-width near-black background (#171816), a thin low-contrast divider (#2b2b28), and a centered max-width inner container. Keep the announcement to one line with small monospace or compact sans-serif text, a subtle outlined secondary link, and enough height to remain readable. Below it, align the brand at left, a concise set of navigation links in the middle, and two actions at right: a quiet outlined action and one high-contrast primary action.

Use a restrained 12–14px sans-serif navigation scale, 16–18px brand mark type, 32px horizontal gaps, and 40px control heights. Use warm orange (#ff8a00) for the primary button, pale warm white (#f2eee6) for important text, and muted gray (#9c9b94) for secondary text. Buttons may use 0–2px radius and thin borders rather than pill shapes. On smaller screens collapse links into a menu button while keeping the main action visible.

Never: use logos, product names, copy, illustrations, or imagery from the reference.