# Using the Rubric brand

The Rubric logo is made up of 5 squares on a 3x3 grid: 101/110/100 (rows top to bottom, 1 = filled). It is a rare winner of Conway’s Game of Life.

## Principles

- Start with Ink (#000000) and Paper (#FFFFFF). Reserve Live (#10B981) for open slots, booking, and open roles. Use Sky (#38BDF8) for the Lab, data, and accents.
- Much of our design language emerges from the square: the logo (five cells on a 3x3 grid), labels, Live status for open slots (booking and roles), client results drawn abstractly on a grid in client colours, and the Lab's Game of Life. Keep cell edges square, even inside rounded cards.
- One idea per section: a label, a short heading, and evidence. Use space to separate sections.
- Write specific claims. Name what was built or measured.

## Downloads

[All assets, ZIP](https://rubriclabs.com/brand/rubric-assets.zip) (~445 KB). Sizes are approximate, before HTTP compression.

| Asset | Mark colour | Files |
| --- | --- | --- |
| Logo | black | [SVG](https://rubriclabs.com/brand/logo-black.svg) (~0.2 KB) · [PNG](https://rubriclabs.com/brand/logo-black.png) (~0.7 KB) |
| Logo | white | [SVG](https://rubriclabs.com/brand/logo-white.svg) (~0.2 KB) · [PNG](https://rubriclabs.com/brand/logo-white.png) (~5.2 KB) |
| Wordmark | black | [SVG](https://rubriclabs.com/brand/wordmark-black.svg) (~6.7 KB) · [PNG](https://rubriclabs.com/brand/wordmark-black.png) (~175 KB) |
| Wordmark | white | [SVG](https://rubriclabs.com/brand/wordmark-white.svg) (~6.7 KB) · [PNG](https://rubriclabs.com/brand/wordmark-white.png) (~176 KB) |

Prefer SVG. When downloading raster assets (PNG), prefer the 1000 × 1000 logo or the 6240 × 1800 wordmark to keep edges sharp. These downloads include padding and a background: white for black marks, black for white marks. Use the templates below for transparent, tightly cropped versions.

Brand assets are free to use and adapt. Matter requires a separate licence. [Figma source](https://www.figma.com/file/tRoDcoEfD0hSfhvKs4lzZR/Rubric-Branding-(TEMP-Copy)?type=design&node-id=46%3A79&mode=design&t=fdSx4pbKSYB66sgb-1).

## Logo

Keep the proportions, orientation, and square corners. Leave one cell of clear space around the ink: a 48px mark needs 16px on each side. The downloads include that padding; this SVG does not.

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 3"
  width="48" height="48" fill="currentColor" shape-rendering="crispEdges"
  role="img" aria-label="Rubric Labs">
  <rect x="0" y="0" width="1" height="1" />
  <rect x="2" y="0" width="1" height="1" />
  <rect x="0" y="1" width="1" height="1" />
  <rect x="1" y="1" width="1" height="1" />
  <rect x="0" y="2" width="1" height="1" />
</svg>
```

## Theme

Current website tokens:

| CSS variable | Light | Dark |
| --- | --- | --- |
| --background | #f7f7f8 | black |
| --surface | #ffffff | #111113 |
| --primary | black | white |
| --secondary | #666 | #999 |
| --rule | #0000002e | #ffffff1e |
| --live | #047857 | #10b981 |
| --sky | #0284c7 | #38bdf8 |

Use primary/secondary for text, background for the page, surface for cards, and rule for 1px separators. Live and Sky text use darker shades on light surfaces; the live status square stays #10B981. Do not fade body text with opacity.

## Typography

Matter Regular for headings and prose. Licence it from Displaay or use system-ui, sans-serif. It is not in the asset bundle.

[Departure Mono, OTF](https://rubriclabs.com/brand/fonts/DepartureMono-Regular.otf) (~84 KB) is free. Use it for labels and metadata, not paragraphs. It has an 11px pixel grid; use multiples of 11px for larger display type.

| Role | Size | Line-height | Tracking |
| --- | --- | --- | --- |
| Brand-page hero | clamp(3rem, 7vw, 6rem) | 0.95 | -0.05em |
| Section heading | 2.25rem; 3.5rem from 640px | 1.02 | -0.035em |
| Intro | 1.125rem; 1.25rem from 640px | 1.625 | Normal |
| Body | 1rem | 1.5–1.625 | Normal |
| Pixel label | 11px | 1 | 0.04em |

Section labels start with a 5px square and an 8px gap. Inline metadata omits the square. Live status uses a 7px green square with sentence-case Matter text. For changing numbers in Matter, apply tabular figures only to digits; its tabular punctuation and spaces are wider too.

## Spacing

Website defaults, not fixed dimensions for every medium:

| Element | Default |
| --- | --- |
| Container | Centred, max-width 72rem including gutters |
| Horizontal gutters | 20px; 32px from 640px |
| Section padding, top/bottom | 80px; 128px from 640px |
| Label → heading → intro | 20px between each |
| Heading group → content | 48px |
| Card padding | 24px; 32px on larger screens |
| Card gaps | 24px or 32px |
| Prose width | 32–36rem |

Align labels, headings, and content to the same container. Stack columns on phones. The cell defines artwork geometry; page spacing need not follow a three-column grid.

## Wordmark

Use the supplied paths for the symbol and “Rubric Labs”, including the square dot on the i. Do not typeset a replacement.

[Full wordmark SVG](https://rubriclabs.com/brand/wordmark-black.svg) (~6.7 KB). For this transparent React template, copy only its path's d attribute, not the background rect:

```jsx
function RubricWordmark(props) {
  return (
    <svg viewBox="302 300 2516.54 302.8"
      role="img" aria-label="Rubric Labs" fill="currentColor" {...props}>
      <path d="PASTE_PATH_DATA" />
    </svg>
  )
}
```

The cropped viewBox is 2516.54 × 302.8 units. The R is 298 units tall, and the symbol is the same 298 units square, so their tops and bottoms line up. Leave one logo's width around a standalone wordmark.

| To match | Set the full SVG's size to |
| --- | --- |
| Cap height H | height = H × 302.8 / 298 |
| Symbol width W | width = W × 2516.54 / 298 |

## Footer credit

For “Made by”, match the R to the text's cap height and align baselines. Use a 0.25em internal gap; inset the whole credit from the footer edges by one symbol's width.

```jsx
// Uses RubricWordmark from the template above.
export function Footer() {
  const symbol = '1cap'
  return (
    <footer style={{ display: 'flex', alignItems: 'baseline', gap: '0.25em',
      paddingLeft: symbol, paddingBottom: symbol }}>
      <span style={{ textBox: 'trim-both cap alphabetic' }}>Made by</span>
      <RubricWordmark style={{ display: 'block',
        height: 'calc(1cap * 302.8 / 298)', width: 'auto' }} />
    </footer>
  )
}
```

## Partner lockups

Match the height of the counterparty's first letter to Rubric's R, not the counterparty's logo to the Rubric symbol. Trim SVG padding first, then adjust by eye. Leave a 16px gap on each side of the ×.

## Art and motion

Client artwork uses square cells in the client's colours. Keep those colours local to the art.

The Lab uses Sky (#38BDF8) cells on #06070A. Its Conway's Game of Life field is seeded with the mark; the brand-page example uses 8px cells and a 220ms tick.

Animate cells assembling or changing state. Under prefers-reduced-motion, show the resting mark, a still field, and a non-pulsing status square.

## Share images

- 1200 × 630, Ink (#000000) background. Margins: 56px top/bottom, 96px sides, allowing for Slack and X crops.
- White wordmark and pixel-mono label on the top row. Matter title and one sentence below.
- Page-specific art in a rounded window on the right.
- Live (#10B981) only for open status.

## About

Rubric Labs is a small team of founder-level engineers with its own research lab. We join client teams and build through production. We publish research on the blog and in The Grid.

- Name: Rubric Labs
- Website: https://rubriclabs.com
- Email: hello@rubriclabs.com

## New additions

For each new component, document its purpose, dimensions, colour role, and one example. Add responsive, theme, and reduced-motion behaviour where relevant. Keep shared values in the brand source modules; add new topics as sections.