Imagine Surfaces

Concept brief

Name & central idea

Honed. Refinement by removal. As with a matte-finished stone, the interface’s quality is visible in its flatness, accuracy and restraint.

Attributes

Exacting · Material · Calm · Accountable

Emotional character

The composure of a well-run showroom. Nothing rushed, nothing shouting, and confident enough to leave space for the stone.

Typography & color

Marcellus, an inscriptional serif, for brand moments only. IBM Plex Sans and Mono for every operational surface. Warm mineral neutrals throughout, with lapis for interaction, and bronze and verde as rare brand accents.

Layout, density & components

Carbon-style layers on a warm canvas. 40/32 px rows, 36/28 px controls, 2 px “eased” corners, and hairline separation instead of cards or shadows.

Why it fits

It continues the verified public identity (tracked serif capitals, ivory, olive, copper) while giving staff, suppliers and agents a tool built for long, accurate work.

Main tradeoff / risk

Restraint can tip into austerity. Inside the application, the brand is almost invisible, so customer-facing surfaces, photography and the wordmark have to carry the warmth. If slab photography is weak, the product will feel generic. Marcellus has one weight and no italic, so serif hierarchy comes from size alone. Overused, its Roman capitals drift toward the spa and law-firm look. Keep it to the wordmark and short headings, and never let it reach data.

Brand attributes

• Exacting

  Precision is the luxury. Prices are aligned to the cent and sizes stated to the inch.

  In the UI: tabular numerals, right-aligned figures, one unit system, and IDs in mono.

• Material

  The stone carries the color. The interface frames it the way a gallery wall does.

  In the UI: warm neutral surfaces, real slab photography, and material names spelled in full.

• Calm

  Nothing competes for attention unless a decision is needed.

  In the UI: color reserved for status and focus, one primary action per view, and no motion for its own sake.

• Accountable

  Every change has an author, human or agent, and an authority behind it.

  In the UI: identity on every action, a manager on every agent, and policies named where they apply.

Visual principles

1. 01

   Matte, not glossy

   No gradients, glass, metallic gold or marble backgrounds. Depth comes from tone steps and 1px hairlines. Shadows appear only on things that float: menus, drawers and dialogs.

2. 02

   The stone is the color

   The UI palette stays neutral so slab photography and material names are the richest things on screen. Where no photo exists, a small labeled tone chip may stand in.

3. 03

   True alignment

   Figures align on the decimal and labels on a shared left edge, with spacing on a 4px grid. Misalignment is treated as a defect, not a style choice.

4. 04

   Every action has an author

   People are round and agents are square-cut. Every attributed action names its actor, and every agent names the person who manages it.

5. 05

   Expressive at the edges

   Serif display type, verde and bronze appear on customer documents, the guide and the wordmark. Operational screens are typeset entirely in IBM Plex.

What is verified, and what is proposed

Typographic wordmark

Marcellus, all capitals, tracked +0.18em, never smaller than 15px. Keep clear space equal to the cap height on all sides. No logo project is in scope; this is a typesetting rule.

Imagery and material texture

Photography is the brand’s richest asset and the interface should not compete with it. No photographs are embedded in this specimen. The frames below are placeholders that describe each shot.

• Show true color. Never tint, filter or crop a slab photo to fit a layout.
• Pair every slab image with its slab ID, lot and dimensions.
• Never use stone texture as a page, card or button background, or behind text.
• No stock marble imagery, and no generated or synthetic stone presented as inventory.

Voice and tone

Appropriate and inappropriate use

Type scale

Sizes are in px at the default root (1rem = 16px), shown as size/line-height. Every line height falls on the 4px grid. Marcellus has a single weight, so brand headings step down by size only. Emphasis inside them is never bolded or slanted.

In context: navigation, controls and dense data

Numbers, units and identifiers

Brand and accent

Surface layers

The layer model is adapted from Carbon: each level up is a distinct tone, and borders and fields follow the layer they sit on. Raised elevation (shadow) is reserved for things that float above the page.

Text

Status

Each status has a foreground, a tint and a border, and is always shown with an icon shape and a word. Brand accents never appear in this set.

Foreground / background pairings, measured

