Orders
Follow customer commitments from drawing review to dispatch.
Explore ordersANGEL STONES / PAGE DESIGN
Every page should feel like the same product.
Type, spacing, density and structure working together—from a worklist to a detailed record.
Three complete compositions
Workbench
Start with the work that needs your attention.
Explore workbenchOrder detail
Heritage Memorial · Blue Silk granite tablet
Explore order detailTypography in context
Inter is used in these references. Products load their own font once; the package inherits it. Heading rank follows structure. Sizes below are rem-based equivalents at a 16px root.
page-title
32px · 600 weight · 1.2 line height · -0.02em tracking
Orders
page-subtitle
16px · 400 weight · 1.5 line height · 0 tracking
Customer and order context
section-title
18px · 600 weight · 1.4 line height · -0.01em tracking
Receiving details
card-title
16px · 600 weight · 1.5 line height · 0 tracking
Customer and order context
body
16px · 400 weight · 1.5 line height · 0 tracking
Customer and order context
label
14px · 500 weight · 1.5 line height · 0 tracking
Customer and order context
table
14px · 400 weight · 1.5 line height · 0 tracking
Customer and order context
help
14px · 400 weight · 1.5 line height · 0 tracking
Choose the location that will receive the stock.
caption
12px · 400 weight · 1.5 line height · 0 tracking
Updated September 21
metric
28px · 600 weight · 1.2 line height · -0.02em tracking
$12,480.00
identifier
14px · 600 weight · 1.5 line height · 0 tracking
SO-1042 · HM-8841
A repeatable page structure
Navigation · current location and peer workspaces
Header · identity, state, next action
Toolbar · search, filters, result count
Content · worklist, task groups or record sections
Context · totals, owner, related records
Keep 16–32px page gutters, 24px between major sections and 16–24px panel padding. Reading copy uses a maximum measure of 70ch; worklists can use the full workspace width. Tables retain comparison columns inside a labeled scrolling region on small screens.
Responsive and density rules
- Above 1024px: 208px workspace navigation, with record context beside the form.
- At 1024px and below: navigation becomes a wrapping row; context follows the record.
- At 640px and below: page titles reduce from 32px to 24px, panels use 16px padding, and actions wrap.
- Compact tables reduce cell padding from 14px to 8px. Text size and 44px interactive targets stay readable.
- Forms respond to their container. A narrow panel on a wide monitor still stacks fields.