Separator Dot

Never the glyph

Datelines, job meta, any two facts sharing a line: the thing between them is this dot, not a typed ·. The glyph is round, it inherits the text colour, and it is read aloud by screen readers as "middle dot". SeparatorDot is a square, light grey, and aria-hidden.

import { SeparatorDot } from "@rogo-technologies/brand/separator-dot";

<div className="type-marketing-body-medium-xs text-marketing-gray flex items-center gap-2.5">
  <span>{post.category}</span>
  <SeparatorDot />
  <time dateTime={post.date}>{formatted}</time>
</div>;

gap-2.5 is the spacing the dot is drawn for. It sits on the text baseline's centre line, so the row it lives in wants items-center, not items-baseline.

The diamond

shape="diamond" turns the same square 45°. It is the brand's divider: the mark that already brackets the hero CTA and heads a list, borrowed down to metadata scale. The newsroom's datelines wear it. The product keeps its square flat.

<div className="type-marketing-body-regular-md text-marketing-gray flex items-center gap-2.5">
  <time dateTime={post.dateline.iso}>{post.dateline.label}</time>
  <SeparatorDot shape="diamond" />
  <span>{post.category}</span>
</div>

Same colour and same 4px square underneath, so the two shapes carry the same weight in a row and you can swap one for the other without retouching the spacing. Rotation leaves the layout box alone: the diamond reaches about 5.7px corner to corner while still occupying 4px of the line, so gap-2.5 reads a hair tighter around it. That is the intended density, so don't widen the gap to compensate.

Pick one shape per surface. A page that separates its dateline with a diamond and its byline with a square reads as two different systems.

Props

Everything else is span props.

It stays square

Rogo's language is square, and every hand-rolled copy of this dot has drifted: round in one place, hand-rotated with a className in another. The component applies rounded-none and its own rotate-* after your className, so a stray rounded-full or rotate-45 from a caller loses the merge. Ask for the diamond with shape, not with a class. Round dots are still right for list bullets, status dots, and colour swatches, since those are not dividers.

The default is bg-marketing-gray-light, which reads as light grey on both the white and the dark brand grounds. Override the colour only when a ground genuinely needs it; the size is fixed.

For a rule between blocks

This is inline punctuation, not a rule. A divider between stacked blocks is a hairline: border-t border-marketing-border on light grounds, border-white/12 on dark.