Identity document, filled in
A worked answer to every question identity.html beside this file asks, taken from the
language course entry in plugin-style-store/catalogue/. Read it before filling in
your own: answering a list of role names from the list alone is the hardest instruction on the
page, and a worked answer is worth more than the list.
The swatches and the faces below are this document's own, declared in the page rather than inherited from Arena, because a document showing somebody else's colours is a document nobody can approve.
The product
What is being built, who works in it, and on what.
A language course. A lesson path, a streak, a progress bar, and one large button that is the screen's reason. It is used in short bursts, mostly by a thumb, and getting the next thing pressed matters more than getting more onto the screen. The lesson path itself is a game map rather than furniture, so that part is markup we write.
The register decides whether Arena's component list is the right one. A tool somebody works in is furniture Arena ships. A photo wall, a feed of posts, a slideshow, a document editor or a game map is markup you write, and the skin still travels.
The palette
Whose brand this is, which polarity leads, and which colour is the voice. Arena installs with Dravensoft's palette, and a project's own is the one entry it replaces.
Ours. Light leads, because the product is used outdoors and in daylight as often as not. Green is the voice and gold is distinction, and every status colour is louder here than a console would want, because a wrong answer has to be legible at a glance.
Both polarities are declared or the build has one nobody authored. The categorical ramp is identity and the status colours are meaning, and a status colour is never a series colour.
The type
Which three faces: the display face, the body face, the mono face.
Display Baloo 2, body Nunito, mono Roboto Mono, all three from Google Fonts. The display face carries more weight here than in any other register, because it sets the buttons as well as the headings: a replacement face with no black weight changes this product more than it looks like it will.
The character
How round, how drawn, how heavy and how deep. One answer, because these move together: a product is soft, or drawn, or flat, and a plugin that mixes them reads as two products.
Soft and loud, standing on a hard edge. Everything is round, everything is drawn at twice the hairline, type is black, labels are capitals, and depth is a solid offset with no blur at all.
r-smr-mdr-lgr-xl| What it decides | The roles | This product's answer |
|---|---|---|
| how round it is | r-control, r-field, r-media, r-surface | The large radius step on controls, fields and media, and the extra large one on surfaces. The roundest register of the four, because a soft object reads as safe to press. |
| whether an edge is drawn | every bw-* | Twice the hairline, everywhere. The border is part of the object rather than a separator, and a hairline disappears under the fill. |
| how loud type is | fw-heading, fw-eyebrow, fw-control | Black for a heading and an eyebrow, bold for a control, and the display face on the control as well. |
| whether small text shouts | tt-label, tt-eyebrow, track-label, track-eyebrow | Capitals, with the badge tracking on a label. A control's own text is a shout, which is coherent with everything else here. |
| whether depth is real | shadow-surface-floating, shadow-surface-deep, shadow-control-raised, elevation-<option>-shadow, emphasis-primary-shadow-hover | A hard offset with no blur at all. Depth here is a solid edge under the object rather than a soft cloud behind it. |
| how it answers a hand | press-scale, lift-control, dur-state, ease-state | No shrink and no rise, on an emphatic curve. The press is a travel instead, and no role reaches a press travel, so plugin.css paints it through the button hooks. It is the clearest case of the kernel not reaching something, and it costs a few rules rather than a fork. |
The air
How tight it is to the hand, and how wide it breathes.
Comfortable, which grows the controls to a touch target, because a thumb drives this and not a pointer. A moderate container and the narrowest prose measure of the four registers, because a lesson is read one short line at a time.
| What it decides | The roles | This product's answer |
|---|---|---|
| how tight to the hand | pad-control-x, pad-control-y, size-<option>-control-pad-x, gap-inline, gap-items, gap-control | The loosest padding of the four registers. A target sized for a thumb rather than for a pointer. |
| how wide it breathes | container-max, measure-prose, grid-min, gutter | A moderate container, the narrowest prose measure of the four, a mid grid cell and a middling gutter. |
| which density class | arena-compact, arena-comfortable, or neither | arena-comfortable, and it is the only one of the four registers that asks for it. |
The media
What shape a picture is, before any of it is cropped.
Square, contained. An illustration teaches by being whole, so nothing is cropped, and a square survives every breakpoint this product has.
The page
Arena ships the floor, the column, the air and the components, and no shape they must make. This is the shape.
Two columns: a sticky side rail wider than a console's, holding the lesson path, and a main column on minmax(0, 1fr). The main column is a single centred stack and never a board. The component step goes between almost every pair of things, because there are few things on screen and each gets room.
What this document does not settle
The copy and the brand mark are still open. Whether anybody outside the product has to find it is answered here rather than left open, because it reaches the install and the layer rather than a screen: yes for the marketing pages and the course catalogue, no for everything behind the login, which means the metadata entry point and the layer that ships it.