Basics
Layout and space
A 4px grid, a 1200px container and a reading measure. In a monochrome system, space is doing the work that colour would otherwise do — so it has to be deliberate.
The 4px grid
Every gap, padding and offset in the system is a multiple of 4px. That is what makes components line up when they meet for the first time on a screen nobody designed together.
| Token | Value | Typical use |
|---|---|---|
--tmt-space-1 | 4px | Icon-to-label gaps, badge internals |
--tmt-space-2 | 8px | Label to field, buttons in a row |
--tmt-space-3 | 12px | Table cell padding, tight clusters |
--tmt-space-4 | 16px | The default. Paragraph spacing, component padding |
--tmt-space-5 | 24px | Card padding, gaps between fields |
--tmt-space-6 | 32px | Between subsections |
--tmt-space-7 | 48px | Between major sections |
--tmt-space-8 | 64px | Page top and bottom padding |
--tmt-space-9 | 96px | Hero and landing-page rhythm |
Two habits keep the grid intact. Space belongs to the parent — set gaps
with gap on a flex or grid container rather than margins on
children, so a component never carries spacing that only suits one context. And
space goes above — when a margin is unavoidable, put it on
margin-block-start, so removing the last item never leaves a
trailing gap.
Container and measure
Two width limits do most of the work.
--tmt-container— 1200px. The outer bound for page content..tmt-containerapplies it, centres it, and adds 16px of side padding that grows to 32px above 768px.--tmt-measure— 68 characters. The maximum width for a paragraph. Applied by.tmt-prose. Long lines are the most common readability failure in an otherwise clean layout.
A full-width dashboard can ignore the container; running text never ignores the measure.
Layout primitives
Three small utilities cover most arrangements, so screens do not accumulate one-off flexbox rules.
<!-- Wrapping row, 12px gaps -->
<div class="tmt-cluster">…</div>
<!-- Vertical stack, override the gap with a token -->
<div class="tmt-stack" style="--tmt-stack-gap: var(--tmt-space-2)">…</div>
<!-- Columns that fit themselves; min 18rem each -->
<div class="tmt-grid">…</div>.tmt-grid uses
auto-fit with a minimum column width, so it reflows from
four columns to one without a single media query. Reach for a breakpoint only when the
arrangement itself has to change, not when things merely need to get narrower.
Breakpoints
Breakpoints are expressed in rem so they scale with the
user's font size — a person who has set a larger default gets the simpler layout sooner,
which is usually what they want.
| Name | Min width | What changes |
|---|---|---|
| Small | default | Single column. Tables scroll horizontally. Navigation collapses. |
| Medium | 48rem / 768px | Container padding grows to 32px. Two-column forms become possible. |
| Large | 60rem / 960px | Persistent sidebar navigation instead of a disclosure. |
| Wide | 74rem / 1184px | Secondary rails — a table of contents, a detail panel. |
Design at 360px first. It is the width at which decisions are forced, and everything wider is then a matter of using the extra room rather than rescuing a layout.
Corner radius
The brand is geometric and rounded, and the radius scale follows the brand book's own interface example: controls are pills, surfaces are softly rounded.
| Token | Value | Applies to |
|---|---|---|
--tmt-radius-sm | 4px | Inline code, small tags |
--tmt-radius-md | 8px | Inputs, alerts, small panels |
--tmt-radius-lg | 12px | Cards, tables — --tmt-radius-surface |
--tmt-radius-xl | 20px | Hero panels, large feature blocks |
--tmt-radius-pill | 999px | Buttons, badges, switches — --tmt-radius-control |
Inputs are the deliberate exception to the pill rule. A fully rounded text field reads as a button and hides where the text will start, so they use the 8px radius instead.
Elevation
Without colour, a shadow is a strong signal — so the system uses very few. Three levels exist and most screens should use none of them: a 1px border separates surfaces perfectly well, and flat layouts suit the brand better.
--tmt-shadow-sm— hover on an interactive card.--tmt-shadow-md— a raised card, a dropdown.--tmt-shadow-lg— something floating over the page: a modal, a mobile drawer.
Shadows are near-black at low alpha, tinted with the brand's black rather than pure grey, so they sit correctly on white.
Motion
Motion confirms that something happened. It should never be the reason a screen feels slow.
--tmt-duration-fast— 120ms. Hover, focus, colour changes.--tmt-duration-base— 200ms. Toggles, small reveals.--tmt-duration-slow— 320ms. Drawers and panels entering.--tmt-ease—cubic-bezier(0.2, 0, 0.2, 1). Quick to start, settles gently.
The stylesheet honours prefers-reduced-motion globally: when
it is set, every transition and animation is reduced to effectively nothing. You do not
need to handle it per component, and you must not re-enable motion over the top of it.
Density
Two densities, and the choice is about the task rather than about taste.
- Comfortable is the default — 44px controls, 24px card padding. Everything a customer touches uses it.
- Compact is opt-in, via modifiers such as
.tmt-btn--smand.tmt-table--compact. It suits internal tools where an operator scans many rows at once.
Compact reduces padding, never the touch target below 44px and never the font below 12px. A dense table is fine; a table whose row actions cannot be hit with a thumb is not.