Every block, and what it holds
On this page
There are 41 blocks, in 7 groups. Here is what each one holds and what it draws on the published page.
WhereDashboard, Brand manual, Content, a section, Add a block
What a block is
A manual is a list of sections, and you add blocks to a section. Each block holds one kind of content and has a form built for it.
- Every block is on every plan, Free included. See What each plan includes.
- You need the
manual:writepermission, which the permission list calls Edit sections and content. Owners, admins and editors have it. A viewer sees blocks and changes none of them. See Roles and what each one may do. - Use a block as often as you like. Three Color blocks in three sections are all read by the token export and the asset area.
- Every block has a permanent anchor, so you can link to one block instead of the whole manual. See Text, headings, anchors and links.
Adding, moving, duplicating and copying a block into another manual are in The editor: sections, blocks and saving.
Identity
What the brand looks like. 7 blocks.
Co-branding takes a layout, one of Side by side, Stacked, Side by side or stacked, and a separator, one of None, A vertical line, A horizontal line.
Logo
The page draws a tile per variant with its label, its note and one link per file, then the clear space diagram with the rule written under it, the minimum sizes as a table, and the misuse rules as red tiles.
Color
A row per color: a swatch picker, a Name, a role from Primary, Secondary, Accent, Neutral and Other, and three value fields, HEX, RGB and CMYK. Type into any one and the other two follow. Then a usage note, a spot color you fill in yourself, and Show on public page, which is one of HEX, RGB and CMYK, HEX only, RGB only or CMYK only. One switch covers the whole block: Show tints and shades on the public page.
The page draws a card per color, every value with its own copy button, eleven tints and shades, and a contrast matrix of every pair. Above the grid are Copy CSS, Copy SCSS and Copy JSON. See Color, contrast, tints and shades.
Typography
A row per typeface: Typeface, Used for, Size, Line height, Weight, Letter spacing, Fallback stack, Sample text and License (optional). A live specimen sits under the row while you type, and the published page shows a card per typeface with the sample set in the real typeface. See Fonts, licenses and specimens.
Type scale
You do not type a list of sizes. You set Base size (px), a Ratio, Steps above the base, Steps below the base, Line height at the base, a Token unit of rem or px, Sample text, Typeface for the samples and a note. The steps follow.
| Ratio | Name | What it is good for |
|---|---|---|
| 1.125 | Major second | Tight, good for dense interfaces |
| 1.2 | Minor third | Calm, a safe default for web |
| 1.25 | Major third | Clear jumps, works for most brands |
| 1.333 | Perfect fourth | Editorial, strong headings |
| 1.414 | Augmented fourth | Dramatic, few steps needed |
| 1.5 | Perfect fifth | Poster like contrast |
| 1.618 | Golden ratio | Very large jumps, use sparingly |
Any other number you type is kept as a custom ratio. The base is held between 8px and 64px and the ratio between 1.01 and 2.5. You get at most 7 steps above the base and 4 below it, named md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl upward from the base md and sm, xs, 2xs, 3xs downward.
Layout and surfaces
The system underneath the design. 9 blocks, 6 of which export as design tokens.
Spacing scale
Set Base unit (px), a Progression and How many steps, then press Generate steps from the base unit. The steps stay editable afterward, and a step you type by hand is kept.
A step that is not a whole or half multiple of the base unit is off the grid. The editor warns you, and the page prints that step in amber with off grid after it.
Accessibility
Three parts. Contrast pairs is a sortable list, each row a Text color and a Background color picked from your own palette, plus a line saying where the pair is used. Minimum sizes is three fields in px: Body text, Smallest text, Touch target. Then three formatted notes: Focus state, which also takes a picture, Alt text rules and Motion.
A pair is rated as you type it, to WCAG 2.1: normal text needs 4.5 to 1 for AA and 7 to 1 for AAA, and large text, meaning 18 point or 14 point bold, needs 3 and 4.5. Each pair is drawn as Aa in the real colors, with the ratio and two badges, Text and Large text, each reading AAA, AA or Fail.
Themes
One row per theme. Theme offers Light and Dark plus Custom, which reveals a name field. Then a color per role, picked from your palette, for the 6 roles: Background, Surface, Text, Text muted, Primary, Border. With a Logo block in the manual, the Logo version select offers its variants; without one, you pick a picture directly. Last, a note.
The page draws each theme in its own colors, with the roles you filled in listed beside it. See Themes.
Story
What the brand says and stands for. 7 blocks. None export as tokens; all are searchable on the published page.
A writing rule picks one of 9 topics: Capitalization, Numbers, Dates and times, Quotation marks, Abbreviations, Addressing the reader, Punctuation, Lists, Links and buttons, and the block names one spelling variant, US English, UK English, Swiss German, German. A naming pattern picks a scope from Products, Features, Files, Campaigns. Anything you type that is not on a list is kept as typed and the select reads Custom.
Images and media
Photography, video and sound. 7 blocks. Everything they show comes from the asset library, so replacing a file updates every block pointing at it. See Uploading files and Where a file is used.
The Video block offers 5 aspect ratios, 16:9, 9:16, 1:1, 4:5, 21:9, and anything else you type. Its subtitle rules are 4 fields: Font, Size, Position, Safe area.
In use
How the brand is applied day to day. 1 block.
A title and an intro sit above the items. Each item picks one of 12 channels: Website, Social post, Paid ad, Presentation, Email signature, Document, Print, Packaging, Signage, Merchandise, Video, Internal. Anything else you type becomes a channel of its own and the select reads Custom. An item that names a channel and nothing else is not drawn.
Guidance and files
Rules, notes and things to download. 8 blocks.
Downloads
A row per file: Label, Group (optional), Format, the file itself, and a short description. The file picker offers the whole library, not only images.
The format is read off the file name when you leave the field empty. When any file names a group, the tiles are shelved under group headings with a count beside each, and files with no group sit under Everything else.
Table
A Caption (optional), a switch reading First row is a header, and a grid. Each column has a name and an alignment, one of left, center, right.
Cells are plain text. When you need formatting, use the Text block, whose editor has a table of its own. Header cells appear only when the switch is on and at least one column is named, and a row with nothing in any cell is dropped.
Checklist and FAQ
A checklist takes a Title (optional), an Intro (optional) and a sortable list of steps, each a label and a line of help. The page draws a tick box per step and counts how many are done. Ticks are not saved. They are sent nowhere and cleared when the page is reloaded.
An FAQ takes a switch, The first question starts open, and a sortable list of questions with formatted answers. One answer is open at a time. A question whose answer is empty is left out.
Reach the brand
Where to go and who to ask. 2 blocks.
Contact gives each entry a Name or team, What they handle, a Kind from Email, Phone, Website, Address, Other, a Detail, and a line saying when to use it. A real email becomes a mailto link and a real phone number a tel link. An address and anything filed under Other are printed as written and linked to nothing.
Social links offers 15 channels. Paste a whole address or type a bare handle; either becomes one working link, with tracking parameters removed. The editor shows the address it resolved to while you type, and tells you when what you typed is neither a handle nor a web address. The icon style is one of Solid, Outline, Plain and the layout one of Icons only, Icon and name, Cards with handle, chosen once for the whole block.
Which blocks become design tokens
9 of the 41 blocks fill the token export. Everything else in a manual is content, and is left out.
| Block | What it adds |
|---|---|
| Color | Every valid swatch, as hex, RGB and HSL. With the block's tints and shades switch on, the eleven steps of each color come too. |
| Typography | One font family per typeface, named after what it is used for rather than after the typeface. |
| Type scale | A size, a line height and a tracking value per step. Only the first type scale block in the manual is exported. |
| Spacing scale | The steps, in the unit they were typed in. Every spacing block contributes, and a repeated value is exported once. |
| Grid and layout | The named breakpoints, as dimensions. |
| Motion | The named durations and the named easing curves. |
| Corner radius | The named corner radii. |
| Elevation | The named shadows, as ready to paste CSS. |
| Themes | One set of role colors per theme. An empty role is not a token, and a theme with no valid color is not exported. |
A color whose hex value is not valid is left out. The same set is written out in 13 formats and served over the API. See Design tokens, in thirteen formats and the API examples (opens in a new tab).
Empty and internal blocks
- An empty block is not published. The editor marks it Empty in the card header, and the published page leaves it out. A section with no intro of its own whose blocks are all empty is left out of the page and out of the jump navigation too. An empty block does not count toward the completeness meter. See What is missing, and who is looking after it.
- An internal block is not published either. It shows an Internal pill in the editor and stays visible to your team.
Where block content turns up outside the manual
What a block holds is read in four other places.
Still stuck? Write to hello@stylehub.cloud and say which page you were on.