## 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/thousand/cb10af68-535d-4246-97d9-03dbd24306a9-1789106639-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/thousand/cb10af68-535d-4246-97d9-03dbd24306a9-1789106570706-full.webp
- Component on Kage: https://kage.design/component/thousand-code-block

## Before you start
Ask the user what their product does, who it is for, and what its brand direction is. Then apply the principles below to create a version for their product—not a copy of this reference.

## Build a portability-focused code comparison section
Create a wide, responsive website section that communicates ownership, portability, or an equivalent product principle through a small code-oriented visual comparison.

### Layout and alignment
- Use a full-width dark section with generous vertical padding, approximately 96–140px on desktop and 64–88px on mobile.
- Place the content in a centered max-width container of roughly 1180–1240px.
- Use a two-column desktop layout: an editorial message on the left and a visual comparison on the right. Keep the columns optically balanced rather than forcing equal widths.
- Align the editorial block toward the lower portion of the comparison graphic so the statement feels anchored to the diagram.
- On mobile, stack the editorial block above the comparison. Preserve the relationship between the two states by keeping the comparison horizontal when space allows, or switch to a vertical arrangement with a clear transformation indicator.
- Add a small eyebrow label above the headline and a thin horizontal rule extending beside or after it. The rule should be subtle and should not compete with the message.
- The comparison should contain two compact repository/file-tree cards with a centered transformation symbol between them. Add a small explanatory caption beneath the graphic.

### Typography hierarchy
- Use a distinctive, soft display sans-serif for the main statement, with a large size around 38–48px on desktop, 32–38px on mobile, tight line-height around 0.98–1.08, and restrained letter spacing.
- Split the main message into a stronger first line and a quieter supporting line. Use weight and colour contrast rather than excessive size changes.
- Set the eyebrow, card labels, file names, transformation symbol, and caption in a monospace or technical typeface.
- Render technical labels in uppercase with generous tracking, approximately 0.16–0.24em. Keep file names in a readable mixed-case monospace style.
- Maintain a clear contrast between the headline, secondary line, metadata, and diagram labels.

### Colour and surface treatment
- Use a near-black warm background, approximately #211F19 or #24221C.
- Use a warm off-white for the primary headline, approximately #F4F0E6.
- Use a muted stone or olive-grey for supporting text, approximately #A9A696.
- Use a low-contrast warm border for the cards and divider lines, approximately #4A483B with 60–75% opacity.
- Use a muted pale yellow accent for folder markers or key technical details, approximately #D8C47A or #E0CB80.
- Keep the overall palette restrained: the accent should identify structure, not become a decorative highlight.

### Cards and diagram styling
- Build each repository card as a compact rounded rectangle with a translucent, slightly lighter surface than the section background, such as #2A2921 at 70–90% opacity.
- Use a 14–18px corner radius, a 1px subdued border, and internal padding around 18–20px.
- Give each card a small technical heading at the top, followed by a subtle divider line.
- Represent folders with small filled rectangular or folder-like markers and files with outlined square markers. Keep markers consistently sized at roughly 11–13px.
- Use even vertical spacing between file-tree rows, around 10–13px, with a compact monospace font around 12–14px.
- Place a simple equals sign, arrow, or other transformation cue between the cards. It should be visually quiet but unmistakable.
- Add a low-emphasis caption below the cards using small monospace text and wide tracking. The caption should reinforce continuity, equivalence, or preserved structure.

### Interaction and responsiveness
- If the comparison represents a state change, introduce a subtle hover or focus treatment: slightly brighten the card border and accent markers without adding motion-heavy effects.
- Make the cards accessible if they are interactive; provide visible keyboard focus, descriptive labels, and sufficient contrast.
- Keep animations optional and restrained: a short fade or 4–8px translate on reveal is enough. Do not animate individual file rows continuously.
- Ensure the diagram remains legible at tablet widths. Reduce card padding and type size before allowing overflow.
- Respect reduced-motion preferences.

### Content guidance
- Write a short, assertive headline about the product principle being demonstrated.
- Use realistic but generic folders and files relevant to the user's product or audience.
- Keep the diagram content minimal; it should be understood in a few seconds and should support the headline rather than act as a full code sample.

## Never
- Never use logos, product names, proprietary wording, or exact copy from the reference.
- Never reproduce the reference's exact file names, labels, layout proportions, or visual composition one-for-one.
- Never add illustrations, stock imagery, decorative artwork, or unrelated images.
- Never make the code-tree cards look like a full IDE or terminal window; this is a focused conceptual comparison.
- Never use bright gradients, heavy shadows, excessive animation, or a crowded colour palette.