## 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/raycast-com/85f2a082-cb21-4e6a-8485-365ffb9d735a-1789067518-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/raycast-com/85f2a082-cb21-4e6a-8485-365ffb9d735a-1789067491-full.webp
- Component on Kage: https://kage.design/component/raycast-feature-grid

## Before you start
Ask me what my product is, who it is for, and what its brand personality and visual identity are. Then apply the principles below to my product and brand—do not reproduce the reference literally.

## Build a cinematic editorial feature grid
Create a full-width feature section for a premium software product, developer tool, or digital service. The section should communicate several product capabilities through a structured, asymmetric grid that feels technical, precise, and editorial.

### Layout and alignment
- Use a very dark page background, approximately `#08090A` to `#0B0C0E`.
- Keep the content inside a centered max-width container of roughly 1120–1280px, with generous side gutters that reduce responsively.
- Build the section from a visible multi-column grid. Use thin vertical and horizontal rules to divide cells; let some rules extend beyond the content so the grid feels architectural rather than card-based.
- Start with a large feature row: a narrow text column on the left and a larger visual area on the right. Use an oversized, short headline of 3–5 lines, followed by a compact supporting paragraph and one understated text link.
- Continue with asymmetric rows: alternate wide visual cells with narrower text cells. Avoid making every item equal in size. Let some features occupy two columns while adjacent content occupies one.
- Add small figure labels such as `FIG_01`, `FIG_02`, or another neutral system of metadata in the top corner of visual cells. Keep these labels subtle and optional.
- On smaller screens, collapse to one column while preserving the editorial order. Keep horizontal rules between features, reduce the headline size, and allow visual cells to retain generous height.
- Align all text and visual content to the grid, not to arbitrary card centers. Maintain generous negative space around each feature.

### Typography hierarchy
- Use a clean modern sans-serif for headlines and interface text; use a restrained monospaced face for metadata, technical descriptions, and labels.
- Make the primary feature headline large and light-weight, approximately 56–76px desktop with tight line-height around 0.95–1.05. Scale to 40–52px on mobile.
- Use feature titles around 22–30px, medium weight, with compact line-height.
- Use supporting copy in muted gray, around 14–17px with 1.45–1.6 line-height. Keep paragraphs narrow enough to remain readable.
- Use metadata and eyebrow labels in 10–12px uppercase monospace with increased letter spacing and low contrast.
- Use links as simple text actions with a small arrow, never as large filled buttons unless the product context requires it.

### Colour and visual treatment
- Use near-white for primary headings, approximately `#F2F3F5`.
- Use cool muted gray for supporting text, approximately `#858890`, and dim metadata around `#555960`.
- Use rules and borders in very low-contrast gray, approximately `rgba(255,255,255,0.10)`; they should be discoverable without dominating.
- Reserve one luminous accent colour for product visuals or active UI states, such as electric blue `#2778FF` or `#4B9BFF`. Keep the accent concentrated rather than scattered across the whole section.
- Visual areas can use near-black backgrounds, subtle gradients, faint glow, wireframe diagrams, abstract interface surfaces, or restrained 3D forms. These should explain a capability without becoming decorative clutter.
- Add a very subtle radial glow or texture behind selected visuals, but preserve substantial black space.

### Borders, radius, and depth
- Prefer square or very lightly rounded grid cells, with a radius of 0–8px. This should feel like a technical editorial system, not a collection of floating cards.
- Use 1px rules and occasional inset borders to define visual regions.
- Avoid heavy shadows. If depth is needed, use a soft black shadow, a faint inner highlight, or a low-opacity blue bloom.
- Keep illustrations and UI diagrams contained within their grid cells, with generous margins and a clear focal point.

### Interaction and motion
- Make each feature link or feature cell discoverable as interactive where appropriate. On hover, brighten the title and arrow, increase the border contrast slightly, and reveal a restrained accent glow in the visual area.
- Use smooth transitions around 180–260ms with ease-out timing.
- If the visual is animated, use slow ambient movement only: subtle parallax, glow drift, or diagram motion. Respect `prefers-reduced-motion`.
- Ensure keyboard focus is visible with a thin accent outline and never rely on hover alone.

### Content guidance
- Use original placeholder copy describing the user's own capabilities. Keep headlines concise and confident, with a technical but human tone.
- Include 3–5 features with distinct visual roles, for example: a primary workflow, cross-platform capability, built-in interface primitives, integrations, or automation.
- The section should feel like a progression from a broad product promise to specific capabilities.

## Never
- Never use logos, product names, branded marks, or recognizable third-party identity from the reference.
- Never copy the reference's headlines, body copy, labels, feature names, or exact content structure.
- Never reuse the reference's illustrations, screenshots, 3D objects, diagrams, thumbnails, or imagery.
- Never reproduce the exact dimensions, grid proportions, spacing values, or visual assets; adapt the system to the user's product and brand.
- Never turn the section into a generic uniform card grid, a bright SaaS dashboard, or a cluttered collage.