Redline

The signature annotation: a stroke-redline line in signal-bg with a mono label naming the token it measures, over an object on grid paper.

Measuring a radius

Light

Monthly plan[Plan description]Continue

radius.lg · 18

Graphite

Monthly plan[Plan description]Continue

radius.lg · 18

Story: /stories/redline/radius/

Measuring a length

Light

space.24 · 96

Graphite

space.24 · 96

Story: /stories/redline/spacing/

Guidelines

• The label is always a real token and value: radius.lg · 18, space.24 · 96. Never decorative words.
• Label: redline text style, signal-bg fill, signal-fg text.
• At most three redlines per object, at most one annotated object per view (the component refuses more than three).
• Lines draw in (motion.duration.slow after base, motion.ease.enter), labels pop after them (base); both are static under reduced motion.

Tokens used

Read from the component’s source:

--bg-grid--bg-subtle--font-mono--motion-duration-base--motion-duration-slow--motion-ease-enter--radius-lg--signal-bg--signal-fg--space-12--space-16--space-4--stroke-hairline--stroke-redline--type-redline-line-height--type-redline-size