tell-we.vercel.app
Design analysis
A compact header establishes the brand at left and keeps utility links, language switching, and sign-in access aligned at right without competing with the hero message.
Prompt preview
## 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/tellwe/53391754-7b36-48bd-9a17-10851678d0af-1790488949-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tellwe/53391754-7b36-48bd-9a17-10851678d0af-1790488917784-full.webp - Component on Kage: https://kage.design/component/tellwe-navigation ## Before you start Ask what the user's product is, who it serves, and what brand personality and visual system it should use. Apply the principles below to that product rather than reproducing the reference. Build a responsive top navigation for a friendly, colorful software landing page. Keep the layout in a single horizontal container with the brand lockup on the left and low-priority links plus language and account actions on the right. Use generous horizontal padding, vertically center every control, and collapse secondary links into a compact mobile menu. Design language: - Use a saturated electric-blue background around `#1678EE`, with white brand text and subtle translucent control borders. - Make the brand name large and bold, with a small supporting tagline or status badge beside or beneath it. - Keep utility navigation small and restrained; use clear focus and hover states. - Language switching should look like a compact pill with the selected option visually highlighted. - Sign-in should be an outlined pill button with a small user icon. - Use rounded controls, approximately `999px` radius, and 1px borders with low-opacity white. - Use a friendly rounded sans-serif for the brand and a highly legible sans-serif for utility text. - Maintain approximately 24–48px side padding and a 16–24px vertical height rhythm. Never: - Never use the reference's logos, product names, copy, illustrations, or imagery. - Never make the header visually heavier than the hero headline. - Never invent a brand identity before asking about the user's product and brand.
kage