Rhythm

Repetition/consistency of spacing.

html

<div class="rh-wrap" role="img" aria-label="A stack of bars spaced either by one repeated unit or by irregular gaps, showing what visual rhythm looks like when it holds and when it breaks" data-count="4">
  <div class="rh-stack">
    <div class="rh-bar" style="background:#BFD9F2;margin-bottom:16px;">1</div>
    <div class="rh-bar" style="background:#BFD9F2;margin-bottom:16px;">2</div>
    <div class="rh-bar" style="background:#BFD9F2;margin-bottom:16px;">3</div>
    <div class="rh-bar rh-bar--4" style="background:#BFD9F2;margin-bottom:16px;">4</div>
    <div class="rh-bar rh-bar--5" style="background:#BFD9F2;">5</div>
  </div>
  <p class="rh-caption">Every gap is 16px — a steady rhythm. (4 bars shown)</p>
</div>
<style>
.rh-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 260px; }
.rh-stack { background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 12px; box-sizing: border-box; }
.rh-bar { height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.rh-bar--4, .rh-bar--5 { display: none; }
[data-count="4"] .rh-bar--4 { display: flex; }
[data-count="5"] .rh-bar--4, [data-count="5"] .rh-bar--5 { display: flex; }
.rh-caption { margin: 12px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="rh-tw font-sans text-[#241430] w-[260px]" role="img" aria-label="A stack of bars spaced either by one repeated unit or by irregular gaps, showing what visual rhythm looks like when it holds and when it breaks" data-count="4">
  <div class="bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-3 box-border">
    <div class="h-[26px] rounded-md flex items-center justify-center font-bold" style="background:#BFD9F2;margin-bottom:16px;">1</div>
    <div class="h-[26px] rounded-md flex items-center justify-center font-bold" style="background:#BFD9F2;margin-bottom:16px;">2</div>
    <div class="h-[26px] rounded-md flex items-center justify-center font-bold" style="background:#BFD9F2;margin-bottom:16px;">3</div>
    <div class="rh-tw-bar4 h-[26px] rounded-md items-center justify-center font-bold" style="background:#BFD9F2;margin-bottom:16px;">4</div>
    <div class="rh-tw-bar5 h-[26px] rounded-md items-center justify-center font-bold" style="background:#BFD9F2;">5</div>
  </div>
  <p class="mt-3 text-xs text-[#241430]/80">Every gap is 16px — a steady rhythm. (4 bars shown)</p>
</div>
<style>
.rh-tw-bar4, .rh-tw-bar5 { display: none; }
.rh-tw[data-count="4"] .rh-tw-bar4 { display: flex; }
.rh-tw[data-count="5"] .rh-tw-bar4, .rh-tw[data-count="5"] .rh-tw-bar5 { display: flex; }
</style>

react

export function Rhythm({
  consistent = true,
  spacing = 16,
  accent = "#BFD9F2",
  barCount = "4",
}) {
  const bar = { height: 26, background: accent, borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700 };
  const gaps = consistent ? [spacing, spacing, spacing, spacing] : [6, 28, 10, 22];
  const n = Number(barCount);
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 260 }}
      role="img" aria-label="A stack of bars spaced either by one repeated unit or by irregular gaps, showing what visual rhythm looks like when it holds and when it breaks">
      <div style={{ background: "#FAF7F2", border: "1.5px dashed #24143055", borderRadius: 8, padding: 12, boxSizing: "border-box" }}>
        <div style={{ ...bar, marginBottom: gaps[0] }}>1</div>
        <div style={{ ...bar, marginBottom: gaps[1] }}>2</div>
        <div style={{ ...bar, marginBottom: gaps[2] }}>3</div>
        {n >= 4 && <div style={{ ...bar, marginBottom: gaps[3] }}>4</div>}
        {n >= 5 && <div style={bar}>5</div>}
      </div>
      <p style={{ marginTop: 12, fontSize: 12, color: "#241430cc" }}>
        {consistent ? `Every gap is ${spacing}px — a steady rhythm.` : "Gaps vary — rhythm breaks."} ({barCount} bars shown)
      </p>
    </div>
  );
}