Brand Components

A component here is a description, not code

Sidenote does not store your markup and it will not hand anyone a snippet to paste.

What it stores is the description: this is what a button of ours is made of. A background, a text colour, a height, a minimum width, a corner, padding top and bottom, padding left and right, the face its label is set in, and what happens when a pointer is over it. Somebody building in React, in Vue or in plain HTML writes the markup their own framework needs and meets those parameters.

That is what lets one description of your brand serve every place your brand gets built, and it is why the form asks about corners and padding rather than about class names.

Why these six

They were not taken from a list of components a design system usually has.

Sidenote draws your brand through seven layouts that put pressure on different parts of it: a dense page, a sparse one, a string long enough to wrap, two actions competing for attention, a dark surface, a two-column page, and a section opener on a ground that is not a flat colour. The six components are what those layouts need in order to draw at all.

A component earns a row when it has parts whose relationships somebody would otherwise get wrong. The set shrinks as well as grows. A divider came out, because a colour and a number with nothing between them is not a component, it is two values.

A page grid came out for a different reason and one worth keeping apart from it. Its parts did relate, but they are not a component's. How many columns a page has describes the page every component is placed on, which makes it a rule about the brand. It lives with the margin rule now, where it is stated as a proportion rather than as a pixel gutter that is only true at one width.

If you ruled a component before it stopped being demanded, you still have it. It moves to a group of its own, keeps everything it stated and everyone who stood behind it, and loses only the ability to report a gap, because nothing asks anything of it any more.

Reading a row

The picture in each row is your brand. It is drawn from what you have actually ruled, by the same drawing the rest of the page uses. It is not a mock-up in your colours.

So if your card has no corner ruled, the card in the picture has no corner, because that is what an agent would produce today. If a colour is missing, you see what that looks like rather than reading about it.

An orange dot marks a point where something is missing. Every dot is a question with an answer somewhere on this page, and pressing one takes you there.

A component stands on nothing unless its own description says otherwise. A card, a button, a badge and the closing block paint their own ground, so they look like themselves. A heading with its paragraph does not, so it is drawn as type on the page, which is what it is. Putting a tinted band behind it would be the product asserting that your headings sit on one, and nobody said that.

Beside the picture, one line says what is wrong, in the words of the thing that goes wrong rather than the name of the field: no corner, so cards cannot look like they came from one brand. If more than one field is missing, the line says how many more.

Two badges sit on the right of every row. One says whether the row holds. The other counts the fields you have stated out of the fields the layouts read, because a component with one field left and a component with nine both read as unanswered otherwise.

The count in the card header is components that are finished, not rows that have been started. A component with a field still unanswered is not ruled; it is begun.

The picture answers what the component is. Whether it works on a given ground is a different question, and the seven layouts ask it, on the ground each one actually uses. A colour that cannot be read against its own background will not show up here, because a component drawn on its own has no page behind it to fail against.

Filling in a field

Open a row and the fields sit under the picture, in three groups: colour, size and space, and type. The picture stays put at the top of the row while you work down them, and redraws as you type. It is the same drawing the product makes on its own, not a second one that could disagree with it.

Where your brand has a spacing or a corner scale, its steps sit beside the field as one-tap options, labelled with the value each one holds. What is offered is always a value your brand already has, never a number the product thought looked right.

A field that is following one of your steps shows the step's own name where a "px" would be, so you can tell at a glance whether a number is following your scale or standing on its own. Type over it and it stops following: the number you typed is stored as itself. If a field is following a step your brand no longer has, the box goes empty with the step's name still beside it, in red, so a value that lands on nothing is visible rather than quietly wrong.

Where your brand has no such scale, the product says so once above the group, names exactly which fields it affects, and offers to take you to where you would create one. It does not put a plausible number in front of you. That silence is information: a field with nothing beside it is evidence that your brand has no scale behind it yet.

Not every bare field means that, which is why the line names the fields it covers rather than sitting over all of them. Border width and minimum height have nothing beside them because there is no such scale to have.

Typing a value directly always works and is never blocked. The steps are a convenience, not a gate.

"We do not have one" is an answer

Say it and the question closes. The row records who closed it and when, and everyone building with your brand is told this brand does not have one, and to build the layout without it rather than inventing it.

That distinction carries most of the value here. Silence reads as "the description is incomplete, invent something plausible". A recorded no reads as "do not invent one". They are different instructions, and only one of them can be given by leaving a row alone.

There is a box for what you use instead, in your own words, and it travels with the answer. A text link does this job is a real answer to a missing secondary button, and it is worth more to the next person than an empty row. It is reversible: undo it and the question comes back.

A declined row draws no picture. The renderer already draws nothing for a component the brand does not have, so an empty frame would read as one that failed to draw. What stands in its place is the answer, which is the only thing there is to look at.

Something we do not model

Your brand will have something this set has no room for. You can name it and give it markup directly.

It has a cost and the cost is stated where you do it. Markup travels to an agent exactly as you wrote it, nothing can check it, and no picture can draw it. That is why a reason is required alongside it rather than offered. A shortcut nobody has to explain becomes the default within months, and then nobody can tell which half of the brand was ever checked.

Anything you rule beyond the six appears under its own heading, marked as yours, and is not counted in the header. Nothing asks anything of it, so it never reports a gap. Its picture is a picture with no dots on it, which is the honest report for something nobody is applying pressure to, and not a second tier of the same thing.

Clear the markup later and the reason goes with it, and the component is fully modelled again.

What this section does not cover

Every component here is a screen component.

Your poster rules, your deck rules and your print rules are a different vocabulary, and nothing on this card has been asked about them. A section called Components in a brand book usually means everything a brand makes; here it means the parts a screen is built from, and the file an agent reads says so in its own line so that nobody takes it for coverage of everything.

And "Ruled" on a row means every field the layouts read has been stated. Nothing judges the values. A button with a background nobody would ever press is ruled.

The rules above the components

The card above this one holds the three rules every component is placed under: grid and margins, clear space and type hierarchy. A component that states a face is choosing from the levels the type rule holds apart, and a component placed on a page sits inside the margin that rule sets, so it is worth ruling those first.