## 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/bun-sh/5fab2b15-2f70-4d99-a79d-411d5e236c09-1789073774-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bun-sh/5fab2b15-2f70-4d99-a79d-411d5e236c09-1789073655216.webp
- Design on Kage: https://kage.design/designs/bun-landing-page

## Before you start
Ask the user what they are building, who it is for, and which brand assets they already have (name, colours, type choices, logo, imagery, and copy direction). Wait for their answers before designing. Apply the reference's structure and design language to their product, not to Bun.

## Page structure
1. **Announcement strip and global navigation:** Add a slim black announcement bar above a white, bordered header. Use a compact product mark area, documentation-oriented links, search, small utility icons, and a dark primary action.
2. **Hero:** Create a wide two-column hero with a small release eyebrow, an oversized condensed headline with one vivid accent word, supporting paragraph, install label, terminal command block, platform tabs, and quickstart link on the left. Put a bordered benchmark/demo panel on the right with tabs, horizontal comparison bars, labels, timing values, and a replay affordance.
3. **Used-by strip:** Separate the hero from the next section with a thin rule and a compact row of customer/community names or neutral text marks.
4. **Four-tools overview:** Introduce the product suite with a large two-line headline and a short explanatory note. Follow with four equal bordered cards, each containing a small symbol tile, colourful burst badge, title, replacement claim, concise description, and monospace command footer.
5. **Workflow feature:** Use a spacious two-column editorial section. Place a large headline, paragraph, and numbered workflow steps on the left; place a dark terminal/video-like demo panel with replay controls and caption on the right.
6. **Release notes band:** Add a full-width section divided by strong horizontal rules. Use a large release headline and summary/actions on the left, with two narrow columns of bullet-point changes and an all-releases link on the right.
7. **Production stories:** Introduce real-world usage with an eyebrow, headline, and explanatory copy. Show three equal video/story cards with image thumbnails, circular play buttons, metadata, titles, descriptions, and dark or accent action buttons. Below, add a larger split case-study card with a portrait video on the left and framework/code content on the right.
8. **Install benchmark section:** Add another bordered editorial band with an eyebrow, large headline, explanatory copy, and right-aligned action buttons. Present six benchmark cards in a three-column by two-row grid; each card contains a scenario title, cache/context note, horizontal package-manager bars, exact timings, and a pink speedup result.
9. **Memory benchmark section:** Use a spacious two-column intro with a large headline on the left and explanatory paragraph on the right. Place three wide comparison cards beneath, each showing memory bars for the product and alternatives, a coloured performance claim, and a reproduce link.
10. **Built-in APIs section:** Add an eyebrow, large headline, and short paragraph. Use a left-side vertical list of included capabilities and a large bordered code panel on the right with syntax-highlighted code, file label, copy affordance, and docs link.
11. **Standard library grid:** Follow with a subheading and reference action, then a three-column bordered grid of API categories. Each cell uses a tiny uppercase category label, magenta API names, and muted descriptions.
12. **Frontend feature:** Use another split editorial section with headline, paragraph, three numbered command steps, and a text link on the left. Show a large dark/light browser-and-code demonstration image on the right.
13. **Compatibility table:** Add a major heading followed by a bordered comparison table. Use a sticky-looking header row, feature descriptions in the first column, product/alternative columns, small circular status indicators, and a centered reveal-more control at the bottom.
14. **Final CTA:** Switch to a nearly black full-width block. Pair a small product mascot/mark with an oversized headline whose key words use hot pink, alongside installation copy, terminal command field, platform tabs, and two contrasting buttons.
15. **Footer:** Return to white with a multi-column footer: product description and small social links on the left, then grouped product/toolkit/community/company links. Finish with a thin divider and a tiny legal/credit line.

## Design language
- Build hierarchy through an extreme type scale: very large, tightly leading condensed display headlines; small uppercase monospace eyebrows; compact neutral body copy; and monospace labels for commands, versions, metrics, and code.
- Keep the canvas predominantly white, using near-black text and panels (`#0B0A0B`, `#111011`) with hot magenta as the signature accent (`#F20A8A` to `#FF2AA5`). Use pale gray rules and surfaces (`#E5E5E5`, `#F5F5F5`) rather than heavy shadows.
- Let the page rhythm alternate between dense evidence modules and generous editorial whitespace. Benchmark grids, API matrices, cards, and tables are compact and information-rich; narrative feature sections have tall padding and large isolated headings.
- Use thin 1px borders, square or barely rounded corners, and almost no drop shadow. Let borders define cards, panels, table cells, and section transitions.
- Treat data visualization as UI: horizontal black and pink bars, exact right-aligned timings, tiny axis labels, comparison notes, and replay/reproduce links. Keep charts simple and legible rather than decorative.
- Pair a condensed grotesk display face with a neutral sans for paragraphs and a monospace face for technical content. Use tight tracking for uppercase eyebrows and generous line-height for explanatory copy.
- Use pink sparingly but decisively: one word in a hero or headline, release bullets, status marks, speedup claims, command prompts, selected tabs, and the final CTA emphasis. Keep most controls black, white, or outlined.
- Make cards feel editorial and technical: small metadata above titles, concise descriptions, command/code footers, and consistent internal padding. Use colourful bursts or badges only for feature replacement claims, not throughout the system.
- Use dark terminal panels and code windows as visual anchors. Include syntax colour, muted chrome, prompt symbols, copy controls, and replay actions while preserving the same thin-border treatment.
- Use buttons with compact bold labels, mostly rectangular: filled black for primary actions, white outlined for secondary actions, and pink only for high-intent or celebratory actions.
- Keep visible interaction lightweight: tabs switch benchmark views, replay controls sit beside demos, copy icons sit in code panels, and reveal-more controls expand comparison tables. Avoid elaborate motion; use quick fades or bar-width transitions that support comprehension.

## Never
- Do not copy Bun's logo, mascot, wordmark, product name, tagline, exact copy, benchmark data, release text, customer names, screenshots, illustrations, photography, or icon set.
- Do not present the result as Bun or imply affiliation with it. Replace all reference content with the user's own product, audience, brand assets, examples, and evidence.