Marshal Guidelines

64 pxMarshal

48 pxMarshal

36 pxMarshal

28 pxMarshal

22 pxMarshal

16 pxMarshal

The lockup is the mark plus the word, set in Geist SemiBold at 0.86× the mark height with a gap of 0.36× beside it. 16 pixels is the minimum; below that the word stops resolving and the mark goes on alone — which is exactly what the site’s navigation does.

Never stretch the mark. It is a circle.

Never put the mark on a plate. Its circle is the plate.

M

Never tint the mark with the accent.

Marshal

Never set the word in another face or weight.

The master is a 200 × 200 transparent PNG. That is enough for screen at every size the system uses, but a vector master is required before any print, embroidery or large-format application — see Exports.

Four surfaces, half a step apart. The page is a warm off-white rather than pure white so that cards can lift off it without a shadow. Depth comes from these four values and a 1px line — never from elevation.

Each ink was solved against the ground it is actually for: the first three against the darkest light surface they can land on, the last two against the ink field. Every figure is computed here rather than quoted, and every tier clears 4.5:1 — there is no ink in the system that cannot carry body copy.

Three decorative weights and one that is load-bearing. Control is the only line that bounds something interactive, which is why it is solved to 3:1 while the others are free to be nearly invisible.

The accent exists twice on purpose. Signal is the mark colour — status dots, the active rail, the aperture — and clears 3:1, which is all a mark needs. Signal text is the same hue darkened until it clears 4.5:1, and it is the only one of the two that may carry words.

A composition is almost entirely ground and card. Ink appears where something must be decided, and the accent gets roughly three percent — a dot, a rail, an aperture. If the accent is doing more than that, something else has stopped working.

Signal on Page grades AA-Large and no higher — enough for a mark, short of the 4.5:1 body text needs, which is exactly the line between the two accent tokens. The moment the accent has to carry a word, Signal text takes over. Every figure is computed from the palette at render time, so this table cannot fall out of step with the swatches above it.

Both are open source under the SIL Open Font License and bundled through next/font, so they are self-hosted and cost no external request. Nothing here needs a licence purchased before you can ship it.

The scale is hand-set, not derived from a ratio. Eleven steps, each with a job — if a new size is needed, the right move is usually to reuse one of these rather than add a twelfth. Headings carry −0.015em tracking; body sits at zero; the two mono styles open up.

Every control is a pill; every container is a rounded rectangle. That single distinction does most of the work of telling a reader what is clickable, which is why the radii below are worth protecting.

The navigation is a single floating pill: mark, three links, one action. It never grows a fourth link — anything else belongs in the footer.

Five measures, each tied to a reading job. The content column at 1120 is the one everything aligns to; the rest are narrower on purpose, because the limit on a line of text is the eye, not the container.

Fixed scope. Fixed finish dates.

A full-stack design and dev partner for funded startups.

Websites, web apps, and brand for startups where quality is non-negotiable.

Book intro callSend a message

Marshal

The whole system in one view: warm ground, one card, one ink field, one accent dot, and three type sizes. If a new screen needs more than this, the brief is probably wrong.

/* Marshal — design tokens
   Generated from the live system at marshal.studio. Tailwind v4 CSS-first:
   this block IS the config. There is no tailwind.config.js. */

@theme {
  /* surfaces */
  --color-page: #f1f1ef; /* Page */
  --color-card: #ffffff; /* Card */
  --color-raised: #fafaf9; /* Raised */
  --color-deep: #e7e7e3; /* Deep */

  /* ink */
  --color-primary: #0a0a0a; /* Primary */
  --color-secondary: #595956; /* Secondary */
…

{
  "name": "Marshal",
  "source": "marshal.studio",
  "color": {
    "surface": {
      "page": "#F1F1EF",
      "card": "#FFFFFF",
      "raised": "#FAFAF9",
      "deep": "#E7E7E3"
    },
    "ink": {
      "primary": "#0A0A0A",
      "secondary": "#595956",
      "tertiary": "#666663",
…

.type-hero {
  font-family: "Geist", sans-serif;
  font-size: 34px;
  line-height: 42px;
  letter-spacing: -0.8px;
  font-weight: 600;
}

.type-section {
  font-family: "Geist", sans-serif;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.3px;
  font-weight: 600;
…

These are generated from the same values this document displays, so a token file can never disagree with the swatch above it. Paste the CSS into globals.css and the whole system follows — Tailwind v4 is configured in CSS, so that block is the config.

Unusually for a brand handoff, there is nothing to license here. Both faces are open source and already self-hosted in the build, so a new developer can clone the repository and get identical type with no font purchase and no external request.

Marshal hands over everything: code, design files and every account. This document is the map to it, not a substitute for it.