Pinstripe

핀스트라이프

A stripe as fine as a pin — one of the simplest repeating patterns there is.

Also known as: 가는줄무늬
···
html
<div class="ps"></div><span class="tag">pinstripe</span>
css
.ps{position:absolute;inset:0;background-color:#1c2536;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 1px,transparent 1px 14px);
  animation:pan 6s linear infinite}
@keyframes pan{to{background-position:14px 0}}
.tag{position:absolute;left:10px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.14);
  color:#fff;font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em}

The name is literal — each stripe is as thin as a pin. It settled into British financial-district suiting in the 19th century and became tightly tied to bankers' and lawyers' dress, distinguished from the bolder chalk stripe mainly by width.

Structurally it's about as simple as a repeating pattern gets — a single direction (usually vertical), evenly spaced, evenly thin lines, no crossing, no offset. Because of that simplicity, the stripe-to-ground contrast is usually kept low; too sharp and it reads as visual static rather than a stripe.

In CSS it's a single repeating-linear-gradient: 1px opaque, the rest transparent, repeated vertically. It's the cheapest pattern to build in this whole category.

When to use

Use for business/formal texture and subtle UI divider backgrounds. On low-density screens the lines can moiré — keep at least 1.5px of spacing.