The marketing blocks of the public site: section head, features, steps, segments, comparison, pricing, FAQ and the closing call to action.
Public pages are drawn with the same tokens as the admin — just with larger spacing and a three-column grid. Typography and the line carry a section; gradients and illustrations do not belong in the blocks. The blocks are kit primitives, imported from @/ingot and follow four rules:
A two-column head: the label and heading on the left, the lede on the right. Only the label carries the accent. Below it a trio of features — an 18 px icon in an accent frame, a title and small text. The trio sits in one rounded frame with the panels split by a hairline rather than a gap: three parts of one whole, not three small cards.
How it works
The same tokens as the admin, just larger spacing. Typography and the line carry the section — no gradients, no illustrations.
An inquiry starts with a file, not a twenty-field form.
Operations and times are computed from the part geometry.
The price comes from your rates, not a phone estimate.
Cards with an ordinal number and an arrow towards the next step; the last card has no arrow. The number is a small accent pill, not a large numeral — the step's title carries the most weight in the card. The number is derived from the order, so it cannot skip. The three-column grid is the default; four columns belong to process steps only.
DXF, STEP or PDF — the platform handles the format.
Operations, times and material on one screen.
The customer gets a price, you get a record in history.
"Who is it for" cards with tags. A tag is a square lowercase mono label — a technical fact about a shop, not the status of an entity. Tags stay neutral; the section's accent belongs to its head.
Dozens of inquiries a week, each one different.
Prices stand on machine times, not on a guess.
Fast feedback on the manufacturability of a part.
A row table of task / today / with the platform. The row is the unit that matters: it pairs one task with both states, so it cannot be written apart. The header sits on the muted surface, the third column is highlighted and is the section's only accented element. On a narrow screen the table scrolls sideways — a grid that stacks no longer compares anything.
Three plan cards, the middle one highlighted with an outline and a shadow; the badge sits in the card header next to the plan name. The price is set in mono, every card carries an action and all of them rest on one foot line. The block cannot render anything it does not receive through plans — names, prices and feature lists are the platform's plan data, no amounts in code. That is why the example prices are X-ed out on purpose.
X XXX Kčper month
For your first inquiries.
X XXX Kčper month
For a shop with a sales desk.
X XXX Kčper month
For production across multiple sites.
The question is a control that announces its expanded state, the answer a named region — all keyboard-operable. The answer is a required field: an item without one cannot be written.
A dark block with two large actions; the primary one is accented so the eye has somewhere to land on the dark surface. It is drawn with the neutral tokens swapped, so it inverts itself in the dark theme. A page may hold at most two dark blocks — this call to action and the footer.
Signing up takes a minute and the trial costs nothing.