Styles, fonts, and CSS

Customization

Change the look and feel of your documentation by changing colors, fonts, and more.

Quick color adjustments

The fastest way to adjust the colors used on your site is to change the --stl-ui-swatch-accent-* CSS variables in your theme.css file:

:root[data-theme="light"] {
  --stl-ui-swatch-accent-base: #155dfc;
  --stl-ui-swatch-accent-muted: #bedbff;
  --stl-ui-swatch-accent-faint: #eff6ff;
  --stl-ui-swatch-accent-base: #11cc8d;
  --stl-ui-swatch-accent-muted: #beffe9;
  --stl-ui-swatch-accent-faint: #effff9;
}

:root[data-theme="dark"] {
  --stl-ui-swatch-accent-base: #2b7fff;
  --stl-ui-swatch-accent-muted: #132762;
  --stl-ui-swatch-accent-faint: #0b1128;
  --stl-ui-swatch-accent-base: #1eb281;
  --stl-ui-swatch-accent-muted: #136247;
  --stl-ui-swatch-accent-faint: #0b281e;
}

Make sure everything looks correct in both light and dark mode when you change these colors. You can quickly switch between light and dark mode using the switcher at the top right on your site.

Add custom CSS

Refer to Starlight’s documentation for adding custom CSS to your site.

Colors

Use custom CSS and the information below to make more nuanced and granular color adjustments on your site.

Light and dark mode

We use the selector data-theme="dark" to apply dark mode styles. You can use this selector in your own CSS to target dark mode specifically.

:root[data-theme="dark"] {
  /* Dark mode specific styles */
}

CSS variables

The Stainless Docs Platform uses several CSS variables to define the specific colors used on your site. You can override these with your own values:

  :root {
    --stl-ui-background: var(--stl-ui-swatch-gray-white);
    --stl-ui-card-background: var(--stl-ui-swatch-gray-white);
    --stl-ui-muted-background: var(--stl-ui-swatch-gray-gray-8);
    --stl-ui-foreground: var(--stl-ui-swatch-gray-gray-1);
    --stl-ui-foreground-secondary: var(--stl-ui-swatch-gray-gray-3);
    --stl-ui-foreground-muted: var(--stl-ui-swatch-gray-gray-4);
    --stl-ui-foreground-accent: var(--stl-ui-swatch-accent-base);
    --stl-ui-border: var(--stl-ui-swatch-gray-gray-7);
    --stl-ui-border-muted: var(--stl-ui-swatch-gray-gray-8);
    --stl-ui-border-emphasis: var(--stl-ui-swatch-gray-gray-6);
    --stl-ui-inverse-background: var(--stl-ui-swatch-gray-gray-1);
    --stl-ui-inverse-foreground: var(--stl-ui-swatch-gray-white);
    --stl-ui-accent-background: var(--stl-ui-swatch-accent-base);
    --stl-ui-accent-foreground: var(--stl-ui-swatch-gray-white);
    --stl-ui-accent-muted-background: var(--stl-ui-swatch-accent-faint);
    --stl-ui-accent-muted-foreground: var(--stl-ui-swatch-accent-base);
    --stl-ui-accent-border: var(--stl-ui-swatch-accent-muted);
    --stl-ui-accent-border-muted: var(--stl-ui-swatch-accent-faint);
    --stl-ui-accent-border-emphasis: var(--stl-ui-swatch-accent-base);
    --stl-ui-overlay-background: #0000000d;
  }

  :root[data-theme='dark'] {
    --stl-ui-background: var(--stl-ui-swatch-gray-black);
    --stl-ui-card-background: var(--stl-ui-swatch-gray-gray-9);
    --stl-ui-muted-background: var(--stl-ui-swatch-gray-gray-9);
    --stl-ui-foreground: var(--stl-ui-swatch-gray-gray-1);
    --stl-ui-foreground-secondary: var(--stl-ui-swatch-gray-gray-3);
    --stl-ui-foreground-muted: var(--stl-ui-swatch-gray-gray-4);
    --stl-ui-foreground-accent: var(--stl-ui-swatch-accent-base);
    --stl-ui-border: var(--stl-ui-swatch-gray-gray-8);
    --stl-ui-border-muted: var(--stl-ui-swatch-gray-gray-9);
    --stl-ui-border-emphasis: var(--stl-ui-swatch-gray-gray-7);
    --stl-ui-inverse-background: var(--stl-ui-swatch-gray-gray-1);
    --stl-ui-inverse-foreground: var(--stl-ui-swatch-gray-black);
    --stl-ui-accent-background: var(--stl-ui-swatch-accent-base);
    --stl-ui-accent-foreground: var(--stl-ui-swatch-gray-white);
    --stl-ui-accent-muted-background: var(--stl-ui-swatch-accent-faint);
    --stl-ui-accent-muted-foreground: var(--stl-ui-swatch-accent-base);
    --stl-ui-accent-border: var(--stl-ui-swatch-accent-muted);
    --stl-ui-accent-border-muted: var(--stl-ui-swatch-accent-faint);
    --stl-ui-accent-border-emphasis: var(--stl-ui-swatch-accent-base);
    --stl-ui-overlay-background: #00000080;
  }

