WIP Brand Guide

docs/authoring/_brand-example.qmd

@@ -0,0 +1,44 @@
+As an example, consider the following `_brand.yml` file:
+
+``` {.yaml filename="_brand.yml"}
+color:
+  palette:
+    dark-grey: "#222222"
+    blue: "#ddeaf1"
+  background: blue
+  foreground: dark-grey
+  primary: black
+
+logo: 
+  medium: logo.png
+
+typography:
+  fonts:
+    - family: Jura
+      source: google
+  base: Jura
+  headings: Jura
+```
+
+When this `_brand.yml` is placed in a project, webpages, presentations, PDF reports, and dashboards will share a common appearance:
+
+::::::: {.column-body-outset-right layout-ncol="4"}
+::: {}
+![Webpage: `html`](/docs/authoring/images/brand-html.png){.lightbox group="brand-formats" fig-alt="Screenshot of a webpage. The text is dark grey on a light blue background, using a rounded sans-serif typeface, a logo appears in the navbar."}
+:::
+
+::: {}
+![Dashboard `dashboard`](/docs/authoring/images/brand-dashboard.png){.lightbox group="brand-formats" fig-alt="Screenshot of a dashboard. The text is dark grey on a light blue background, using a rounded sans-serif typeface, a logo appears in the navbar."}
+:::
+
+::: {}
+![Presentation: `revealjs`](/docs/authoring/images/brand-revealjs.png){.lightbox group="brand-formats" fig-alt="Screenshot of a presentation. The text is dark grey on a light blue background, using a rounded sans-serif typeface, a logo appears in bottom left of the slide."}
+:::
+
+:::{}
+![PDF: `typst`](/docs/authoring/images/brand-typst.png){.lightbox group="brand-formats" fig-alt="Screenshot of a PDF document. The text is dark grey on a light blue background, using a rounded sans-serif typeface, a logo appears in top right of the page."}
+::: 
+:::
+
+
+View the example: [Source](https://github.com/cwickham/quarto-examples/tree/brand/brand/brand-simple) | [Live website](https://charlotte.quarto.pub/brand-simple/)