# Humans Versus Robots: house style

> AI news from the human side: the mistakes, the backlash, and where people still matter.

This is the complete visual identity of Humans Versus Robots, generated from the
stylesheet the site is painted with rather than written out by hand. The values
below are current as of the moment this file was fetched.

One name, one palette. There is a second edition of this site, Robots Versus Humans,
at https://robotsversushumans.com. It answers the same instructions with different
numbers, because a colour is only ever tuned to the paper it is printed on: the
cyan one side is built around falls to 1.4:1 on warm beige. Do not mix the two
palettes. Its own copy of this file is at https://robotsversushumans.com/branding.md.

There is also a third edition, at https://mix.robotsversushumans.com, which runs the same
stories with neither tilt applied. It is not a third side and has no argument of
its own, so it borrows nothing from this palette: it is painted in indigo and set
in the condensed cut of the same family.

## Colour

The accent is two tokens rather than one, and that is the single thing most
likely to be got wrong. `glow` is the accent tuned to be read against the canvas,
so it is what a word or a hairline is drawn in. `fill` is the brand's own value,
for shapes with something legible on top of them, with `on-fill` as that mark.
On this canvas they are two different values, and this is the paper the pair was
built for: an accent legible against beige is not an accent you can read black on.

| Token | Value | What it is for |
| --- | --- | --- |
| `--brand-canvas` | `#f3e9dd` | The page itself. |
| `--brand-surface` | `#fbf5ee` | A card lifted off it. |
| `--brand-ink` | `#1c1917` | Anything worth reading. |
| `--brand-muted` | `#78716c` | Bylines, dates, counts. |
| `--brand-line` | `#e0d3c1` | Every border and rule. |
| `--brand-glow` | `#d97706` | The accent, in words. Tuned to be read against the canvas. |
| `--brand-fill` | `#fbbf24` | The accent, in shapes. Whatever sits on top carries the contrast. |
| `--brand-on-fill` | `#1c1917` | What is legible on the fill. |
| `--brand-basement` | `#fefcf9` | The floor of the page. |
| `--brand-field` | `#ffffff` | Inside anything you can type into. White on paper, a wash of black on a screen. |

### The identity

Three values that are not tuned to anything. They are the marks themselves and
they read the same on every host, lit or not, on screen or on a shirt.

| Token | Value | What it is for |
| --- | --- | --- |
| `--color-robots` | `#00d1d1` | The square, the same value on every host. |
| `--color-humans` | `#fbbf24` | The circle, the same value on every host. |
| `--color-vs` | `#cf348e` | The shape between the two, and the one colour on the site that belongs to neither name. |

## Type

Everything is set in **Ubuntu**, at every size and in every heading.
There is no second face and no display cut.

- Regular, `400`
- Medium, `500`
- Bold, `700`

All three editions are set in cuts of one family, which is what keeps three
papers looking related rather than like three unrelated websites. The machine
side takes the monospaced cut, the paper side the proportional one, and the
edition that is neither takes the condensed one, because it may borrow the
handwriting of neither name.

This is the only one of the three with all three weights. The monospaced cut has
no medium and the condensed cut has nothing but regular.

## Shape

Everything is rounded, a good step past the framework's defaults, because
nothing this name is called after has a hard edge. The scale runs from
`0.25rem` at the smallest step to `1.125rem` on a news card.

One shadow, and only on this side, in two layers: the tight one seats the card
on the page and the wide one is the ambient falloff around it. Faint enough
that the answer to "is there a shadow there" is supposed to be "I suppose there
is". Beige has very little room between a cast shadow and a smudge.

```css
box-shadow: 0 1px 2px -1px color-mix(in oklab, #b8a184 34%, transparent), 0 4px 10px -6px color-mix(in oklab, #b8a184 28%, transparent);
```

## Marks

The mark is a circle, in this name's colour, on its own plate.

- SVG, the one to redraw from: https://humansversusrobots.com/icons/humans.svg
- PNG at 512, for anything that will not read a path: https://humansversusrobots.com/icons/humans-512.png

## Files

- This document: https://humansversusrobots.com/branding.md
- The same values as custom properties: https://humansversusrobots.com/branding.css
- The page they are drawn on: https://humansversusrobots.com/branding
- What the site is and how it is ordered: https://humansversusrobots.com/llms.txt

## Use

The palette and the marks are this site's own and may be used to refer to it:
a link, a mention, a tool built against it. They are not a licence to present
something else as this site. None of the reporting the site carries is ours,
and none of it is covered by anything here.

Contact: tips@humansversusrobots.com