Kage Design logo kage
jurniti.com
jurniti feature grid component

Design analysis

Several alternating product-story bands explain fleet deployment, cohort control, and infrastructure features. The layouts switch between prose, diagrams, terminal code, and concise supporting metrics.

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/jurniti/cfab9c3f-60ef-4e80-9a31-cc939c39468c-1789538634-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/jurniti/cfab9c3f-60ef-4e80-9a31-cc939c39468c-1789538542122-full.webp
- Component on Kage: https://kage.design/component/jurniti-feature-grid-4

## Before you start
Ask what workflow or product story must be explained, what technical proof matters, and what brand should guide the visuals. Build an original sequence of explainer bands.

### Design language
- Use a series of alternating two-column bands inside a max-width container, with 96–144px vertical padding and generous whitespace between stories.
- Pair a small uppercase eyebrow with a 36–52px headline, 15–17px explanatory copy, and a focused supporting visual.
- Alternate text left/right to create rhythm; keep copy blocks around 420–500px wide.
- Use cream #fffaf0, white, pale gray #f3f3f1, terracotta #a84d32, and charcoal #1c1c1c. Technical visuals may use dark panels with monospace text and 8px radius.
- Diagrams should be simple and schematic: thin warm-gray connectors, modest labels, and no decorative complexity. Code blocks should have clear padding, syntax contrast, and horizontal scrolling on mobile.
- Add small stat callouts or captions below visuals when they clarify scale or outcome.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.

More components