# Versus: house style

> The day's AI news in one running order, with neither side put first.

This is the complete visual identity of Versus, 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.

This edition takes no side, and that is the whole of its identity. The two names
below each publish half a day: the stories are laid on one axis, cut at the median,
and each name keeps its own half. This one publishes the day before either cut, in
the order the scoring left it.

So nothing here is a compromise between their two palettes, and nothing here should
be described as a blend of them. Indigo is a third canvas rather than near-black
averaged with warm beige, which would be mud, in the same way the mark between the
square and the circle is a third colour rather than a mixture of the other two.

The two names it stands between, each with its own palette and its own copy of this
file at /branding.md:

- Robots Versus Humans, at https://robotsversushumans.com
- Humans Versus Robots, at https://humansversusrobots.com

Do not mix any of the three palettes.

## 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` | `#1b1a33` | The page itself. |
| `--brand-surface` | `#252445` | A card lifted off it. |
| `--brand-ink` | `#ecebf7` | Anything worth reading. |
| `--brand-muted` | `#9a97bd` | Bylines, dates, counts. |
| `--brand-line` | `#332f56` | Every border and rule. |
| `--brand-glow` | `#a5a1ff` | The accent, in words. Tuned to be read against the canvas. |
| `--brand-fill` | `#a5a1ff` | The accent, in shapes. Whatever sits on top carries the contrast. |
| `--brand-on-fill` | `#1b1a33` | What is legible on the fill. |
| `--brand-basement` | `#131226` | The floor of the page. |

### 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 Condensed**, at every size and in every heading.
There is no second face and no display cut.

- Regular, `400`

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 condensed cut ships one weight and nothing else. No medium, no bold, not
even an italic. Do not specify a bold on this edition: the stylesheet turns off
the browser's synthesised weight rather than let it smear the single face it
has, so a heading asked to be bold here is drawn at `400` like everything else.

That is the intent and not a gap waiting to be filled. This is the edition that
does not raise its voice, and the hierarchy is carried by size, colour and space
instead. The other two rank the day partly by weight; this one does not rank it
at all.

## Shape

The paper side's scale, halved at every step. The scale runs from
`0.125rem` at the smallest step to `0.5625rem` on a news card.

Not a corner met halfway between the other two, although the numbers happen to
land there: the machine side is nine zeroes, so half of one scale and the
midpoint of both are the same value by coincidence. It is a corner that is
neither the right angle nor the curve, which is what a reader who has seen
both of those reads it as.

There is depth, but it is a lit edge rather than a cast shadow: one inset
hairline along the top of a surface, as if the light were in front of the page
rather than above it. A dark canvas has nowhere to throw a shadow to, and a
dark blur under a dark block is only a slightly darker block.

```css
box-shadow: inset 0 1px 0 color-mix(in oklab, #ffffff 7%, transparent);
```

## Marks

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

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

## Files

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