## 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/teenage-engineering/02d63820-361c-4c31-b791-8f2d75691669-1789060820-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/teenage-engineering/02d63820-361c-4c31-b791-8f2d75691669-1789060797-full.webp
- Component on Kage: https://kage.design/component/teenage-engineering-navigation

## Before you start
Ask the user what their product is, who it is for, and what its brand personality should be. Then apply the principles below to create an original navigation system for that product—not a copy of the reference.

## Design goal
Build a horizontal, editorial-style site navigation that feels like a visual index or instrument panel. Combine a compact wordmark area, several clearly separated navigation groups, simple abstract or geometric iconography, small supporting labels, and an optional brand mark at the far edge. The navigation should feel designed and distinctive while remaining immediately scannable.

## Reusable design language

### Layout and alignment
- Use a full-width white navigation band with a single horizontal row on large screens.
- Divide the row into a sequence of unequal but intentional zones: brand identity, primary destinations, secondary utility destinations, and an optional right-aligned signature mark.
- Align each group to a shared baseline or vertical center, while allowing large icons to extend above and below the text line for a poster-like rhythm.
- Give every group a clear internal structure: a prominent destination label beside or above a compact stack of supporting links or descriptors.
- Keep the outer padding generous, approximately `48px 58px` on desktop, and use consistent horizontal gaps of `32–56px` between groups.
- Let the navigation remain visually dense without becoming crowded: icons should occupy meaningful space, while labels stay compact.
- On narrower screens, convert the row into a horizontally scrollable navigation or a carefully stacked layout; preserve the group hierarchy rather than shrinking all text excessively.

### Typography hierarchy
- Use a clean, light grotesk or neo-grotesk sans-serif with slightly unusual proportions if the product brand supports it.
- Set the brand name and primary destinations in a light or regular weight at approximately `22–27px`, with relaxed line-height around `0.95–1.05`.
- Use secondary descriptors at `11–13px`, with a compact line-height around `1.05–1.2` and muted contrast.
- Keep labels mostly lowercase or sentence case to create a calm, editorial tone; choose casing based on the user's brand.
- Avoid heavy bold text. Hierarchy should come from scale, placement, icon size, and spacing more than weight.

### Colour
- Use an almost-white background such as `#FFFFFF` or `#FAFAF9`.
- Use near-black for major text and iconography, such as `#111111` or `#151515`.
- Use a soft grey for supporting labels, such as `#777777` or `#8A8A8A`.
- Keep the palette intentionally minimal; reserve accent colour for active states only if the user's brand requires it.

### Icons and graphic language
- Use simple, original geometric symbols rather than generic UI icon sets.
- Build icons from basic shapes—squares, circles, lines, grids, arrows, or abstract silhouettes—with a consistent stroke or filled-shape logic.
- Give primary icons a large footprint, approximately `52–82px` square, so they act as visual anchors for each navigation group.
- Supporting utility links can use smaller symbols or typographic cues.
- If including a far-right brand signature, make it a bold abstract mark derived from the user's own visual identity, not a copied logo.

### Borders, radius, and surfaces
- Prefer an open, borderless composition on a white field.
- If dividers are needed, use extremely subtle 1px rules in `#E5E5E5`, and only between major regions.
- Keep corners square or nearly square, with a radius of `0–4px`; avoid pills, floating cards, and excessive containerisation.
- Maintain a crisp, print-like silhouette with no prominent shadows or gradients.

### Interaction
- Make every destination group a clear link target with a generous hit area.
- On hover, use a restrained response: near-black text/icon colour, a thin underline, a small geometric transformation, or a slight increase in icon contrast.
- Keep transitions short and precise, around `120–180ms`, with no bouncy motion.
- Show keyboard focus using a visible high-contrast outline or underline that does not disrupt the layout.
- On mobile, make the active or hovered group obvious without relying only on colour; preserve readable labels and allow intentional horizontal movement if the navigation scrolls.

### Responsive behaviour
- Desktop: maintain the panoramic, one-row composition and its generous whitespace.
- Tablet: reduce group gaps and icon sizes slightly while retaining the same visual sequence.
- Mobile: reorganise into a compact menu, stacked index, or horizontally scrollable strip. Keep the brand zone distinct from navigation groups and do not compress secondary labels below legibility.

## Never
- Never copy the reference site's logo, wordmark, product names, labels, exact navigation order, or written copy.
- Never reuse its distinctive icon shapes, graphic marks, or brand-specific symbols; invent equivalents for the user's product.
- Never include illustrations, photography, or imagery from the reference.
- Never make the result look like a generic SaaS navbar with a hamburger button, pill buttons, or a large promotional CTA unless the user's product genuinely calls for them.
- Never sacrifice accessibility for the visual composition: use semantic navigation, readable contrast, keyboard focus states, and appropriately sized touch targets.