SYSTEM

Accordion

Rows on hairlines under an ink rule, each opening at once.

Content shadcn: Accordion, Collapsible

Why are the pictures dithered?
Imagery rests as a 1-bit print and resolves crisp under the pointer. Clarity is the reward.
Why is nothing red?
Red is a state: focus, hover, active and current. Nothing at rest is red.
Is there a mono face?
No. Two typefaces: Redaction for display, Basier Square for everything else.

Anatomy

Rules an ink rule on top, a hairline under each row
Trigger two modules tall: a line in the clean cut at 18/24 and a chevron cell
Hover the line turns --state, the cell fires and the hairline develops out of it
Open the panel shows at once and the chevron turns over; nothing slides
Panel 16/24, up to 65ch, a module of space under it

Decisions

  • Nothing slides

    Panels change by a hard cut. A height that eases open is a slide, and the system has none.

  • Native

    It is a details element, so it opens with the keyboard and without JS.