These ratios are calculated in your browser from the live token values (WCAG 2.x relative luminance), so the table cannot drift from the stylesheet. Text needs 4.5:1 and UI boundaries need 3:1. Translucent tokens are composited over their background first.

Comfortable and compact density

Density changes row height and cell padding, never the type size of data below 13px. Comfortable is the default. Compact suits people who live in a single table all day, and the choice persists per user.

Responsive behavior

Desktop is the primary context. The application examples use container queries, so they adapt to their frame rather than the window. Resize the browser to watch the workspace in section 06 change.

Buttons

One primary (basalt) per view. Destructive actions use a quiet red outline, and become solid red only as the confirm action inside a dialog. Labels start with a verb.

Fields

Labels sit above the field and never disappear into placeholders. Units live inside the field as affixes. Number and currency inputs right-align their values.

Field states

Checkboxes, radio buttons and switches

These are native inputs, styled with CSS only. A switch acts immediately, so use it for settings with instant effect. Checkboxes are for selections that get submitted.

Tabs, navigation, breadcrumbs, pagination

Badges, run states, filter chips, alerts and notifications

Identity, ownership and assignment

Shape tells kind at a glance: people are round, agents are square with one cut corner, teams are outlined squares. A word confirms it, because shape alone isn’t enough. Agents always show who manages them.

Activity timeline

Each entry gives the actor, an observable verb, the record and the time. Agent entries also name the channel (API) and the authority they acted under. Entries never narrate an agent’s reasoning, only what it did, what it found, and what it needs.

Dialog and detail drawer

Loading, empty and error states

Form validation · live example

Errors appear on submit, not while typing, and are summarized at the top with links to each field. Fields re-validate as they’re corrected. Try submitting empty, then fix the errors.

Buttons labeled as illustrative (Receive shipment, Export, batch actions) show a notice instead of acting. Sorting, filtering, search, selection, density and the drawer run in this page only.

Authorship, execution and business status are three different things

Agent profile, permissions and policy

Scenario · reconciling an inbound container against PO-30418

It’s 9:14 AM on Oct 9. Intake Reconciler has done everything its permissions allow and handed one decision to Theo Brandt. You are Theo. Review the exception, or pause the agent.

Agent directory

The place to answer: which agents exist, who answers for each, what each may touch, and what each is doing right now.

1. 1 · Primitive

   --p-lapis-600

   #2B4C9B. A material name, no meaning.

2. 2 · Semantic

   --interactive · --focus

   A role. Swap the primitive here for a new theme.

3. 3 · Tailwind

   @theme inline { --color-lapis }

   Utilities: text-lapis, outline-focus

4. 4 · Component

   .chip[aria-pressed=true]

   State styling in CSS, driven by ARIA attributes.

/* 2 · semantic */
:root {
  --surface-canvas: var(--p-travertine-100);
  --surface-layer-1: var(--p-slab-white);
  --text-primary: var(--p-basalt-900);
  --interactive: var(--p-lapis-600);
  --status-warning-fg: var(--p-amber-800);
  --row-height-compact: 2rem;
}
/* 3 · Tailwind v4 */
@theme inline {
  --color-canvas: var(--surface-canvas);
  --color-layer-1: var(--surface-layer-1);
  --color-ink: var(--text-primary);
  --color-lapis: var(--interactive);
  --font-sans: var(--font-ui);
}
@theme static {
  --font-brand: "Marcellus", "Palatino Linotype", …, serif;
  --radius-eased: 2px;
}

<!-- Business status: icon + word -->
<span class="badge badge-warning"><svg…/>On hold</span>

<!-- Agent run state: never a tinted badge -->
<span class="runstate" data-state="waiting">
  <span class="glyph"></span>Waiting for approval</span>

<!-- Identity: kind is required; agents need a manager -->
<span class="avatar avatar-agent avatar-sm">IR</span>
<span>Intake Reconciler</span>
<span class="kind-tag kind-tag-agent">Agent</span>

<!-- Density is an attribute, not a class soup -->
<div data-density="compact"><table class="dt">…
  <td class="num">$5,479.92</td>  <!-- tabular, right -->
  <td class="id">L2051-04</td>     <!-- Plex Mono -->