# 05 · Styles and variation

The team makes hundreds of infographics. No two may look alike. Style is **open**: any colours, gradients, fonts, layouts and picture treatments the tool can draw. Nothing below is a fixed template.

## Who decides the style

1. **The maker.** She may fix some parts in the tool before she asks you (size, colours, fonts, layout). Her message says which parts she fixed. Those parts are not negotiable.
2. **You.** Everything she did not fix is yours to propose. Offer 3 clearly different directions before you write code, and let her choose. Think about the topic, the audience, her taste, and what you know about her.

In code, always start with `ig.useStyle(...)`. Pass your own choices; the tool replaces them with hers where she fixed something:

```js
const S = ig.useStyle({
  palette: { paper: "#F4EFE6", ink: "#1B1B1B", muted: "#6B675F", accent: "#C8553D", accent2: "#2A7F7F", accent3: "#E9B872", deep: "#1F3B3B" },
  fonts: { display: "Fraunces", displayWeight: 700, text: "Source Serif 4", label: "Barlow Condensed", hand: "Caveat" },
});
const C = S.palette, F = S.fonts;
```

Use `C.*` and `F.*` everywhere after that, so "Try another style" in the tool can redraw your design in a new look.

## What the tool can do (use all of it)

- **Colours**: any hex colour, transparency, linear and radial gradients, blend modes (`multiply`, `screen`, `overlay`), shadows and soft glows.
- **Fonts**: any Google Font by name (more than 1,500), any weight, italic, letter spacing, line height. Keep 3 fonts or fewer on one page.
- **Pictures**: public-domain engravings, scientific plates, maps and photos from Wikimedia Commons; the maker's own photos; pictures drawn with code.
- **Picture looks**: duotone, pencil sketch, engraving ink, halftone dots, riso print, posterize, sepia, black and white, cut-out (background removal), soft feathered edges, round vignette, outline.
- **Paper feel**: paper, newsprint, kraft, watercolour, linen grain over the whole page.
- **Charts and maps**: bars, lines, areas, dots, waffles, treemaps, rings, small multiples (all drawn with shapes to scale), world maps in three projections with points placed by longitude and latitude.
- **Icons**: 5,000 line icons.
- **Hand-made touches**: hand-drawn circles and arrows, wobbly underlines, tape, torn paper, sticky notes, stamps, paper clips, hand-written notes.
- **Page sizes**: 1080 × 1350 portrait (default), 1080 × 1080 square, 1080 × 2700 tall, 1240 × 1754 poster, 1920 × 1080 wide.

## How to make each direction different

Change several of these between your 3 directions:

- **Mood and colour**: calm newsprint, bold poster, soft pastel, dark night, earthy, high-contrast two-colour, one bright accent on grey.
- **Type voice**: classic serif, condensed news sans, warm humanist, geometric modern, slab, handwritten touches.
- **Where the hero sits**: top, one side, bottom, bleeding off a corner, behind the headline.
- **Grid**: two wide columns, three columns, 8 + 4 split, centred axis, free collage.
- **Shapes**: sharp boxes, rounded cards, circles, torn paper, no boxes at all (only space and thin rules).
- **Picture treatment**: duotone engraving, pencil, halftone, cut-out photo, drawn with code.
- **Chart form for the same numbers**: bars, dots, waffle, treemap, slope, things to scale.
- **Human touches**: notes, circles, arrows, stamps, tape, in your own way.

Describe each direction in 2 lines: the feeling, the layout, the colours, the fonts. Then wait for her choice.

## Colour roles (when you build a palette)

| Role | Use it for |
|---|---|
| `paper` | page background |
| `ink` | headline and body text |
| `muted` | secondary text, source line, thin rules |
| `accent` | the one thing the reader must notice |
| `accent2`, `accent3` | other data series, modules, icons |
| `deep` | dark panels, duotone shadows |

On dark paper, text is light and pictures use `blend: "screen"`. Check contrast: text must be easy to read on its background.

## Layout families (ideas, not templates)

Big picture with numbered steps · areas to scale · one huge number · timeline · map first · labelled anatomy · small multiples · two sides · cycle or flow · lined up to scale · dots that count · magazine grid · circle layout · one annotated chart. Mix them, or invent a new one that fits the data.