Graphic Designer Annotated Poster Profile Block for React

Edit the constants above the component: GREYS (the poster's ink, grey and paper as a share of black), SCALE (the type sizes in points on the sheet), COLUMNS and MARGIN, and the boxes MARK, HEADLINE, LINE and SMALL (where each part sits, in percent of the sheet, never overlapping). The ratios, the step between sizes, the empty share and the lines under the buttons are all worked out from them. To show a real poster, replace the drawn Poster with an image of it at the same shape and keep the layers: they are positioned in percent of the sheet.

They are computed with the WCAG formula from the poster's own greys: the share of black in white is turned into a relative luminance and the ratio is the lighter over the darker, each plus 0.05, to one decimal. The level beside it (AAA, AA, large text only) is the one that ratio reaches for body text. The greys are fixed, which is why the poster is the same in every theme; the page around it follows the theme.

Because the principles are not exclusive: a grid and a scale describe the same sheet. Every layer is always in the page and fades in and out, the buttons are a multiple-choice group that may be empty, and the list under them says which are on, in words and with a mark, never only in a tone. The status line says which layers are showing.

The poster is a picture and is hidden from assistive technology; everything it teaches is written in the list under the buttons, which does not change when you switch layers. The buttons are named by the principle and keep their pressed state. The status line is a polite live region present from the start. The poster, its numbers and its column tags keep their order in a right-to-left layout, because a drawing is not mirrored.

The poster is as wide as the screen allows and the principle buttons scroll sideways under it. Each line under them wraps to two lines, with its on or off mark at the end. Nothing moves when a layer is switched.