Foundations
Motifs
Place halftones, crosshairs, underlines, and collage graphics around a clear message.
On this page
Place motifs around the message
Existing marketing rule: use the four CoreUX motif primitives for the technical collage language. They are decoration around content, not substitutes for an explanation, a chart, or a control.
- HalftoneCircle creates an ambient dot field beside or behind a headline. Keep it away from small text and interactive controls, and check the actual foreground/background combination.
- CrosshairMark works as a small corner registration mark. Its crosshair and plus variants are decorative; neither is a close, add, or zoom button.
- HandDrawnUnderline supports one word or short phrase. Give the SVG enough vertical clearance and keep the words meaningful without the underline. Marketing templates find the first matching substring in their headline; a missing match adds no emphasis.
- TechnicalCollage fills a reserved graphic area with a blueprint grid or offset panels. Its container needs a real height. It is not a meaningful diagram or evidence of a working product.
Choose a focal point before decorating
Proposed documentation convention: begin with the content alone. Add one supporting motif, then add another only if it has a distinct role. This is an editing method, not an enforced component count. The comparison below keeps the words and colors the same so the competing graphics are easy to identify.
Use spacing and decoration tokens for consumer-owned layout, and preserve the marketing color roles. Storytelling accents belong in campaign/data contexts; cobalt remains the primary action color. A decorative underline is not an interactive text link.
Compare crowded and restrained decoration
Compare the same headline with competing decoration and one purposeful underline.
Make room for clarity.
One clear thought gives the reader a place to begin.
The same words compete with five extra graphics. None adds information, even though the text remains readable.
Make room for clarity.
One clear thought gives the reader a place to begin.
One underline supports the phrase. Clear space separates the label, headline, and explanation.
Preview only: surrounding canvas and spacing. All metrics are illustrative.
'use client';
import { CrosshairMark, EyebrowLabel, HalftoneCircle, HandDrawnUnderline, TechnicalCollage, coreuxPalette } from '@coreux/ui';
export default function MotifPlacement() {
return (
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 240px), 1fr))', gap: 24, color: coreuxPalette.inkNavy }}>
{[false, true].map((restrained) => (
<figure key={String(restrained)} style={{ margin: 0, minWidth: 0 }}>
<figcaption style={{ fontSize: 14, fontWeight: 600, marginBottom: 12 }}>{restrained ? 'Do — give the idea room' : 'Don’t — make every motif compete'}</figcaption>
<div style={{ background: coreuxPalette.warmIvory, padding: 20, border: `1px solid ${coreuxPalette.paleSteel}` }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
<EyebrowLabel>System notes</EyebrowLabel>
{!restrained && <CrosshairMark size={24} color={coreuxPalette.inkNavy} />}
</div>
{!restrained && <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}>
<HalftoneCircle size={72} color={coreuxPalette.slate} />
<div style={{ width: 92 }}><TechnicalCollage className="h-20" /></div>
</div>}
<h3 className="font-display" style={{ fontSize: 32, fontWeight: 700, lineHeight: 1.2, margin: '24px 0' }}>
Make room for <span style={{ display: 'inline-block', position: 'relative', paddingBottom: 8 }}>clarity.
<HandDrawnUnderline thickness={3} style={{ position: 'absolute', bottom: 0, left: 0 }} />
</span>
</h3>
<p style={{ margin: 0, fontSize: 16, lineHeight: 1.6 }}>One clear thought gives the reader a place to begin.</p>
{!restrained && <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}>
<CrosshairMark variant="plus" size={32} />
<HalftoneCircle size={72} color={coreuxPalette.slate} />
</div>}
</div>
<p style={{ fontSize: 14, lineHeight: 1.6, margin: '12px 0 0' }}>{restrained ? 'One underline supports the phrase. Clear space separates the label, headline, and explanation.' : 'The same words compete with five extra graphics. None adds information, even though the text remains readable.'}</p>
</figure>
))}
</div>
);
}
Keep decoration out of the reading order
All four shipped motifs already set aria-hidden and presentation semantics. Do not add meaningful content inside them or rely on their shapes to name an action. If a graphic explains a relationship, provide that relationship in real text or use a separately labeled figure. See meaningful labels and decorative semantics.
Placement, overflow, and collisions are consumer responsibilities. A motif has no automatic awareness of a headline or focus ring. Check the longest real text at narrow widths and zoom; the component does not reserve surrounding space for you.
Values generated from @coreux/ui at 06f42fd: public foundation tokens, marketing stylesheet, bundled font definitions, and marketing conventions. Source links require repository access. Install the package and styles once.