brand/example.qmd at main · openwashdata/brand · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
---
title: "openwashdata brand preview"
subtitle: "What _brand.yml looks like when Quarto applies it"
format:
  html:
    brand: _brand.yml
    toc: true
    embed-resources: true
execute:
  echo: false
  warning: false
  message: false
---

This document renders with the brand file in this repository and nothing
else: no custom SCSS, no manual colors. What you see is what any Quarto
project gets by copying `_brand.yml` and `logos/` into its root.

## Typography

Body text runs in Atkinson Hyperlegible, as do all the headings above
and below. Here is a [link in the brand blue](https://openwashdata.org),
some **bold text**, some *italic text*, and inline code like
`read_csv("data.csv")` in Source Code Pro.

```r
# Code blocks use Source Code Pro.
library(washr)
setup_dictionary()
```

### A third-level heading

> A block quote, for measuring how quoted material sits against the
> background.

## The palette

Drawn live from `_brand.yml`, so this chart can never drift from the
definition.

```{r}
#| fig-width: 9
#| fig-height: 3.4
#| fig-alt: "Color swatches of the openwashdata palette, one tile per named color with its hex value: the purple family, ink and paper, blue, orange, and the highlight set."

library(ggplot2)

b <- yaml::read_yaml("_brand.yml")
pal <- b$color$palette
pal <- pal[!vapply(pal, function(x) x %in% names(pal), logical(1))]

df <- data.frame(
  name = names(pal),
  hex = unlist(pal),
  x = seq_along(pal)
)

ggplot(df, aes(x = x, y = 1, fill = hex)) +
  geom_tile(color = "white", linewidth = 2) +
  geom_text(aes(label = paste0(name, "\n", hex)),
            angle = 90, size = 3.2, lineheight = 0.95,
            color = ifelse(colSums(col2rgb(df$hex) * c(0.299, 0.587, 0.114)) > 150,
                           "#1e1e1e", "#ffffff")) +
  scale_fill_identity() +
  theme_void()
```

## Semantic roles

Callouts pick up the semantic colors from the brand:

::: {.callout-note}
An info callout, tinted from `info` (the brand blue).
:::

::: {.callout-warning}
A warning callout, tinted from `warning` (sand).
:::

::: {.callout-tip}
A tip callout, tinted from `success` (mint).
:::

## Logos

The three designated marks from the `logo:` section:

::: {layout-ncol="3"}
![small: OWD-logo-18](logos/OWD-logo-18.png){width="80"}

![medium: OWD-logo-01](logos/OWD-logo-01.png){width="200"}

![large: OWD-logo-01 (SVG)](logos/OWD-logo-01.svg){width="260"}
:::

The full library, including the QR-code logos, sits in `logos/`.

## How to reuse this

Copy `_brand.yml` and `logos/` into any Quarto project root and add
`brand: _brand.yml` to the format header (or rely on automatic
discovery in a project with `_quarto.yml`). For charts outside
brand-aware tools, read the file as this document does and take colors
from `color$palette`.