---
title: "Identity"
slug: "identity"
category: "meta"
tags: ["meta", "brand", "design-tokens", "identity", "standards"]
status: "stable"
last_updated: 2026-09-27
summary: "Brand and design reference for llmbestpractices.com: typefaces, type scale, light and dark color palettes, logo, favicon, and every downloadable media asset, with a machine-readable token block."
description: "Identity page for llmbestpractices.com: fonts, font sizes, color palette, logo and favicon downloads, OG images, and design tokens in YAML."
aliases: ["brand", "brand guidelines", "style guide", "design tokens", "media kit", "press kit"]
related: ["[[seo/identity-page]]", "[[seo/llm-discoverability-standard]]", "[[llm-info]]", "[[meta/about]]", "[[seo/og-images]]", "[[frontend/css-custom-properties]]"]
---

## Overview

This page is the single place to see what llmbestpractices.com looks like and to download its assets: the typefaces and sizes, the light and dark palettes, the logo and favicon, and the social images. Designers and developers use it to match the site without reading the stylesheet; AI assistants read the token block below to describe or reproduce the brand accurately. It is the reference implementation of the `/identity` item in the [[seo/llm-discoverability-standard|LLM discoverability standard]]; the rules for building one are in [[seo/identity-page]].

## Design tokens

Read this block programmatically. Values are copied from `quartz.config.ts` and `quartz/styles/`, and CI fails if they drift from the config.

```yaml
name: LLM Best Practices
url: https://llmbestpractices.com
updated: 2026-09-27
standard_followed: https://llmbestpractices.com
fonts:
  header: "Schibsted Grotesk"
  body: "Source Sans Pro"
  code: "IBM Plex Mono"
  source: Google Fonts
  weights: [400, 600, 700]
type_scale:
  article_title: 2rem
  h1: 1.75rem
  h2: 1.4rem
  h3: 1.12rem
  h4_h6: 1rem
  body: 1rem
colors:
  light:
    light: "#faf8f8"
    lightgray: "#e5e5e5"
    gray: "#707070"
    darkgray: "#4e4e4e"
    dark: "#2b2b2b"
    secondary: "#284b63"
    tertiary: "#4a7268"
    highlight: "rgba(143, 159, 169, 0.15)"
    textHighlight: "#fff23688"
  dark:
    light: "#161618"
    lightgray: "#393639"
    gray: "#909090"
    darkgray: "#d4d4d4"
    dark: "#ebebec"
    secondary: "#7b97aa"
    tertiary: "#84a59d"
    highlight: "rgba(143, 159, 169, 0.15)"
    textHighlight: "#b3aa0288"
code_theme:
  light: github-light-high-contrast
  dark: github-dark-high-contrast
breakpoints:
  mobile: 800px
  desktop: 1200px
logo: https://llmbestpractices.com/static/logo.svg
logo_png: https://llmbestpractices.com/static/icon.png
favicon: https://llmbestpractices.com/static/logo.svg
favicon_png: https://llmbestpractices.com/static/favicon-32.png
favicon_ico: https://llmbestpractices.com/favicon.ico
og_image: https://llmbestpractices.com/static/og-image.png
per_page_og_image: "https://llmbestpractices.com/<category>/<slug>-og-image.webp"
```

## Logo

<img src="/static/logo.svg" alt="LLM Best Practices logo: the letters LBP in white on a dark blue rounded square, with a short green-gray rule beneath" width="120" height="120" />

The mark is an LBP monogram: the letters in Schibsted Grotesk Bold, colored `--light` (`#faf8f8`), on a rounded square in the brand accent `--secondary` (`#284b63`), with a short rule in dark-mode `--tertiary` (`#84a59d`). The letters are converted to vector paths, so the SVG renders the same without the font installed. Keep clear space of at least a quarter of the mark's width around it. Do not recolor it, stretch it, or set the letters in another typeface.

- [Download logo, SVG](/static/logo.svg)
- [Download logo, PNG, 512 x 512](/static/icon.png)

All brand assets are generated by `scripts/generate-brand-assets.mjs` from the colors in `quartz.config.ts`; rerun it after a theme change instead of editing the files by hand.

## Favicon

Every page declares the SVG mark as the primary icon, the 512 x 512 PNG as a fallback and Apple touch icon, and the build emits a 48 x 48 `/favicon.ico` for clients that request it by path. The monogram stays legible at 32 px.

- [Download favicon, SVG](/static/logo.svg)
- [Download favicon, PNG, 32 x 32](/static/favicon-32.png)
- [Download favicon, ICO, 48 x 48](/favicon.ico)

## Color palette