Typography

Your site uses the following CSS variables for fonts and typography which you can override with your own values:

  :root {
    --stl-ui-typography-font: 'Geist', system-ui, sans-serif;
    --stl-ui-typography-font-mono: 'Geist Mono', ui-monospace, monospace;
    --stl-ui-typography-line-height: 1.5;
    --stl-ui-typography-line-height-headings: 1.2;

    --stl-ui-typography-text-body: var(--stl-ui-type-scale-text);
    --stl-ui-typography-text-body-sm: var(--stl-ui-type-scale-text-sm);
    --stl-ui-typography-text-body-xs: var(--stl-ui-type-scale-text-xs);

    --stl-ui-typography-text-code: var(--stl-ui-type-scale-text-sm);
    --stl-ui-typography-text-code-sm: var(--stl-ui-type-scale-text-xs);

    --stl-ui-typography-text-h1: var(--stl-ui-type-scale-text-5xl);
    --stl-ui-typography-text-h2: var(--stl-ui-type-scale-text-4xl);
    --stl-ui-typography-text-h3: var(--stl-ui-type-scale-text-3xl);
    --stl-ui-typography-text-h4: var(--stl-ui-type-scale-text-2xl);
    --stl-ui-typography-text-h5: var(--stl-ui-type-scale-text-xl);

    --stl-ui-type-scale-text-xs: 12px;
    --stl-ui-type-scale-text-sm: 14px;
    --stl-ui-type-scale-text: 16px;
    --stl-ui-type-scale-text-lg: 18px;
    --stl-ui-type-scale-text-xl: 20px;
    --stl-ui-type-scale-text-2xl: 24px;
    --stl-ui-type-scale-text-3xl: 29px;
    --stl-ui-type-scale-text-4xl: 35px;
    --stl-ui-type-scale-text-5xl: 42px;
    --stl-ui-type-scale-text-6xl: 64px;
  }

Custom fonts

To use your own custom fonts, override the --stl-ui-typography-font and --stl-ui-typography-font-mono variables:

  :root {
    --stl-ui-typography-font: 'Your Custom Font', system-ui, sans-serif;
    --stl-ui-typography-font-mono: 'Your Custom Mono Font', ui-monospace, monospace;
  }

Add Google fonts

To use Google fonts, import them into your theme.css file:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Source+Code+Pro:wght@400;500&display=swap");

:root {
  --stl-ui-typography-font: 'Inter', system-ui, sans-serif;
  --stl-ui-typography-font-mono: 'Source Code Pro', ui-monospace, monospace;
}

Add Fontsource fonts

To use Fontsource, add their @font-face declarations to theme.css:

/* montserrat-latin-wght-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(@fontsource/montserrat/files/montserrat-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* martian-mono-latin-wght-normal */
@font-face {
  font-family: 'Martian Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/martian-mono:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}