The system as decided on 2026-09-23, drawn at real size in Open Sans. Every colour, size and radius on this
page comes from blockr-tokens.css and blockr-tokens-dark.css, so Dark switches every part at once.
The written rules are in the design system article, under the same sections and anchors. Everything is live: open the
gears, hover the icons, click the words, pills and boxes.
A block's face holds what most uses need; an output block's face is its output and a sentence with live words. Both keep the rest behind the gear, which opens the tray in flow and closes on the gear or Escape. rules: design-system#block
| Ozoneint | Solar.Rint | Winddbl | Monthint | |
|---|---|---|---|---|
| 1 | 71 | 291 | 13.8 | 6 |
| 2 | 135 | 269 | 4.1 | 7 |
| 3 | 49 | 248 | 9.2 | 7 |
| 4 | 64 | NA | 7.4 | 8 |
Mean ozone by month
by , for
Days with missing ozone are left out.
Each principle below is a rule the later sections apply. rules: design-system#principles
--blockr-color-text-muted), never palette steps (--blockr-grey-500) and never a hex. A theme changes a few palette values and dark mode is a second mapping of the same ramps.Palette tokens are read by other tokens only; components read meaning tokens, named --blockr-color-<text|bg|border>-<role>. Values below are read from the token file at load.
rules: design-system#foundations
A ten-step grey ramp, an accent ramp that points at blue unless a theme overrides it, and small red, amber and green ramps for status. No UI colour outside the palette.
The level follows the job the text does. Muted text does not sit on the hover or selected background: on a hovered row it turns default, on a selected row accent.
text-default
text-muted
NA; icons at resttext-disabled
Layers sit on each other: the board canvas (bg-page), a panel (bg-surface), anything
floating (bg-raised). Inside a layer: a quiet fill (bg-subtle), a field (bg-field),
hover and selected. Borders are soft (border-default). A field's focus is the accent border plus the soft ring; everything else takes a 2px accent outline on keyboard focus (Tab through this page).
Keyed off data-bs-theme="dark", the attribute bslib writes. The grey and blue ramps are restated by
position, page, surface and raised get their own values, and status colours turn lighter. The gear tray takes the page colour
in dark. Use the switch at the top; every part of this page follows.
A theme overrides the five accent steps (and optionally the greys, a radius and a face). Every accent-derived token follows: main button, ticked box, picked segment, live word, count.
Default accent (blue)
A theme's accent (teal, five values)
Open Sans, set once through --bs-body-font-family. Five sizes, three weights, one monospace stack.
Four radii and the capsule. Three control heights: 42px for fields, rows and buttons beside them, 30px in toolbars and dialogs, 26px in a header row next to the gear.
One shadow carries the floating layer: shadow-md on menus, tooltips and the chart tooltip. The
tray is in flow and has none. In dark the lighter bg-raised separates a menu from the surface. Hover and state
changes take --blockr-transition (0.15s); the tray slides over 0.22s.
A bar's free end takes mark-radius (2px); the end on the axis stays square. Text on a chart canvas is
11px. A mark that supports a choice, such as the bars in a crossfilter list, is drawn at the supporting weight (0.6).
Chart and series colours come from blockr.theme; this page draws them in the accent.
One Okabe-Ito token per category, read by the block's mark. A fixed set, the same under every theme and in
dark. A category outside it takes uncategorized.
One token, read by the logo in the navbar. Like the category colours, it is the same under every theme and in dark. It clears 3:1 on the surface in both schemes.
Below the dock header a block has a header row, the gear tray, the controls on its face and its output (body, caption, status line). Its output title and sentence belong to the output and export with it. rules: design-system#block
An output block with its tray open. The transform block above shows the fourth part, controls on the face.
Mean ozone by month
Mean by
Days with missing ozone are left out.
bg-subtle (the page colour in dark), no border, white fields, a beak towards the gear, no heading. Sections are a section title and 24px of space. Fields use the grid.The sentence on a block's face looks as it will in print. The author writes it in the #| subtitle:
template and decides the line breaks with \n; blockr generates nothing and adds no breaks. A live word is the only
way an output block's argument reaches its face.
AE summary by worst grade
Rows: Grades:
[ ... ] leaves with its value; the sentence never prints "(none)".Simplified mode removes the gear button and nothing else. What stays on the face stays live for the reader.
Mean ozone by month
Mean by
A tinted square, the category colour at 18% on the surface, with the glyph in that colour: 32px in the dock header, 24px in list rows (with the package as a badge), 20px in the compact header and 16px in a tab. The glyph is half the mark plus 2px and the corners a quarter of it. The header mark's tooltip names the block type and package.
A block that cannot run yet shows an amber dot on its mark and says so in its status line. An error or a warning for the whole block is a message above the output. Past 300ms of computing any block dims its output and runs a clock under it. Press Run. The block that needs you has a solid amber dot; the blocks below it, waiting for it, have amber rings.
A board option for dashboards: the card has no header; the tab carries the mark and the name, the actions sit right of the tabs, a double-click on the tab renames. It waits on dockViewR's tab components.
One grid of about 130px columns, 8, 6, 4, 2 or 1 by panel width. A number or checkbox takes one column, a select or text field two, tags or an expression the whole row. rules: design-system#layout
Set the panel width, or drag the panel's bottom-right corner. Columns line up across sections at every width; a short section leaves room on the right. "Show columns" draws the tracks and each field's size.
| Between | Space |
|---|---|
| field label and its control | 4px |
| grid rows · grid columns | 16px · 12px |
| section title and its fields | 10px |
| one section and the next | 24px, no rule |
| list rows | 6px |
| row handle's padding (left of the row) | at least 14px |
A row in an add-and-reorder list is 42px, the height of a field, border included. Its content starts on the same edge as the label above it (the dashed line). The handle appears in the container's left padding on hover or focus; remove appears on the right and turns red on hover. The fold arrow stays visible. Hover a row.
The second row is drawn hovered.
The outline, the report and the deck list blocks with one row, the row of the "+" menu: 34px, the 24px mark, the name on one line. Numbers only where the order is the product. The row's end holds state the reader needs at a glance (the report's code and output toggles, the outline's views as meta text); a "…" appears on hover. The block open in the dock is the current row. A stack is a tinted band; the pointer on its header deepens the whole band. Hover the rows.
Drawn: the "Tables" header hovered, "Ratio by species" hovered in the report, "Sepal scatter" open in the dock.
A link is pointed at like a row: under the pointer it thickens in the accent colour and its tooltip names it; a click opens its menu (drawn open for the link from "Two species" to "Sepal ratio"). Adding a link starts from a block: drag its dot onto another row, or click a free-input marker (the open circle after "Join lookup": its input y has nothing linked) and pick the block that feeds it. "∞" marks a block that takes any number of inputs. Removing a block with one input links its parent to its children.
Fields are 42px on the field background with a soft border; focus is the accent border and the ring. On/off is a bare checkbox; two or three short fixed values a segmented control; four or more, or values from the data, a Select; several from a list, tags. rules: design-system#controls
Text and numbers commit on Enter or blur; while a field holds an uncommitted change the ↵
button shows, and Escape reverts. Number fields keep type=number and hide the arrows. Type in any of them.
A select is a field with a caret. Its dropdown takes the field's width (at least 190px), shows a filter box above 8 options, and marks the current pick at weight 600. Several from a list is one multi control with tags; the options stay hidden until it opens. Only the hovered tag shows its ×.
The bare box and its words, with no field shell and no empty label row. In the grid it sits on the bottom line of its row and takes one column; on a row of its own it takes only its own height. Click them.
For a fixed set of two or three short values. Both values stay in view and the pick reads without a click. It fills a grid cell like a field; three segments need about 240px, so they take two columns. The pick is the main-button tint.
Four or more values inside a row (a filter operator, a join key operator) are a pill with a caret that opens a menu anchored on it. It is 24px inside a 42px row, keeps the row's shape and puts every value one click away. Click the pills.
The one mode switch is a pressed icon button at the 26px tool size. It is a tool, so it stays out of the field
grid; its tooltip names the other state and it sets aria-pressed. Click </>.
Double-click a name (or pick Rename in its menu): the text becomes a field at its own size. Enter commits, Escape restores, a click elsewhere commits; an empty or duplicate name is refused in place. Try both.
Four kinds of button in three sizes; the main button is the tinted accent and there is no solid accent button. Icon buttons are quiet and carry a tooltip. rules: design-system#actions
42px beside inputs, 30px in toolbars and dialogs, 26px in a header row next to the gear. At most one main
button per view. Destructive is only for confirming a removal. The classes are .blockr-btn--main,
--secondary, --quiet, --danger and the sizes --m, --s,
--xs. blockr-theme.css maps Bootstrap's button classes onto them, so Shiny's
actionButton() and downloadButton() follow them, and so do Shiny's modal buttons.
btn-success goes.
| 42 · beside inputs | 30 · toolbars, dialogs | 26 · header row | |
|---|---|---|---|
| Main accent text, 7% fill, 35% border | |||
| Secondary surface, soft border | |||
| Quiet text only, muted | |||
| Destructive the main style in red | |||
| Disabled |
Tools are 26px, muted at rest, default text and the hover fill on hover. The gear is the one control in the row
that opens configuration, so it has a frame: at rest a soft border, on hover the strong border, open the main-button tint.
Bootstrap gear-fill at 14px, one class .blockr-gear-btn, tooltip "Settings". Hover them.
Handles and remove buttons are thin, muted, hidden until their row is hovered or focused; remove turns red on its own hover. Fold arrows stay visible.
One chevron, Blockr.icons.chevron: a 12px box, the path M3 4.5l3 3 3-3, 1.4px stroke, round
caps and joins. 10px in a pill or a bare select in a row, still 1.4px. text-muted, text-default on hover of it or
its row, text-disabled when disabled. Rotations use --blockr-transition. Hover the rows and open the selects above
to see the flip.
The glyph, 12 and 10px, and at 4×
Fold: opens in place. Down open, right closed (−90°)
Menu or select: floats. Down, up while open (180°)
Go to: a page, back, the next rows. Right or left, no rotation
Menus hold choices and actions and open on click; tooltips name things on hover. Both use the raised surface with
shadow-md. blockr has no popovers. rules: design-system#floating
Raised surface, 1px border, radius 8. A field dropdown has 32px rows and 4px padding; a menu from a button, an icon or a word has 34px rows and 6px padding. Rows are 14px with 10px side padding; meta 13px, muted, turning default on the hovered row. The current pick is weight 600. Disabled rows stay listed and say why in a tooltip. Group titles take the section-title style, sticky while the list scrolls; a divider separates groups without a title.
A field dropdown: filter box above 8 options, groups, hovered row, current pick, disabled row
The block's "…" menu: the toggle for what the card shows, with its icon and a check while on, then the actions, and the removal after a divider, red only under the pointer
Placement
computePosition, moved to blockr.ui).Open the live ones: a field, a word and the "…" of a header row.
Mean ozone by month
Mean by
One style for every name shown on hover: a small light card on the raised surface, 12px, soft shadow. Every
icon-only button and every cut-off label gets one; nothing else does, and no native title tooltips remain. Hover
the icons and the cut-off names.
Drawn open over the gear and the cut-off label; hover the others.
A chart's data tooltip uses the same surface: the swatch carries the series colour, labels muted, values at 500 with tabular figures.
No popovers: the block's type and package are the tooltip on its mark, and "Copy block ID" is a menu item. The dock header has no subtitle.
Every "+" opens the same menu: search on top, category titles, one row per block type with its mark and package. Placing, linking or stacking a block that is already on the board uses the same menu, listing the board's blocks with their type as meta. Type to filter; arrows and Enter work. The tool at the top right of the menu for adding a block opens the same list as the dock's block browser in the sidebar, where a block's ID, title and links are set before it is added.
Shape tells the small kinds apart: a badge (read only) has round ends; a tag (a value you picked), a pill (a click changes a setting) and a button have 4px corners. A badge has colour only for status or "on". rules: design-system#labels
bg-subtle, border-default, muted. Types, packages and significance levels are neutral.bg-hover, a step darker than the field, with the name at 80% text-default; on the surface (the crossfilter's Filter by) bg-surface. Its × shows on the hovered tag only and turns red on its own hover.bg-hover fill; it opens a menu. The click-to-cycle pill is retired.accent-700 (4.5:1 for small text). No control shows one at the moment: it never counts active filters..blockr-select__tag, a pill .blockr-pill, a badge .blockr-menu__badge or .blockr-tooltip__badge. The word "chip" goes.Each status has a text, a background and a border colour; a message uses all three. The status line under an output is 12px muted text.
The board speaks in names, an exhibit in labels. Where a column is picked it shows its name with the label as muted meta text, cut first. An exhibit shows the label only; hover an output table header for the name. Printed filter text uses labels; the board's pills and receipts use names.
Picking (a tag, a filter row)
An exhibit (hover a header)
| Unique Subject Identifier | Age | Sex |
|---|---|---|
| 01-701-1015 | 63 | F |
| 01-701-1023 | 64 | M |
Filter text
Filtered: Sex = F; Age 18 to 64
On the board
A block that narrows what the reader sees says so in one place on its header row: grey 12px text with the count while nothing is filtered, the 26px main button with the reset icon and what the filter kept while something is. The button clears the filter; its tooltip names the clauses. A block that sends a filter on without narrowing its own view names the clause in its status line, with Reset beside it. Nothing counts active filters, and dots are for block status only.
Nothing filtered
Filtered (hover the button)
A drill, sent on
Charts, the crossfilter and the code editor follow the same anatomy and tokens as every block; their own settings are local tokens and the mark group. rules: design-system#special
The canvas reads the tokens at render: axis and data labels text-muted, axis line
border-strong, split lines border-default, separators bg-surface, reference lines
border-danger, face from the body. Canvas text is one size, --blockr-mark-font-size. A facet strip takes
the section-title style. Exports (PNG, pptx) take the light values.
Days by temperature, per month
Count of days by band, facet by
Cool below 70°F, warm above 84°F.
One style for the preview (above, in the transform block) and every output table. 30px rows, no rules in the body, a rule under each column header with a 12px gap, names 13px 600, the second header line 12px muted (a label; the Big N at 600). Numbers and their headers right-aligned, a spanner centred. Groups carry the fold chevron in the gutter and are set apart by space instead of a rule. The chevron top left folds or opens every group; a first-column title stays the producer's text beside it. Hover a row; the Mean cell under High dose shows a drilled cell (row and column tinted, the crossing a step stronger).
Demographics
Summary of by
| Characteristic | PlaceboN = 86 | Low doseN = 84 | High doseN = 84 |
|---|---|---|---|
| Age (years) | |||
| Mean | 75.2 | 75.7 | 74.4 |
| SD | 8.6 | 8.3 | 7.9 |
| Min, Max | 52.0, 89.0 | 51.0, 88.0 | 56.0, 88.0 |
| Sex | |||
| F | 53 (61.6%) | 50 (59.5%) | 40 (47.6%) |
| M | 33 (38.4%) | 34 (40.5%) | 44 (52.4%) |
The standard header row, with Reset all saying what the filters kept, above every filter it clears. "Group by" labels a field; "Filter by" titles a section over the tags and cards. A tag whose card is open takes the hover wash; a tag cutting rows takes the accent tint. A card's list is a table: headers with their rule, rows 30px, Count right-aligned with the sort bars before it. A card's reset is disabled while it cuts no rows; above 8 values it has a search field. The bars are supporting marks.
The editor is a large input: field background, 13px mono. Its colours are four local tokens,
--blockr-code-keyword, -string, -number and -comment, pointing at
text-accent, text-success, text-warning and text-muted. Line numbers muted,
the active line bg-hover, the input line a band mixed from the accent.
Check a block against this list before release, in light and in dark. rules: design-system#authors
--blockr-<owner>-* and read them only in its own stylesheet.--bs-body-font-family); do not name a font..blockr-gear-btn, only when there is something to configure. No Apply button.title..blockr-btn or the Bootstrap classes mapped onto it; no btn-success.Blockr.layer; no document listener or stopPropagation() of its own.--blockr-mark-font-size, ink from the tokens at render.Where the code lives and the legacy names. rules: design-system#appendix
inst/assets/css/blockr-tokens.css and blockr-tokens-dark.css.gear_tray()).