On this page
Overview
Show code, ProjectBanner.tsx
Variants
Motions
A drawing can draw itself in, draw itself out, run in and out by turns, or play, its lines moving in the order it was constructed; every drawing takes as long.
- Draw it in as it arrives and out as it leaves.
- Run it in and out by turns while people wait.
- Play it where it already shows, such as on hover: it never leaves the screen empty.
Sixteen drawings
Each is a construction from geometry, drawn whole on a sheet a little wider than tall.
- They are interchangeable: choose by what looks right in the space, or vary them from screen to screen.
- None of them means anything, so none of them suits a particular subject.
- The buttons under each drawing play its motions there.
Anatomy
Drawing
Show code, LineArtAnatomy.tsx
Behaviour
Cropping and anchoring
The drawing covers its box, so a box of another shape crops it from the side away from where it sits. It always rests on the box's foot: a box wider than the drawing crops its top.
- At the end
A banner's end, cropped from its start. The default.
- At the start
A drawing before the content, cropped from its end.
- In the centre
A box of its own, such as above a message, cropped both ways.
Show code, WhereItSits.tsx
Right to left
In right-to-left text the drawing is mirrored, so it still sits at the end and is cropped from the start.
Show code, RightToLeft.tsx
Themes and high contrast
Its lines take the muted edge color in every theme, quiet on any surface, and stay a hairline at any size.
- With high contrast, they take that theme's muted edge.
- In forced colors, they take the system's gray text color.
Adapting to width
As its box narrows, the drawing keeps its end in view and gives up its start.
Show code, CroppedFromItsStart.tsx
Rules
A drawing is decoration: one to a screen, beside what people read, never behind it.
Use it when
- The end of a banner or a page's header, beside its title
- Above an empty state's message, where a screen has nothing else to show
- The background of a header, clear of its text
Show code, AboveAnEmptyState.tsx
One per screen
A single drawing gives a screen a quiet character; several turn into noise.
- Vary the drawing between screens, not within one.
- Give a screen the same drawing every time it opens, such as by its place in the application.
Decoration only
A drawing doesn't say anything, so it never stands in for an image, a chart or an icon.
- Never put it behind text, a chart or controls that need their contrast.
- Never recolor it to draw attention: its quiet line is the point.
Show code, OneAtTheEnd.tsx
Accessibility
Assistive technology
Assistive technology skips a drawing. One that means something in its place takes a label and is read as an image.
Words to use
Ask for a drawing in these words.
- Line art
A quiet geometric drawing that fills its box.
- Monochord
One of the drawings, by its name.
- At the end
A drawing cropped from its start, as at a banner's end.
- At the start
A drawing cropped from its end.
- Centred
A drawing cropped from both sides, as above a message.
- Per screen
A different drawing on each screen, the same on every visit.
- Described
A drawing that is content, read as an image.
- Appearing
A drawing that draws itself in, as it arrives.
- Disappearing
A drawing that draws itself out, as it leaves.
- In and out
A drawing that appears and disappears by turns, for a wait.
- Playing
A drawing that redraws itself and rests, such as on hover.