---
version: alpha
name: Kirby — File-Tree Feature Explanation
colors:
  primary: '#000000'
  paper: '#FFFFFF'
  heading: '#000000'
  copy: '#999999'
typography:
  heading:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 31.5px
  body:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 31.5px
---

## Overview
An asymmetric feature section pairs large editorial copy with a small directory tree and a floating text-file preview. This isolated component was inspected at 1440px and 390px viewport widths on 2026-09-29. The screenshot contains only `#filesystem`, not the full landing page.

## Colors
Measured text and opaque surface colors are recorded above. Transparent component roots inherit the page background; white/pale appearance is a visual observation, not a measured transparent-to-white conversion. Small artwork accents are not promoted to unmeasured palette tokens. The observed #999999 large explanatory copy is low contrast on the pale surface; darken it when adapting for readability.

## Typography
The sampled heading or label uses 28px / 31.5px at weight 400; supporting text uses 28px / 31.5px. Font-family values are computed CSS stacks, not a guarantee that a licensed font is available in another project. Use a licensed equivalent when necessary.

## Layout
Keep copy in a narrow left column and the file tree to its right on desktop. At 390px the component is 342px wide and about 933px tall, with the demonstration below the copy. Preserve readable code labels rather than scaling all text as an image. Measured desktop component bounds: 1248 × 641px. Mobile bounds: 342 × 933px. These two samples do not establish exact breakpoints.

## Elevation & Depth
Most elements sit on a flat pale surface; the white file preview alone has a soft diffuse shadow. Exact shadow parameters were not measured.

## Shapes
Most elements sit on a flat pale surface; the white file preview alone has a soft diffuse shadow. Exact shadow parameters were not measured.

## Components
Headline, large muted explanatory copy, folder/file tree, connector, and a white site.txt preview using monospace text. File names are illustrative source content, not required implementation paths.

## Do's and Don'ts
Do preserve the component-specific hierarchy, spacing, and responsive structure. Do provide accessible labels, contrast, and keyboard focus in your implementation. Do not reuse source testimonials, trademarks, or performance claims as your own. Do not infer hover, validation, animation, or navigation behavior from these resting-state captures.