Marks.

The site has no icon library. Every symbol is drawn inline, in the current color, at the weight a drafter draws, and most are symbols an engineer already reads on a drawing: a position tolerance, a datum, a revision flag.

Playground.

The tolerance symbols and the feature glyphs at three sizes, in the three tones a mark may take.

Size
Tone

Geometric tolerances

Position
Profile
Line profile
Flatness
Parallelism
Perpendicularity
ADatum

Feature glyphs

planar
pocket
hole
holes
width
widths
cone
cones
cylinder
cylinders
slot
slots
import { PositionMark } from "#/ui/site/gdt-marks";
import { FeatureGlyph } from "#/ui/site/feature-glyphs";

<PositionMark className="size-5 text-ink" />
<FeatureGlyph name="holes" className="size-5 text-ink" />
<DatumMark letter="A" className="flex flex-col items-center text-ink" />

Annotation marks.

Marks borrowed from the drawing itself. Revision flags, the newest in redline. The crosshair that marks a corner or separates a marquee. The status lights: working in redline, done and live in green. The arrow every link and button carries, which travels on hover.

ABCRevision flags
Crosshair
Status lights
Travelling arrow
Show code
import { RevFlags } from "#/ui/site/capability-grid";
import { Cross } from "#/ui/site/cross";
import { StatusLight } from "#/ui/site/status-light";
import { TravelArrow } from "#/ui/site/travel-arrow";

Numbering.

Every number on the page counts something real: a section, a figure, a takeaway, a zone of the sheet. Mono, faint, and never decorative. A gap in a run reads as a missing page, so a figure with no caption still takes its number.

3Datum reference frames

Fig 2The angularity tolerance zone.

0196% less time spent making drawings

Show code
import { SecNo } from "#/ui/site/section-number";

<h2><SecNo>3</SecNo>Datum reference frames</h2>

Drawing a new mark.

  • Draw the standard’s shape. A tolerance symbol is drawn as ASME Y14.5 draws it, on a 14 by 14 box; a feature glyph on 24 by 24. Do not stylize them: the reader uses these symbols every day.
  • One weight, the current color. A 1px stroke in currentColor, no fill unless the symbol has one (the datum’s triangle), so the mark takes its tone from the text around it.
  • Hidden from screen readers. aria-hidden, because the word beside a mark already names it.
  • A group is a dashed box. Several of one feature take the single glyph in a dashed, slightly rounded box: holes, slots, cylinders.
  • Other people’s marks are images. ASME, SolidWorks, Siemens and the rest are their own files, never redrawn and never re-inked.

Best practices.

Do

  • Use the drafting symbol when there is one.
  • Size a mark with the type beside it.
  • Give redline to the one mark that is the point.
  • Add a new mark to its family's file, beside its siblings.

Don't

  • Do not import an icon set.
  • Do not fill a mark the standard draws as a line.
  • Do not give a mark a meaning the drawing does not.
  • Do not number anything that is not counted.

Go to manufacturing.

Book a demoOpen the Toolbox