agent-skills/skills/hallmark/references/themes/grid.md

Theme - Grid

Swiss neo-grotesque systems design: the object-poster and transit-signage school, executed on a near-white cool sheet with an exposed 12-column hairline grid, one heavy grotesk, and exactly one signal ink spent entirely on geometry. Giant lowercase Archivo slams to the left margin, the column rules stay visible behind the content, and every section carries a constructed object: a plate, a figure, a giant numeral, a mark from the kit. It reads like a wayfinding manual a poster designer got hold of: rational, gridded, and unafraid of one loud move per band.

The material, in one line: a visible column grid, one grotesk, one signal ink, and geometry doing the talking.

The editorial exception. The editorial cluster is otherwise serif-led (Newsprint, Editorial, Specimen). Grid is its Swiss neo-grotesque slot: no serif anywhere, structure carried by an exposed grid and hairlines, warmth carried by one signal ink. A brief wanting a roman serif or a soft column is a different editorial theme.

Axes (diversification)

• Paper band - light, cool near-white (--color-paper: oklch(99% 0.003 255), faintly cool, never #fff). Stepped at paper-2 97.2% and paper-3 94.5%. Ink is cool near-black --color-ink: oklch(16% 0.010 255).

• Display style - grotesk-heavy (Archivo 800, --display-weight: 800), run lowercase at --tracking-display: -0.045em. Heavy plus lowercase is the differentiator against every uppercase-condensed and serif option.

• Accent hue - the signal ink, exactly one per page, picked to the brief's temperature:

  • signal red oklch(55% 0.21 28) - the default; cultural, editorial, civic.
  • ultramarine oklch(45% 0.19 264) - technical, institutional, engineering.
  • signal yellow oklch(82% 0.17 95) - industrial, archive, logistics. Yellow is surface-only: it floods plates and fills marks, always carrying ink text or sitting beside ink; yellow type on paper never happens at any size.

  Two Grid pages built in the same run must not share the ink. --color-focus is the chosen ink (for yellow, focus is ink on a yellow fill).

Reference register

Vitra, Braun, the Vignelli canon, Museum fur Gestaltung, the Swiss International poster tradition and its object posters. The material to match: the institutional identity manual crossed with the exhibition poster - a modular grid drawn in public, one grotesk, one ink, geometry as the only image. When in doubt, ask whether this reads like a systems manual designed by a poster artist or like a marketing template, and keep the former. Never name any of these in the output.

Typography

Archivo only, one family across the whole page (400/500/600/700/800). Swiss discipline comes from weight, scale, and tracking, not from a second family. --font-serif and --font-mono resolve to unused fallbacks; do not load them.

• Display - Archivo 800, lowercase, clamp(52px, 10.5vw, 136px), letter-spacing: -0.045em, line-height: 0.9. Slammed to the left margin, edge-aligned to the grid.
• Body - Archivo 400, 16px, line-height: 1.5.
• Label voice - Archivo uppercase at 12px, weight 600, letter-spacing: 0.09em, --color-muted. It sets captions, table headers, meta rows, folios, units, and index numbering - the quiet caps counterpoint to the giant lowercase display. It never sits above a heading as a kicker.
• The numeral voice - Archivo 800 numerals at display scale and beyond (clamp(120px, 22vw, 320px)), used as objects: a section index numeral set beside or behind the head at 6-10% opacity ink or in the signal ink, cropped by the band edge (overflow: clip on the band, the numeral deliberately hanging past it). One per section at most; it is art, not a heading.

The marks kit

The signal ink and the ink itself are spent on a small vocabulary of constructed geometry. Every mark aligns to the column grid or to type metrics; nothing floats freehand.

• The period square - a solid 0.52em square where a full stop would fall.
• The bar - a 3px signal rule over a head, cut to a column width, never full-bleed.
• The register - a 1px ink circle with a crosshair through it (print registration), set in a margin column as a folio device.
• The quarter-disc - a solid quarter circle filling one grid cell corner, ink or signal.
• The stepped bars - 3-5 solid rectangles of stepped widths on the column tracks, a data-less bar chart used as texture beside a claim, or a data-ful one beside real numbers.
• The dot module - a cell filled with a dot lattice (radial-gradient repeated on an exact grid), ink at low weight, as ground texture inside one figure cell.
• The border arrow - arrows and chevrons drawn entirely from borders and rotated squares, signage style.
• The diagonal - one 45-degree rule crossing a band or a cell, 1px ink or 3px signal, snapped corner to corner on the column tracks.
• The cropped numeral - see the numeral voice above.

Per viewport, marks stay geometric and under 5% painted area; the plate is the one exception.

The plate

At most one per page, and every page should want one. A full-bleed horizontal band flooded solid - the signal ink, or near-black ink - carrying the page's poster moment: an oversized claim, a giant numeral, a figure built from the kit, a specimen line. Text on a red or ultramarine plate is paper; text on a yellow plate is ink; an ink plate may use both paper and the signal. The hairline rails continue across the plate at low opacity (--color-paper at 12-18% alpha) so the grid is never interrupted. The plate has zero radius, zero shadow, and butts flush against the rules above and below it. It is a poster inside a manual: one loud move, then back to the sheet.

Material

• The exposed 12-column hairline grid is the theme. A repeating-linear-gradient of 1px --color-rule lines every calc(100% / 12), painted behind the content, capped to the shell width. The grid is content, not scaffolding to delete, and content rides repeat(12, minmax(0,1fr)) on top of it.
• Every section carries an object. A section that is only prose has failed this theme. Each band sets at least one constructed thing: a plate, a figure cell, a cropped numeral, a specimen, a diagram, a matrix of ruled cells, stepped bars against real numbers. The object is built from the kit and the grid, never from an image, an emoji, or an icon font.
• Asymmetric occupancy. Running text never spans more than 6 of the 12 columns. The remaining columns carry the section's object or stay empty as designed whitespace - and the occupied side alternates or steps as the page descends, so consecutive sections never share the same silhouette.
• Air is structural. Desktop bands breathe at 120-160px vertical padding minimum; the hero holds most of the first viewport with type occupying less than half of it. Density belongs to tables and indexes; everything else is air and geometry.
• Hairlines and ink rules do all the structure; zero cards. --radius-card: 0, --shadow-card: none. Faint --color-rule hairlines split cells, a 1px-to-2px solid --color-ink rule tops a section, and content butts flush against it. No boxes, no float, no drop shadow.
• Cells, not tiles. Where the page needs repeated units, they are equal cells of the same grid divided by border-inline-start hairlines, sharing the band's top and bottom rules. The band reads as one ruled object, not as a row of separate objects.
• ::selection is the signal ink on paper (ink on yellow). The one place the accent floods text.

Shapes Grid suits (affinities, never requirements): a numbered index of full-width rows riding the 12 columns with a cropped numeral hanging in the margin; an object-poster plate between two quiet ruled bands; a type or system specimen where the grid is the exhibit; figures set in bordered cells with caps labels beneath; a stepped-bar figure beside three real numbers.

Motion

Restrained, geometric, grid-snapped. No scroll reveals, no parallax, no autoplay, no blur or fade choreography. What is allowed:

• Hover micro-states - a row background shifts to --color-paper-2 and its title slides 8px; links underline; a bordered surface shifts its border to the signal ink. ~0.18-0.2s ease.
• Hover geometry - a mark answers the pointer with a snapped transform: the quarter-disc rotates 90 degrees, a stepped bar extends one column track, a border arrow translates 8px along its axis. Same 0.18-0.2s, transforms land on grid increments, nothing springs or bounces.
• The ticker - optionally, one thin full-bleed band of label-voice text scrolling at a constant slow rate between two rules, wayfinding-sign style. One per page at most, pausable on hover.

Smooth scroll only, and prefers-reduced-motion: reduce kills transitions, the ticker, and scroll-behavior.

Do-nots (this theme's own failure modes)

• Never hide the grid. The rails stay visible, including across the plate. Deleting them because they look like scaffolding removes the theme.
• Never a prose-only section. Text plus nothing is the failure this revision exists to kill; every band builds an object from the kit.
• Never uppercase display, never a serif, never a mono body. Grid's display is lowercase Archivo; uppercase-condensed is Manifesto or Brutal, and the second family never arrives.
• Never two signal inks on one page. One ink, chosen once. A red page with a blue chart is a broken page.
• Never a dark page, and never a second plate. One flooded band is a poster moment; two is a striped template, and a full dark ground is Manifesto.
• Never a gradient, a wash, or a tint fill outside paper-2/paper-3. The ink is solid or absent.
• Never a card, a radius, or a drop shadow. Depth is hairlines, ink rules, and the plate.
• Never a centred hero. Slam left.
• Never freehand geometry. Every mark sits on a column track or a type metric; decoration that ignores the grid is another theme.

Voice range

Rational, plainspoken, institutional. Name the system, the place, the year concretely. No hype. Never: seamless, robust, cutting-edge, leverage, synergy, revolutionary, unlock, supercharge, elevate, curated, bespoke. Never "click here."

How Grid differs from its neighbours

vs	difference
Manifesto	Manifesto is a dark ground (oklch(10% 0.005 60)), Anton 400 uppercase at --lh-tight: 0.86, red #E51A1A. Grid is a light sheet (oklch(99% 0.003 255)), Archivo 800 lowercase; its one plate is a band inside a light page, never the page itself. Same "one ink, type carries it" DNA, opposite value and case.
Cobalt	Cobalt is modern-minimal: electric cobalt oklch(58% 0.20 256), Familjen Grotesk plus JetBrains Mono, graphite code surfaces, 6-10px radii. Grid is editorial: a chosen signal ink, single-family Archivo, an exposed 12-column grid, zero radius, no code. Even on ultramarine the difference holds: Grid's blue is a flat poster ink on a ruled sheet, not an interface accent on soft surfaces.
Brutal	Both are light near-neutral sheets with red available and zero radius, but Brutal draws with 3px black rules (--color-rule: oklch(12%)) boxing solid inverted blocks in Albert Sans 700 uppercase. Grid draws with 1px hairlines (--color-rule: oklch(88%)) painting a visible column grid, Archivo 800 lowercase, and at most one flooded plate. Marker vs pencil; shout vs quiet with one loud move.

When the brief routes here

identity · brand system · wayfinding · signage · design studio · type specimen · editorial grid · institution · museum · archive · index · directory · systems · modular · Swiss · grotesque · manual · programme · poster. Categories: design and branding studios, cultural institutions, publishers, specimens and catalogs, portfolio indexes, archives and logistics. Tone: rational, systematic, precise, institutional, disciplined, timeless, calm-authoritative.

Warm, consumer, image-led, or serif-editorial briefs route elsewhere. When the brief wants a visible grid, one grotesk, and one signal ink spent on geometry, it is Grid.

Build hint

<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap" rel="stylesheet" />

html, body { overflow-x: clip; }
body { background: var(--color-paper); color: var(--color-ink);
       font-family: var(--font-body); font-size: 16px; line-height: 1.5; }

/* THE ground: the exposed 12-column hairline grid, painted behind the content */
.rails {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  max-width: 1280px; margin-inline: auto;
  background-image: repeating-linear-gradient(to right,
    var(--color-rule) 0, var(--color-rule) 1px,
    transparent 1px, transparent calc(100% / 12));
}

h1, h2 { font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(52px, 10.5vw, 136px); letter-spacing: var(--tracking-display);
  line-height: 0.9; text-transform: lowercase; }

.period {                              /* the smallest mark in the kit */
  display: inline-block; width: 0.52em; height: 0.52em;
  background: var(--color-accent);
}

.plate {                               /* the one poster moment */
  background: var(--color-accent); color: var(--color-paper);
  position: relative; overflow: clip;
}
.plate::before {                       /* rails continue across the plate */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to right,
    color-mix(in oklab, var(--color-paper) 15%, transparent) 0,
    color-mix(in oklab, var(--color-paper) 15%, transparent) 1px,
    transparent 1px, transparent calc(100% / 12));
}

.numeral {                             /* the cropped section numeral */
  font-weight: 800; font-size: clamp(120px, 22vw, 320px);
  line-height: 0.8; letter-spacing: -0.05em;
  color: color-mix(in oklab, var(--color-ink) 8%, transparent);
  user-select: none;
}

::selection { background: var(--color-accent); color: var(--color-accent-ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation: none !important; }
}

Grid supplies the sheet, the rails, the one grotesk, the marks kit, and one plate. What rides those twelve columns is the brief's business, not the theme's.