How Clear looks, sounds and is built.

Anatomy

Core

7px · 6px in a pill

A solid circle in the dot colour.

Glow

6px blur · 55%

A soft blur of the same colour around the core. In a pill it softens to 4px at 45%.

Ping

340% · 2s

A copy of the core that grows and fades, then waits.

Gap to the word

10px · 7px in a pill

Colour

On a light button

#0E6B4E

--color-signal-deep · 5.0:1 on light

On a dark button

#6FCB9F

--color-signal-light · 8.4:1 on dark

In a status pill

its status

In a status pill, the dot takes the pill’s own status colour.

• Pulse only what is actually live or open.
• Never on every button, and never as a bullet point.
• Always beside a word that says the same thing. The dot is never the only signal.
• With reduced motion, keep the dot and stop the ping.

For developers

Plain CSS with hex values, so it works outside this codebase.

.live-dot {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0E6B4E;
  box-shadow: 0 0 6px 1px rgb(14 107 78 / .55);
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: live-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes live-ping {
  0% { transform: scale(1); opacity: .6; }
  75%, 100% { transform: scale(3.4); opacity: 0; }
}
/* On a dark ground, use #6FCB9F. */
@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none; opacity: 0; }
}

For designers

The same motion for Figma, After Effects or a video export.

Core layer

7px circle

Dot colour, 100% opacity.

Glow

6px blur

Drop shadow, no offset, 1px spread, dot colour at 55%.

Ping at 0s

100% · 60%

A duplicate of the core, above it.

Ping at 1.5s

340% · 0%

Ease out. Then hold, invisible, until 2s.

Loop

every 2s

Seamless. Nothing on the core moves.

Social sizes

Feed, square

1080 × 1080

Feed, portrait

1080 × 1350

Story and reel

1080 × 1920

Link preview

1200 × 630

X header

1500 × 500

• Keep a margin of 8% of the short edge on every side.
• On stories, keep text out of the top and bottom 14% — the app covers it.
• Body text no smaller than 28px on a 1080px canvas.
• One statement per graphic. If it needs a paragraph, it is a post, not an image.

Print

Bleed

3mm

Safe margin

5mm

Smallest body

9pt

Colour

CMYK, proofed

• Paper is a printed ground, not a stock colour. Flood it, or choose an uncoated stock close to it — bright white will not match.
• Use the outline mark from 15mm wide and the solid mark below that.
• Convert with the CMYK values here as a starting point, then check a proof before a full run.