# Guides

Conceptual documentation, integration guides, and design system reference.

| Guide | Description |
|-------|-------------|
| [@reuters-graphics/graphics-components](./intro.md) | Svelte components, SCSS and more you can use in graphics projects. |
| [Layout](./layout.md) | Layout components setup our default page structure. |
| [Styles](./styles.md) | This library also includes our main SCSS stylesheets with pre-defined classes you can use to style your page. |
| [CSS variables](./theming.md) | The Theme?path=/docs/components-theme--default component uses CSS variableshttps://developer.mozilla.org/en-US/docs/Web/CSS/UsingCSScustomproperties to control major parts of your  |
| [Using with the graphics kit](./graphics-kit.md) | Our graphics components are designed to work seemlessly with the graphics kithttps://reuters-graphics.github.io/bluprintgraphics-kit/ as well as just about any Svelte-based page bu |
| [Using components with ArchieML docs](./archieml.md) | Most of the snippets in these docs show how to use components by passing data into their props directly. In most cases, though, you don't want to hard-code content in your project  |
| [Customising components with SCSS](./customising-with-scss.md) | One of the most powerful ways to customise components isn't props or, even, Svelte. |
| [LLM Docs](./llm-docs.md) | This library ships machine-readable documentation designed to be used as context for AI agents and LLMs. The docs are generated at build time from source — Svelte component props,  |
| [Colour Palettes](./colours.md) | CSS custom properties for 24 colour families (primary + thematic). |
| [Style Tokens](./tokens.md) | Spacing utilities (margin/padding), typography classes, and fluid spacers. |