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 LLM discoverability standard; the rules for building one are in 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.
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
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.
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.
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 |
|---|---|---|---|
--light | #faf8f8 | Page background | |
--lightgray | #e5e5e5 | Borders, dividers | |
--gray | #707070 | Muted text, metadata | |
--darkgray | #4e4e4e | Body text | |
--dark | #2b2b2b | Headings, strong text | |
--secondary | #284b63 | Links, primary accent | |
--tertiary | #4a7268 | Hover, visited accent | |
--highlight | rgba(143, 159, 169, 0.15) | Code and callout backgrounds | |
--textHighlight | #fff23688 | Marked text |
Dark mode
| Swatch | Token | Value | Use |
|---|---|---|---|
--light | #161618 | Page background | |
--lightgray | #393639 | Borders, dividers | |
--gray | #909090 | Muted text, metadata | |
--darkgray | #d4d4d4 | Body text | |
--dark | #ebebec | Headings, strong text | |
--secondary | #7b97aa | Links, primary accent | |
--tertiary | #84a59d | Hover, visited accent | |
--highlight | rgba(143, 159, 169, 0.15) | Code and callout backgrounds | |
--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 | Rules first, rationale second |
| Body | Source Sans Pro | Use X when Y. Prefer X over Y. Avoid X because Y. |
| Code | IBM Plex Mono | node scripts/lint-content.mjs |
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 |
| Logo | PNG | 512 x 512 | icon.png |
| Favicon | PNG | 32 x 32 | favicon-32.png |
| Favicon | ICO | 48 x 48 | favicon.ico |
| Default social image | PNG | 1200 x 630 | og-image.png |
| Per-page social image | WebP | 1200 x 630 | /<category>/<slug>-og-image.webp, generated at build |
All assets are released under the site’s CC BY 4.0 license; attribute “LLM Best Practices (llmbestpractices.com)“. See og-images for how the per-page images are generated.
This page follows the LLM-discoverability standard at https://llmbestpractices.com.