Four source-of-truth values per theme in src/components/theme/brand.ts. Edit only these to shift the entire site's look.

All theme.colors tokens derived from brand values. Access via ${({ theme }) => theme.colors.tokenName}.

Light theme

Dark theme

Three typefaces — Domine (serif) for primary headings, Roboto for secondary headings, Source Sans Pro for body text, and Fira Code for monospace.

Heading scale — Serif (Domine)

Heading scale — Sans-serif (Roboto)

Body text (Source Sans Pro)

The quick brown fox jumps over the lazy dog. Body text uses Source Sans Pro at 1.125rem (xmedium) with a line height of 1.8 for comfortable reading on long-form content. Paragraphs carry a bottom margin of 1.5rem.

Font size scale

Spacing utilities from styled-components-spacing. Use mt(n), mb(n), p(n), px(n) etc. with keys 0–10.

All breakpoints available via styled-components-breakpoint. Use breakpoint('lg') for min-width or breakpoint('xs', 'lg') for a range.

ButtonLink

Props: variant (text · contained · outlined) · color (primary · secondary) · size (small · medium · large)

Tag

Props: type (light · dark) · size (small · medium)

Quick-reference patterns for working with the design system in this codebase.

Accessing theme tokens

import styled from 'styled-components';

const Card = styled.div`
  color: ${({ theme }) => theme.colors.primaryText};
  font-size: ${({ theme }) => theme.fontSizes.medium};
  font-family: ${({ theme }) => theme.fonts.body};
  border-radius: ${({ theme }) => theme.borderRadius.base};
  font-weight: ${({ theme }) => theme.fontWeights[5]}; // 500
  border: ${({ theme }) => theme.borders.thin}
    ${({ theme }) => theme.colors.cardBorder};
`;

Spacing utilities

import { mt, mb, p, px, py, mr, ml } from 'styled-components-spacing';

const Section = styled.div`
  ${p(5)};      // padding: 1.5rem (all sides)
  ${px(4)};     // padding-left + padding-right: 1rem
  ${mt(6)};     // margin-top: 2rem
  ${mb(3)};     // margin-bottom: 0.75rem
`;

Responsive breakpoints

import breakpoint from 'styled-components-breakpoint';

const Box = styled.div`
  font-size: 1rem;

  // min-width: 800px and above
  ${breakpoint('lg')`
    font-size: 1.25rem;
  `}

  // between xs (0) and lg (800px)
  ${breakpoint('xs', 'lg')`
    padding: 1rem;
  `}
`;

Conditional theming

const El = styled.div`
  color: ${({ theme }) =>
    theme.name === 'lightTheme'
      ? theme.colors.secondaryText
      : theme.colors.primaryText};
`;