Example data

1

Copy the stylesheet

Place design/yravg-ui.css next to the page.

2

Set one accent

Change --accent on :root. This gallery uses clay #B4532A.

3

Mark the example

Keep the Example data label on sample figures.

4

Use the type scale

11, 12, 13, 15, 18, 26, and 44 only.

5

Space on an 8 px grid

8, 16, 24, 32, 40, 48, 72, 96.

6

Show an empty state

One line of purpose and the primary action.

7

Leave Bud empty

The companion slot stays labelled until yravgBud is available.

8

Keep the timed gate off

Arm it only inside its own preview.