## 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/neon-tech/ec270806-81ac-4f67-8b23-bd56e790768f-1789139044100-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/neon-tech/ec270806-81ac-4f67-8b23-bd56e790768f-1789060084925.webp
- Design on Kage: https://kage.design/designs/neon-empty-state

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type choices, logo, imagery). Wait for their answers before proceeding. Apply the following system to their product, not to the reference product.

## Page structure
1. **Announcement strip:** Add a very thin, full-width notice above the navigation, using tiny centered text over a subtle pixel/noise gradient texture.
2. **Primary navigation:** Use a black sticky-style header with a compact geometric brand mark at left, product/solutions/docs/pricing/resources links, community and repository metadata on the right, and outlined plus filled auth buttons.
3. **Hero:** Place an abstract, dark, vertically banded data texture behind a small eyebrow, an oversized two-line headline, and two pill-shaped calls to action. Keep the copy column wide and left aligned.
4. **Capability rail:** Follow the hero with five evenly spaced, compact capability statements. Each has a bold lead phrase, muted explanatory text, and a small dark product screenshot or technical visualization beneath it.
5. **Customer logo row:** Separate the first block with a thin divider and a low-contrast horizontal row of customer logos.
6. **AI engineering section:** Return to a large black section with a small left-side category list and a large headline on the right, using bright text for the lead phrase and gray for the continuation. Below it, show a framed terminal/product composition with a command snippet and a supporting row of AI-tool references.
7. **Advanced autoscaling section:** Switch to a pale mint background. Center a small dotted motif, then a large centered headline with emphasized black lead text and gray continuation, compact toggle-like buttons, and a wide annotated comparison chart.
8. **Instant branching section:** Switch back to black. Use the same dotted motif and centered headline treatment, followed by a wide branch-line visualization and three evenly spaced explanatory feature columns.
9. **Managed authentication section:** Continue the black canvas with a divider, dotted motif, and a large headline block that leaves substantial vertical breathing room for a supporting visual or motion treatment.
10. **No platform fees section:** Add another divided black feature block with a dotted motif, large headline, and a six-item, three-column feature grid. Use thin vertical rules and small green utility icons to organize the enterprise capabilities.
11. **Proof and credibility section:** Move to pale mint again. Divide the area into two editorial columns: an evidence-heavy company statement with large metrics on the left, and a quote/testimonial with highlighted text on the right. Use thin rules and small red triangular eyebrows.
12. **Final CTA panel:** Return to a dark charcoal panel with a faint branching/database graphic, an oversized headline, supporting text, and a horizontal row of primary, secondary, and command-style actions.
13. **Footer:** Finish with a black, dense multi-column footer. Put the brand and operational/legal details in the first column, then separate company, resources, community, and compliance link groups. Keep type small, gray, and tightly spaced, with a green status indicator.

## Design language
- Build hierarchy through extreme scale contrast: tiny uppercase or monospace eyebrows, 16–22px supporting copy, and 52–76px editorial headlines with generous line height.
- Use a mostly black canvas around `#050606` or `#080909`, with white text near `#f5f7f4` and secondary copy in cool gray around `#858b88`.
- Reserve a vivid mint/electric green accent around `#36d89b` for status dots, icons, command buttons, data marks, and selected words; use pale mint backgrounds near `#e5f2ed` to create major section resets.
- Introduce small warm red/coral markers around `#ef695e` only for proof-section eyebrows or restrained data annotations; do not let them become a general palette.
- Pair a clean modern sans-serif for headlines and UI with a restrained monospace for terminal snippets, labels, quotes, and technical metadata. Keep headings light rather than heavy.
- Use a wide centered content frame with generous horizontal margins. Alternate centered headline blocks, asymmetric two-column compositions, and full-width charts so the rhythm changes as the page progresses.
- Treat borders as thin, low-contrast rules around `#242927`; use square or barely rounded panels for technical visualizations and medium pill radii only for buttons and command controls.
- Keep shadows minimal or absent. Let contrast, texture, framing lines, and large empty areas provide depth instead of card elevation.
- Use abstract pixel fields, scanlines, dotted motifs, branching diagrams, terminal windows, and annotated charts as product evidence. They should feel precise and diagrammatic, not decorative illustration.
- Make black sections spacious and slow, with feature blocks separated by large gaps and dividers; make pale sections more information-dense with charts, metrics, and explanatory captions.
- Buttons should be compact and high contrast: white filled primary actions, dark outlined secondary actions, and green command-style controls. Add subtle hover color or border transitions, but avoid conspicuous animation.
- If implementing motion, use restrained reveal/fade, subtle chart activity, branch-line growth, and low-frequency texture movement tied to scrolling; preserve a calm technical feel and respect reduced-motion settings.

## Never
- Do not copy the reference product's logos, wordmarks, product name, tagline, customer logos, screenshots, exact copy, illustrations, photography, or icon set.
- Do not present the result as Neon or imply affiliation with the reference.
- Do not reuse the reference's exact charts, diagrams, terminal text, testimonial wording, or brand-specific claims; replace them with original assets and content for the user's product.