Chain Labs

Chain Labs brand kit

Our logo, colors, type and design tokens, the rules for using them, and how we write. Each file has a fixed address that always serves the current version, so you can link to it directly.

Read this page as Markdown

Each part of the logo comes in two versions, one for light backgrounds and one for dark. The SVG files are outlined shapes, so they need no font.

Lockup

The symbol and the name together.

Symbol

The symbol on its own, for square spaces such as avatars and app icons.

Wordmark

The name on its own.

Using the logo

  • Use the files as they are. Don’t redraw the logo, retype the name in a font, recolor, stretch or rotate it, or add shadows or effects.

  • Match the file to the background: the files marked “on light” go on light backgrounds, and the files marked “on dark” go on dark ones.

  • Keep clear space around the logo of at least half the symbol’s height on every side. Use the lockup at 24px tall or larger, and the symbol at 16px or larger.

  • In text, the name is two words: Chain Labs.

Colors

The brand has three fixed colors. The design tokens, the named values our code reads, hold the full set, muted text and line colors included.

  • Ink

    Hex
    #0D0619
    RGB
    13 6 25
    Token
    --cl-color-ink

    Text on paper, and the dark bands of the page.

  • Paper

    Hex
    #E6E7E8
    RGB
    230 231 232
    Token
    --cl-color-paper

    The page ground, and text on ink.

  • Mint

    Hex
    #04FFA4
    RGB
    4 255 164
    Token
    --cl-color-mint

    The accent: the symbol, and buttons and links on ink.

Use mint as text on ink only, never on paper.

Type

One typeface, Epilogue, for everything. We set headings at weight 650 with tight letter spacing, and text at 400.

Headings

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

Text

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

Epilogue is by Etcetera Type Co. and free to use under the SIL Open Font License 1.1.

Design tokens

We generate the colors, type, spacing, corner radii, shadows and motion of chainlabs.in from one source file. Load the CSS for custom properties, or read the JSON in your own tools.

Each custom property in the CSS starts with --cl-, such as --cl-color-mint.

How we write

Chain Labs writes as “we”, in US English, for owners, technical or not.

Precise
We name the actual thing, choice or behavior.
Concise
We make one point per sentence and cut words that carry no weight.
To the point
We lead with the answer.
Active
We name who does what, with concrete verbs.
Candid
We say plainly what is uncertain, what went wrong and what is still open.