# Interaction: the cool direction

## Overview

This vignette is rendered in the Interaction direction: a cool grey ground, all-grotesk type (Space Grotesk for display, Hanken Grotesk for body), and dark code blocks. It is the counterpart to the warm, serif Homage direction shown in `vignette("getting-started")`. Switching is a one-line change – `preset: interaction` in the vignette YAML, or `theme_albers(preset = "interaction")` for plots.

### How the two directions relate

A direction sets the ground, the type pairing, the code theme, and the nested-square marker’s outer ring. The family (here `lapis`) still drives the accent: links, the marker’s inner squares, and the plot palette all follow it.

## Dark code blocks

Code is rendered on a dark panel with light syntax tokens, while inline code like `neighbor_graph()` stays a light chip so it reads inside body text.

    m <- matrix(rnorm(40), 8, 5)
    round(cor(m), 2)
    #>       [,1]  [,2] [,3]  [,4]  [,5]
    #> [1,]  1.00 -0.06 0.35  0.69  0.05
    #> [2,] -0.06  1.00 0.23  0.24 -0.27
    #> [3,]  0.35  0.23 1.00  0.60  0.19
    #> [4,]  0.69  0.24 0.60  1.00 -0.41
    #> [5,]  0.05 -0.27 0.19 -0.41  1.00

> TIP: The dark code block is part of the Interaction direction. In Homage the same block is a light cream panel – the syntax colours adapt to stay legible on either ground.

## Tables

    knitr::kable(head(mtcars[, c("mpg", "wt", "hp", "cyl")]), caption = "A small table on the cool ground.")

A small table on the cool ground.
| mpg | wt | hp | cyl
--- | --- | --- | --- | ---
Mazda RX4 | 21.0 | 2.620 | 110 | 6
Mazda RX4 Wag | 21.0 | 2.875 | 110 | 6
Datsun 710 | 22.8 | 2.320 | 93 | 4
Hornet 4 Drive | 21.4 | 3.215 | 110 | 6
Hornet Sportabout | 18.7 | 3.440 | 175 | 8
Valiant | 18.1 | 3.460 | 105 | 6

## A plot on the matching ground

The plot’s background is the same cool grey as the page, so the figure sits seamlessly in the article rather than floating on a mismatched panel.

    mtcars |>
      ggplot(aes(wt, mpg, color = factor(cyl))) +
      geom_point(size = 2.4) +
      albersdown::scale_color_albers(family = params$family) +
      labs(
        title = "Fuel efficiency vs. weight",
        subtitle = "Interaction direction (cool) with the lapis family",
        x = "Weight (1000 lbs)", y = "MPG", color = "Cylinders"
      )