Container Lines

Container Lines

Use When

• A page needs subtle vertical guides that reveal the content container width.
• A hero, section, or product page feels too loose and needs structural tension.
• The design calls for mini corner squares, measured edges, or quiet technical framing.

Rules

1. Draw lines at the left and right edges of the main content container.
2. Keep lines thin: 1px with low opacity.
3. Add mini squares at container corners or section intersections.
4. Keep the line system consistent across sections; do not change width per section.
5. Place lines behind content but above the page background.
6. Disable pointer events so the guides never block UI.

Base Tokens

cssCopy code
:root {
  --container-max: 1120px;
  --container-pad: clamp(20px, 4vw, 48px);
  --line-color: rgba(24, 24, 27, 0.14);
  --line-strong: rgba(24, 24, 27, 0.28);
  --corner-size: 6px;
}

Page Container Lines

Use pseudo-elements on the layout shell.

cssCopy code
.container-lines {
  position: relative;
  isolation: isolate;
}

.container-lines::before,
.container-lines::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 1px;
  background: var(--line-color);
  pointer-events: none;
}

.container-lines::before {
  left: max(var(--container-pad), calc((100% - var(--container-max)) / 2));
}

.container-lines::after {
  right: max(var(--container-pad), calc((100% - var(--container-max)) / 2));
}

Corner Squares

Add four small squares to sections that need a precise measured feel.

cssCopy code
.corner-squares {
  position: relative;
}

.corner-squares > .corner {
  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);
  background: var(--line-strong);
  pointer-events: none;
}

.corner.top-left { top: 0; left: 0; transform: translate(-50%, -50%); }
.corner.top-right { top: 0; right: 0; transform: translate(50%, -50%); }
.corner.bottom-left { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.corner.bottom-right { right: 0; bottom: 0; transform: translate(50%, 50%); }

htmlCopy code
<main class="container-lines">
  <section class="corner-squares">
    <span class="corner top-left"></span>
    <span class="corner top-right"></span>
    <span class="corner bottom-left"></span>
    <span class="corner bottom-right"></span>
    ...
  </section>
</main>

Minimal Section Wrapper

Use the same container width as the line positions.

cssCopy code
.content-container {
  width: min(100% - (var(--container-pad) * 2), var(--container-max));
  margin-inline: auto;
}

Taste Rules

• Use lines as structure, not decoration. They should organize the page quietly.
• Do not add lines to every nested component; keep them at page or major-section level.
• Mini squares should be small and exact, usually 4px to 8px.
• Avoid bright accent colors unless the entire visual system is technical or industrial.
• Keep container max-width and padding shared between content and guide lines.

Quick Checks

• The vertical lines align exactly with the content container edges.
• Corner squares sit on real container or section corners, not arbitrary positions.
• Lines remain subtle on light and dark backgrounds.
• Mobile still has enough padding between the line and content.
• Guides do not intercept clicks, hovers, or text selection.