@apollo/brand

@apollo/brand

This repo contains a basic set of tokens that represent Apollo's brand colors and typographic styles. It also exposes our logotype and symbol logos as SVGs.

Installation

yarn add @apollo/brand

Usage

Import colors and/or typography from the @apollo/brand package and access design system tokens by drilling into the objects' properties. For a reference of all the available tokens and styles, please refer to the Design System 2.0 document in Figma.

Colors

The colors export contains two children: primitives and tokens.

primitives are palettes named as their color, i.e., orange, purple, black, etc. They each feature a series of numeric shades. For most palettes, they range from 100 to 500 in increments of 100.

tokens are semantically-named colors with variants for light and dark modes. Their names describe the context that they should be used. For example, colors.tokens.border.warning.base should be used as the border color for an element that displays a warning.

The base property at the end of the token above refers to the light mode variant. If this color was being used in dark mode, you would access colors.tokens.border.warning.dark. Every semantic token features base and dark variants.

Typography

The typography export also contains primitives and tokens!

The primitives include named font weights, i.e., normal, medium mapped to their numerical values (400, 500, etc.), and named font sizes that map to numerical font size and line height combinations.

tokens is an object that maps named font variants to the following CSS properties:

• fontSize
• lineHeight
• fontFamily
• fontWeight

Logos

This package also exposes the Apollo logos as plain SVG files. Depending on your website implementation, you may be able to import them and use them as image URLs, or transform them into React components using a tool like SVGR.

import { ReactComponent as Symbol } from "@apollo/brand/logos/symbol.svg";

const MyComponent = () => {
  return (
    // SVGR magic 🪄
    <Symbol
      style={{
        fill: 'red'
      }}
    />
  );
};

Example

import { colors, typography } from "@apollo/brand";
import logotype from "@apollo/brand/logos/logotype.svg";

const MyComponent = () => {
  return (
    <>
      <img src={logotype} alt="Apollo logo" />
      <h1
        style={{
          ...typography.tokens["3xl"],
          color: colors.tokens.text.primary.base,
          backgroundColor: colors.primitives.navy[100]
        }}
      >
        Welcome to Apollo
      </h1>
    </>
  );
};