Components
Icon
Every drawing of the app on one grid, in the colour of the text around it. Sized by token: in a line, in a table, in the sidebar, large.
Chevron
The one arrow. Inside a fold button it follows aria-expanded: open points down, folded points right. Back and forward are the same arrow turned.
Logo
The Mindi mark: ultramarine body, tangerine dot. It takes the look's two logo colours, so the Light and Dark switch above shows both.
Spinner
The turning mark for something that is busy. It stands still when the person asks for less motion.
KeyChip
A key name in a hint line or after a button. The key words come in from the screen.
Tooltip
A short tip on hover and on keyboard focus, closed with Esc. A disabled control stays focusable, so its tip can say why.
ColourDot
The colour of a product or material, one of the look's 24 palette colours (8 hues, 3 shades). No colour is an empty ring: automatic.
Stack
Children one under the other, a spacing token apart. Screens use it instead of writing their own spacing.
- Spelt flour
- Cane sugar
Inline
Children side by side, a token apart. It can wrap, align and spread, so a toolbar needs no CSS.
Grid
Children in equal columns, or as many columns as fit. The gap is a token.
VisuallyHidden
Words only a screen reader gets, such as the name of an icon-only button. Tab to the button to see the tip.
Button
One click acts. Primary acts, quiet is everyday, line sits in a toolbar, danger takes away, arm marks.
IconButton
A round button that is one icon: remove a row, open a menu, step a calendar. On or marked when the setup differs.
SplitButton
The usual start with a chevron beside it that opens the other starts (new order, new run, new batch).
TitleButton
A column title that folds its part. The word is the control; warn marks a part that needs a look.
ToggleWord
The word is the switch. On it reads as a link; off it is quiet with a tangerine strike.
AddRow
The quiet row at the foot of a list that adds one more. As a picker the field sits inside it: type to filter.
TextButton
Words in the link colour that act: add a line, reset a setup, show all, take a suggestion. Quieter than a Button; hover lays the quiet fill behind it.
TextLink
An ultramarine underlined link: opens a record (a client, a product) or goes to an address.
GuardLock
The lock of a guarded field. Shut: one round button. Open: save and lock, or cancel and lock. The shackle swings.
Chip
A small rounded label: a link between records, a state, a filter, an allergen. Hover or focus shows the remove x; it is always shown on touch.
StatePill
The stage of an order or a production. Always an icon and a word, never colour alone.
Status
What is wrong or what is next for one thing. Compact form shows an icon and opens its words on hover or focus; as a button it is the next step or a menu.
Badge
A small tangerine count on a button or a rail icon.
Ping
The tangerine ping: a dot that sends one soft pulse when it appears. Calm form stays still; reduced motion stops it.
MarkLine
A small orange-dot note, such as what is missing under the stock figure.
Note
One sentence under a group of fields. The locked form says what is shared and cannot be edited here.
The reorder point is derived from the weekly average.
Shared with the maker: change it on the maker page.
Figure
A big number with its unit. Dutch format, at most two decimals.
Gauge
How much of something there is: a thin bar, a bar of parts, a large bar with figures, or a ring. Parts grow in when first shown.
GaugeKey
The colour mark of one gauge part beside its name.
MinimumBar
The maker's total minimum: one segment per product with its figure inside, the open rest dashed, a tick at the minimum once it is passed.
StockLine
The product's stock line: a thin need bar and one figure that says its state.
KeyHints
A hint line: each key as a chip, then what it does.
TextInput
One line or a growing text of words. num is figures, title is a page title you can type in, ghost looks like text until touched, echo shows what another field says.
NumberInput
A quantity as typed: Dutch format, at most two decimals. It refuses in plain words once left, and never changes the figure itself.
CU are whole numbers.
Enter a number, for example 120.
Field
A label, its control, and under it the refusal or warning of that field only. Neither blocks the next field.
Enter a name.
Another product has this name.
FieldWithUnit
A control with its unit beside it, level.
Enter a number, for example 50.
FieldValueLine
A value that cannot be edited here, with a link, level with the inputs beside it.
FieldGroup
A quiet label over the fields that belong together, with a hairline above it.
Dimensions
FieldsGrid
Fields in a grid, in reading order, so Tab runs along each row. A wide field crosses every column.
FieldQuestion
An inline question under its field, its answers as buttons. Nothing happens until one is pressed.
Checkbox
A 20 box with its words. Checked it fills with the accent and the tick draws itself in.
TogglePill
An on/off choice as a pill (dietary). Warn marks a choice that needs a look.
DefinitionRow
Label left, value right, a hairline under it. The real field shows as text until the row is hovered or holds focus.
Enter a number, for example 12.
Shorter than the oldest lot.
StepSlider
A few steps on one track: drag the thumb, click the track, or use the keys (arrows step, Home and End jump).
FieldWithPicture
A big square Look button, twice a field high, beside a field. The thing's own icon invites a change.
DropTarget
A surface that takes a dropped image file: an ultramarine ring and a label while one is over it.
LedgerCell
A field with its unit beside it and one quiet line under it: the maker ledger's Minimum and Lead time.
UnlockRow
Opens under a locked batch: the reason, Keep and Unlock on one line. Unlock waits for a reason.
Declaration
The declaration reads as printed, allergens in bold. A click or Tab puts the raw text field in its place.
Rolled oats, almonds, milk powder, honey.
Rolled oats, almonds, milk powder, honey.
Ingredients, allergens in bold
SegmentedControl
A few choices side by side, one on. Arrow keys move and choose; the group is one Tab stop.
Tabs
A row of tabs in the segmented grammar; the open tab lifted. Arrows and Home/End move and open.
SearchField
One search box: a magnifier and the words. Esc clears it, Enter submits.
FilterSearch
One field for search and filter: filters sit in it as chips. Typing suggests values with counts; Enter or Tab makes a chip, Backspace takes the last off.
Menu
The one floating surface for lists of actions: rows with icon and end, a checkbox list, rows that say what they mean. Arrows move, Enter chooses, Esc closes.
ChooserPopover
Holds an opener and the surface that opens under it (a Menu, a Picker list, a Calendar). Esc and a press outside close it; it turns above the opener when there is no room below. Static here: the open surface sits in the page.
Picker
The shared combobox: type to filter, arrows move, Enter or Tab accepts, Esc closes. A New row adds what was typed.
Choose a product from the list
MaterialPicker
Pick a material for a bill: search, two tabs, a New material row, Recent and All, the keys named in the foot. Shift+Enter keeps it open.
SizeSwitch
Two sizes read as the segmented switch; three or more as one segment that opens a menu and shows the current size.
LookPicker
Give a thing its icon and colour: an icon grid and 24 swatches. Every pick applies at once; Automatic goes back.
DatePicker
A date field that is also a calendar: type 16, 16-12 or 19-10-2026, or pick a day. Arrows move the day, Enter picks, Esc closes.
The server cannot plan on this day
IndexPills
The index of a page's parts as one soft row of pills; the part in view is the lifted one. Left and Right move, Enter goes to the part.
DataTable
A table whose head and rows come from one column list. Click a head to sort (the arrow shows on the sorted column only), drag a head to move it, drag its edge to resize (double-click fits), pin, hide, choose a density. On a phone it keeps its own layout. Everything here is live: try the keys on a focused head.
Loading products
No products yet
Add the first one, or change the filter.
The products did not load
The server did not answer.
ColumnsMenu
Which columns show, which are pinned, how wide they are. Reset in the title line (dim while the setup is the default), the count and Show all in the foot. Arrows move between rows, Esc closes.
TableToolbar
Above a table: the Columns button with its count (link colour while some are hidden), the density slider, and Reset with a tangerine dot when the setup differs from the default. The status line sits under the table.
ListRow
One line of a table (row) or of a counted list (item): cells line up by the row's tracks. Clickable rows are one tab stop; Enter or Space opens. A material item can hold a share bar that shows on hover or focus.
LedgerRow and GridRow
A row of a ledger on a window or part. Flex: cells in a line. Grid: cells line up under a head row, each ledger naming its tracks. Two-line: what it is and one line under it, the action beside both.
CardGrid
The same data as the table, one card per item. Sizes xl l m s xs run 4 to 8 across; the cards glide to their new places when the size changes. Two columns on a phone.
No products match
Clear a filter to see more.
Card
One item of a CardGrid: a look tile with the kind and state laid on it, the name (two lines before it cuts), a quiet facts line, a foot. It lifts like the toolbar controls and opens on Enter or Space.
Tiles
A grid of photo tiles; an empty group is one dashed tile that adds. A thumbnail strip uses the small size.
EmptyState
The block in the middle of a table or part when there is nothing to show: empty, busy, or failed. One line on what to do next and one action.
No orders yet
Orders you enter show up here, newest first.
Loading orders
The orders did not load
Check the connection and try again.
No contacts
Loading
Did not load
AppFrame
The one-window page: rail, one full-width column and an optional window beside it. A record page's head lies on the ground and the white page starts under it; a list page is one white panel.
Products · 128 shown
Code: P-0412
Status: Active
Orders · 12 shown
Het Zoete Hoekje
O-2041Orders
Rail
The sidebar with big icons. Hover or focus opens it over the page; pinned it makes room. While a search has text it stays closed and the search bar floats over the page's edge.
Products · 128 shown
PanelHead
The top band of a list page: eyebrow and title at the left, controls at the right, a hairline under it.
Orders
Products · 128 shown
Products · 128 shown
SegmentCard
One group of a specification on a soft ground, no border. It lifts on hover and while it holds focus.
Shelf life
Unopened: 12 months
Shelf life
Unopened: 12 months
Shelf life
Allergens
Contains: Nuts, milk
Photos
Nothing added yet.
PartWindow
One part of a record on its own surface: a head row (title, count, the part's action) and a grid of cards. Widths: half, two thirds, one third, wide; PartStack puts cards under each other in one cell.
Specification4 groups
Shelf life
Unopened: 12 months
Storage
Keep: Cool and dry
Ingredients
Declaration: Hazelnuts 38%, sugar, cocoa
Packaging
Jar: 200 g
Weight
Net: 200 g
Dimensions
Height: 9,5 cm
Jar
Net: 200 g
Photos
Photos
Nothing added yet.
Section
A hairline group inside a window or card. Its head folds the rows; the chevron follows aria-expanded.
Hazelnut spread: 24 jars
Hazelnut spread: 24 jars
Hazelnut spread: 24 jars
Hazelnut spread: 24 jars
Contacts
Main: Sanne
No documents yet.
WindowHead
The head of a window, two lines: who or what and its code, then the summary and the state. A new thing's head wears its colour; the top line says what kind of thing it is.
Het Zoete Hoekje
O-2041Het Zoete Hoekje
O-2041Het Zoete Hoekje
O-2041Het Zoete Hoekje
O-2041New order
New order
New order
Deliver order
O-2041WindowFoot
Status and buttons only; shortcuts live in tooltips. Cancel sits beside Save.
SideWindow
A window beside the page column: head, scrolling body, foot, on its own white surface. Esc inside it closes it.
Het Zoete Hoekje
O-2041Het Zoete Hoekje
O-2041Het Zoete Hoekje
O-2041No order chosen
Dialog
A window in the middle of the page over a dim scrim. Esc and the scrim close it, focus stays inside and returns, Back steps back in a multi-step dialog.
New order
Deliver order
O-2041Toast
One pill: a round icon and the message. With Undo the green check becomes a red X on hover and focus, and a thin line drains over exactly 6 seconds; hover or focus pauses it.
Celebration
The success mark: a green circle with the logo's contour drawn in and the orange dot popping out. Over a window it adds a short firework; as a seal it stays.
Order delivered
Client: Het Zoete Hoekje
RecordTiles
A tile per part of a record. Drag a tile or press Alt+arrows to reorder; arrows, Home and End move focus. An open tile stays greyed in the grid and its card grows out of it below.
Shelf life
Unopened: 12 months
After opening: 6 weeks
Shelf life
Unopened: 12 months
After opening: 6 weeks
Shelf life
Unopened: 12 months
After opening: 6 weeks
Shelf life
Unopened: 12 months
After opening: 6 weeks
Shelf life
Unopened: 12 months
After opening: 6 weeks
Drag a tile, or focus one and press Alt with an arrow key.
Board
The full-width frame of the board: orders, stock and runs side by side; one column; or one column with a side window.
Orders
Stock
Runs
Orders (with a window)
Window
Runs (one column)
BoardColumn
One column of the board: a tinted head with its controls and a scrolling body. Blue orders, green stock, orange runs.
Orders
Stock
Runs
The runs could not be loaded. Try again.
Orders
No orders yet.
Stock
Nothing on hand.
Runs
No runs planned.
BoardGroup
One stage of a column: a fold head with the stage pill and a count, and under it the rows beside the stage's line.
StateLine
The line that runs up the rows of one stage, turns a round corner into the head line and curves into the last row line.
BoardCard
A batch of stock or a production run you can fill an order line from: its name, how much is used and free, and what you can do with it.
LotLine
One line of the middle column: a product or material, how it stands in words, and how much is free. With head, the column heads over the rows.
BatchRow
One batch of a product: its code, best-before day and free amount. With head, the column heads.
WeekStrip
The next weeks on one axis: a tangerine line for today, blue dots for orders, orange bars for runs. Items that touch get their own lane.
Calendar
Hover and focus
Late
Empty
Nothing planned in the next six weeks.
3 more later
RecordSheet
One head, one index, then every part in one continuous scroll: the page of a product, material or company. A part is a SheetPart; the facts can sit in a side rail.
Tomato soup
Composition6 ingredients
Tomatoes, onion, basil, cream, salt, rapeseed oil.
Storage
Keep at 2 to 7 degrees Celsius. Shelf life 21 days.
Tomato soup
Composition6 ingredients
Tomatoes, onion, basil, cream, salt, rapeseed oil.
Storage
Keep at 2 to 7 degrees Celsius. Shelf life 21 days.
Tomato soup
Composition6 ingredients
Tomatoes, onion, basil, cream, salt, rapeseed oil.
Storage
Keep at 2 to 7 degrees Celsius. Shelf life 21 days.
TargetStock
The reorder point (orange) and the target (blue) on one bar, each with a handle to drag or move with the arrow keys, and two boxes to type in. The scale is a round number of at least 1.5 x the target and only grows.
No reorder point is kept for this product.
The target must be above the reorder point.
CULevelChain
Levels of one hierarchy left to right: a picture of each, its editable count under it, the calculation on top. Packaging levels use it; materials pages can too.
12 CU x 40 cases = 480 CU
6 CU, 12 per case
ScaleDraw
Boxes drawn in true proportion on one scale; the sizes sit under each drawing. A box that would not fit stands apart, drawn smaller, with its note.
Drawn at 1/14 of this scale.
Enter the three sizes to see the box.
BarScale
A bar per row on one shared scale from 0 to the largest, values right-aligned. A row can be a part of the one above it, or hold a field with its refusal.
Enter a number, for example 50.
Nothing to compare yet.
Ruler
Rows on one shared scale: a label, a track of segments in three weights, the value in words, and an optional line under the track.
No runs yet.
RangeBand
One scale with ticks and a band per row from its low to its high number. One number is a thin tick; no number is an empty track.
No temperatures yet.
LineChart
A flowing line over n periods with its area, the dashed average, a tangerine dot on the latest period, and a crosshair with a tip per period. Left and right move between periods.
Nothing shipped in this period.
AllergenTile
One of the 14 allergens in one of four states. A click or Enter opens the menu of states; Esc closes it. A changed tile has a solid edge; a tile given by the bill of materials is locked.
AllergenLegend
The key under a grid of allergen tiles: one chip per state, with an optional word button after it. AllergenGrid lays the tiles out.
CompositionBar
The head of the composition editor: three totals and the share bar. LevelMark is the small drawn mark of a packaging level in a row.
1 ingredient has no share yet.
Add an ingredient to see its share.
MediaPic
A square picture or, without one, a quiet tile with an icon. The one picture tile that Gallery, ThumbnailStrip and CatalogPhoto are built on.
PhotoAddTile
The dashed tile that adds a photo: click, Enter, or drop an image on it. In three sizes.
Gallery
One card per media group: an even grid of square thumbnails with the name under each, or one dashed drop zone when the group is empty. Make main, Download and Remove show on hover and focus.
Packshots
Lifestyle
Packshots
ThumbnailStrip
Each group shows its photos at one small size and one dashed tile that adds.
CatalogPhoto
The photo as a large square in a card; without one, the dashed tile that adds, or the thing's own icon when it cannot be added to.
PalletMoment
A case beside its pallet, drawn from the three counts while you type; then the big figure and the number of cases. An empty Layers counts as 1 in the picture and is never stored.
ScalingRow
The material name on the first line, how it is treated on the second; Now, New and the unit beside both. A refusal sits under its row.
At most 3 decimals.
TagRow
Tags as chips in a wrapping row, each removable. PhotoGrid lays photos and the add tile in one cell size.
No tags yet.