# Robots Versus Humans: house style

> AI news, ranked by how far the machines got today.

This is the complete visual identity of Robots Versus Humans, 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, Humans Versus Robots,
at https://humansversusrobots.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://humansversusrobots.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 happen to be the same value, which is exactly why it is worth
keeping them apart: nothing here would look wrong if you collapsed them into one
accent, and the file that inherited that shortcut would be unreadable.

| Token | Value | What it is for |
| --- | --- | --- |
| `--brand-canvas` | `#101919` | The page itself. |
| `--brand-surface` | `#16201f` | A card lifted off it. |
| `--brand-ink` | `#eaf2f1` | Anything worth reading. |
| `--brand-muted` | `#85a09e` | Bylines, dates, counts. |
| `--brand-line` | `#22302e` | Every border and rule. |
| `--brand-glow` | `#00d1d1` | The accent, in words. Tuned to be read against the canvas. |
| `--brand-fill` | `#00d1d1` | The accent, in shapes. Whatever sits on top carries the contrast. |
| `--brand-on-fill` | `#101919` | What is legible on the fill. |
| `--brand-basement` | `#090e0e` | The floor of the page. |
| `--brand-field` | `rgb(0 0 0 / 0.3)` | 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 Mono**, at every size and in every heading.
There is no second face and no display cut.

- Regular, `400`
- 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.

The monospaced cut ships no medium weight, so this side has one weight fewer
than the paper side: regular and bold, and nothing between them.

## Shape

Nothing is rounded. Every radius is `0`, at every step of the scale. A machine
has no reason to soften a corner: the pixel grid, the terminal and the bounding
box all end at a right angle, and the mark is already a square.

There is no shadow either, and that is the statement rather than an omission.
Depth is a property of paper: light falls across a desk and a sheet resting on
it interrupts that light. A screen emits, and nothing on an emitting surface
has anywhere to throw a shadow to.

## Marks

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

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

## Files

- This document: https://robotsversushumans.com/branding.md
- The same values as custom properties: https://robotsversushumans.com/branding.css
- The page they are drawn on: https://robotsversushumans.com/branding
- What the site is and how it is ordered: https://robotsversushumans.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@robotsversushumans.com