Production interface reference

The system Mortar ships

Inspect the tokens, themes and server-rendered components used by the live product. Every specimen below is real markup, not a picture or a parallel demo implementation.

One source, end to end

This route loads the production token, base, component and console stylesheets. Changing the shipped system changes this reference on the next build.

Colour roles and ramps

Primitive ramps feed semantic roles; components consume those roles. The same names resolve for light, dark and system themes.

Page background--ts-background
Raised surface--ts-surface
Primary text--ts-text-1
Primary action--ts-primary
Success--ts-success-solid
Warning--ts-warning
Danger--ts-danger
Information--ts-info
Neutral · 12 steps
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
Primary · 12 steps
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
Success · 12 steps
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
Warning · 12 steps
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
Danger · 12 steps
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
Information · 12 steps
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12

Typography

Archivo carries interface and display work from 12 to 66 pixels. Compact body text stays readable through line-height, weight and a 65-character measure.

6xl

Inference without the infrastructure tax

5xl

Route each request with evidence

4xl

Route each request with evidence

3xl

Route each request with evidence

2xl

Route each request with evidence

xl

One API, managed cloud or your cloud.

lg

One API, managed cloud or your cloud.

base

One API, managed cloud or your cloud.

sm

One API, managed cloud or your cloud.

xs

Updated moments ago

Weights

400 · Regular for sustained reading

500 · Medium for controls

600 · Semibold for hierarchy

700 · Bold for emphasis

Reading measure

A useful measure is a performance feature for reading: the eye finds the next line quickly, comparisons stay close, and dense operational detail remains calm instead of turning into a wall of text.

Spacing, radius, elevation and focus

A four-pixel spacing base, restrained corners, navy-tinted depth and one visible keyboard-focus contract establish the product’s rhythm.

Spacing

1234681216

Radius

smbasemdlgxl2xlfull

Elevation

xssmmdlgxl

Keyboard focus

The ring uses the shared focus colour, width and offset. Tab to the link to inspect the browser’s real focus-visible state.

Focus the component grid

Light and dark, side by side

Nested theme examples resolve the same semantic custom properties as a whole page. There is no second palette.

Light theme

Surfaces, text, controls and status colours change together through color-scheme.

Healthy

Dark theme

Surfaces, text, controls and status colours change together through color-scheme.

Healthy

Operational diagrams

Data-dense product diagrams use real units, explicit states and visible failure paths instead of decorative illustration.

Prefix-cache token span4,000 input tokens

72% cache hit −$0.078 / 1k

Routing waterfallrequest req_7f3a
  1. 0 msPrimary · support-assistant-03Timed out before first token
  2. 320 msFallback · support-assistant-01Circuit open; retry on healthy replica
  3. 451 msFirst tokenL4 · eu-central · streaming
Cost before and afterper million requests
Before$184
After$118

−35.9% measured input-cost delta

GPU node healtheu-central · Qwen 7B
  • fra-01HealthyL4 · 62%
  • fra-02HealthyL4 · 71%
  • fra-03DrainingL4 · 14%
  • fra-04ReplacingECC error · traffic moved

Server-rendered components

These are the canonical light-DOM patterns Go templates emit. Native controls and content work before upgrade; JavaScript adds wiring, keyboard models and live behaviour.

mortar-button

Actions, links, variants, disabled, loading, hover and keyboard focus.

Variants
Read the docs
Disabled and loading
Live hover and focus

mortar-icon-button

Compact native buttons with an explicit accessible name.

Inputs, textarea and select

Labels, hints, invalid messages, disabled controls and counters stay in server markup.

Shown in audit logs.

Enter a valid address.

Up to 120 characters.

Select a model.

Checkbox and radio

Native grouped choices in default, boxed, selected and disabled states.

Deployment

mortar-switch

A native checkbox with switch semantics, including on, off and disabled.

mortar-card

Flat, raised, overlay and interactive containers.

Flat

One container, one level of hierarchy.

Raised

One container, one level of hierarchy.

Overlay

One container, one level of hierarchy.

 Open deploymentLive hover and focus

mortar-badge

Neutral and semantic status labels, dots and removable chips.

Default Healthy Warning Failed production

mortar-alert

Informational, success, warning, danger and dismissible messages.

New region available.

Frankfurt is accepting hosted deployments.

 Key rotated.

The previous key remains valid for 24 hours.

 Approaching quota.

You have used 92% of this month’s tokens.

 Upstream timeout.

Three requests failed in the last minute.

Avatar and avatar group

Initial fallbacks, sizes, presence and grouped people.

Spinner, progress and skeleton

Named busy indicators, determinate and indeterminate progress, and layout-preserving placeholders.

mortar-empty-state

An empty result that explains what happened and offers a next action.

No API keys yet

Create a key to start sending inference requests.

Create key

mortar-table

Sortable and hoverable data, horizontal overflow and an empty result.

Requests in the last hour
NameRequestsStatusRegion
production4,812Healthyeu-central-1
staging723Idleus-east-1
NameStatus

No deployments match

Clear the filter or choose another region.

mortar-code-block

Copyable source and a keyboard-reachable overflow region.

curl https://api.mortarinference.si/v1/chat/completions \
  -H "Authorization: Bearer $MORTAR_API_KEY" \
  -d '{"model":"Qwen/Qwen2.5-7B-Instruct","stream":true}'
 
const intentionallyLongLine = "mortar-code-block keeps this server-rendered source readable and makes its overflow region keyboard reachable";

mortar-tabs

A no-script table of contents upgraded to an accessible tab model.

4,812 requests today across three models.

60 requests per minute and two million tokens per day.

This plan is not available.

mortar-tooltip

Focus and hover disclosure attached to native triggers.

Requests per minute, per key. Requests per minute, per key.

mortar-dialog

A native modal with a real fallback link and focus restoration.

Revoke key

Without JavaScript, the link lands here and keeps the action understandable.

Revoke this key?

Requests using it will start failing within 30 seconds. This cannot be undone.

Toast and toaster

Server-rendered flash messages across semantic tones and dismissal policies.

API key created. A new region is available. You are near your monthly quota. The upstream deployment timed out.

mortar-chat

The production conversation, transcript, receipt and no-script composer.

  1. How do I improve prefix-cache reuse?

  2. Qwen 2.5 7B Instruct

    Keep the system prompt, tools and stable context byte-identical at the start of each request. Put changing user content last.

    1,204 in312 outSample pricing