The site ships two palettes and follows the reader's system preference. `--secondary` is the one brand accent; everything else is a neutral ramp.

### Light mode

| Swatch | Token | Value | Use |
|---|---|---|---|
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:#faf8f8"></span> | `--light` | `#faf8f8` | Page background |
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:#e5e5e5"></span> | `--lightgray` | `#e5e5e5` | Borders, dividers |
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:#707070"></span> | `--gray` | `#707070` | Muted text, metadata |
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:#4e4e4e"></span> | `--darkgray` | `#4e4e4e` | Body text |
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:#2b2b2b"></span> | `--dark` | `#2b2b2b` | Headings, strong text |
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:#284b63"></span> | `--secondary` | `#284b63` | Links, primary accent |
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:#4a7268"></span> | `--tertiary` | `#4a7268` | Hover, visited accent |
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:rgba(143, 159, 169, 0.15)"></span> | `--highlight` | `rgba(143, 159, 169, 0.15)` | Code and callout backgrounds |
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:#fff23688"></span> | `--textHighlight` | `#fff23688` | Marked text |

### Dark mode

| Swatch | Token | Value | Use |
|---|---|---|---|
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:#161618"></span> | `--light` | `#161618` | Page background |
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:#393639"></span> | `--lightgray` | `#393639` | Borders, dividers |
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:#909090"></span> | `--gray` | `#909090` | Muted text, metadata |
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:#d4d4d4"></span> | `--darkgray` | `#d4d4d4` | Body text |
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:#ebebec"></span> | `--dark` | `#ebebec` | Headings, strong text |
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:#7b97aa"></span> | `--secondary` | `#7b97aa` | Links, primary accent |
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:#84a59d"></span> | `--tertiary` | `#84a59d` | Hover, visited accent |
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:rgba(143, 159, 169, 0.15)"></span> | `--highlight` | `rgba(143, 159, 169, 0.15)` | Code and callout backgrounds |
| <span aria-hidden="true" style="display:inline-block;width:2.5rem;height:1.25rem;border:1px solid #707070;border-radius:4px;background:#b3aa0288"></span> | `--textHighlight` | `#b3aa0288` | Marked text |

Callout accents are darkened in light mode to reach WCAG AA contrast; those overrides live in `quartz/styles/custom.scss` and are not brand colors.

## Typography

Three families, all served from Google Fonts.

| Role | Family | Specimen |
|---|---|---|
| Headings | Schibsted Grotesk | <span style="font-family:'Schibsted Grotesk',sans-serif;font-size:1.4rem;font-weight:600">Rules first, rationale second</span> |
| Body | Source Sans Pro | <span style="font-family:'Source Sans Pro',sans-serif">Use X when Y. Prefer X over Y. Avoid X because Y.</span> |
| Code | IBM Plex Mono | <code>node scripts/lint-content.mjs</code> |

Weights in use are 400 (regular), 600 (semibold, headings and bold UI), and 700 (bold).

### Type scale

| Element | Size | Weight |
|---|---|---|
| Article title | 2rem | 600 |
| H1 | 1.75rem | 600 |
| H2 | 1.4rem | 600 |
| H3 | 1.12rem | 600 |
| H4 to H6 | 1rem | 600 |
| Body | 1rem | 400 |

Code blocks use the `github-light-high-contrast` and `github-dark-high-contrast` Shiki themes.

## Media assets

| Asset | Format | Size | Link |
|---|---|---|---|
| Logo | SVG | vector | [logo.svg](/static/logo.svg) |
| Logo | PNG | 512 x 512 | [icon.png](/static/icon.png) |
| Favicon | PNG | 32 x 32 | [favicon-32.png](/static/favicon-32.png) |
| Favicon | ICO | 48 x 48 | [favicon.ico](/favicon.ico) |
| Default social image | PNG | 1200 x 630 | [og-image.png](/static/og-image.png) |
| Per-page social image | WebP | 1200 x 630 | `/<category>/<slug>-og-image.webp`, generated at build |

<img src="/static/og-image.png" alt="Default social image: the LBP mark beside the words LLM Best Practices, a one-line description, and the domain" width="600" height="315" />

All assets are released under the site's CC BY 4.0 license; attribute "LLM Best Practices (llmbestpractices.com)". See [[seo/og-images]] for how the per-page images are generated.

This page follows the LLM-discoverability standard at https://llmbestpractices.com.

## Related

- [[seo/identity-page]]
- [[seo/llm-discoverability-standard]]
- [[llm-info]]
- [[meta/about]]
- [[seo/og-images]]
- [[frontend/css-custom-properties]]