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 transform block holds the fields that define it on its face; an output block holds 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.
Fixed, outside the tokens: one Okabe-Ito colour per category from blk_color() in blockr.dock. The
same under every theme and in dark.
#0072B2#009E73#56B4E9#E69F00#CC79A7#F0E442#D55E00#CCCCCC#999999Below 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 in the category colour with the glyph in that colour: 28px in the header, 24px in list rows (with the package as a badge), 16px in a tab. 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.
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 Enter ↵
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. Bootstrap's btn-primary, btn-danger
and btn-success go.
| 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.
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, 4px padding. Rows 32px at 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
An action menu: the block's details head it, a divider sets off the removal
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: a block's package and description head its "…" menu, and "Copy block ID" is a menu item. The block subtitle is plain text.
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.
Shape tells the four 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.text-default. Its × shows on the hovered tag only and turns red on its own hover.accent-700 (4.5:1 for small text)..blockr-badge, .blockr-tag, .blockr-pill, .blockr-count. 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
The control that undoes a filter wears the accent tint while a filter is on, carries the number of active filters and names the clauses in its tooltip. It is the 26px button. Where the count is itself a control, count and reset join as one segment. Dots are for block status only.
Filters on (hover Reset)
No filter
Count and reset as one segment
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.
The standard header row, with Reset above every filter it clears. "Group by" labels a field; "Filter by" titles a section. Inside a card: search 30px, 26px icons always shown, rows 30px, a 200px scroll area (about six rows). 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.btn-primary, btn-danger, btn-success.--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.blk_color()).