Print bleed system
Two decorative sub-systems for giving homepage hero areas an editorial, printed-page feel. .ds-texture-* utilities lay repeating dot grids and diagonal stripes behind sections. The .ds-print-page family wraps content in a frame of double-rule bleed lines, corner registration marks, registration circles, and vertical margin annotations — every decorative part is aria-hidden and ignores pointer events.
Background textures
Three repeating-background utility classes. Fine dots sit behind heroes and trackers; the diagonal stripe is so subtle it reads as paper grain behind feature lists; large dots punctuate the trust section. All three derive from the ink token so they shift with the rest of the system.
Print bleed page
The full assembly: a content block framed by double-rule bleed lines on each side, four corner registration marks, two registration circles centered top and bottom, and two vertical margin annotations in the gutters. Wrap copy and chrome inside .ds-print-page__inner so the bleed structure has its margin to breathe.
An editorial frame for your career
The hard-offset shadows, the dotted leaders, the registration marks — every detail nods to the printed page. Your career deserves better than a Word template.
v-bleed-frame directive · preset frames
Drop-in editorial chrome — apply v-bleed-frame to any container with one of three presets (`marks`, `frame`, `editorial`) and the directive injects the right primitives as DOM children. No imports of individual bleed components needed; the host gets `position: relative` automatically. Use the config object form to add gutter labels: `v-bleed-frame="{ preset: 'editorial', leftLabel: '...', rightLabel: '...' }"`.
Bleed components in isolation
Each part of the bleed system on its own stage, rendered through typed Vue primitives — DSBleedRule, DSRegMark, DSRegCircle, DSVerticalRule, DSMarginLabel, DSCornerStamp, DSFigLabel. Decoration is opt-in: compose the chrome a surface needs without recreating the alignment math. DSVerticalRule is a freestanding hairline; the column-track visualization in DSGridLayout is a separate concept rendered as part of that overlay.