Styles

The tokens under every component: four palettes, two typefaces, a radius scale, hairlines and two motion speeds, all in one layout.css you can copy.

Palettes

Each palette is five colours: paper, a warm tint, a cool tint, one ink and a softer ink for secondary text. These are the light values. Dark mode turns them around: the ink becomes the page and the warm tint becomes the primary colour.

Meadow

Cream paper, butter and lilac, deep green ink.

In use

Paper --paper oklch(0.983 0.011 106.6)
Warm block --block-a oklch(0.924 0.074 110.3)
Cool block --block-b oklch(0.88 0.03 305.1)
Ink --ink oklch(0.383 0.064 170.3)
Soft ink --ink-soft oklch(0.443 0.036 169.7)

Orchard

Ivory paper, apricot and sage, plum ink.

Paper --paper oklch(0.985 0.012 80)
Warm block --block-a oklch(0.915 0.072 62)
Cool block --block-b oklch(0.905 0.045 140)
Ink --ink oklch(0.345 0.085 340)
Soft ink --ink-soft oklch(0.43 0.05 340)

Shore

Cool paper, sand and sky, navy ink.

Paper --paper oklch(0.985 0.006 220)
Warm block --block-a oklch(0.93 0.05 85)
Cool block --block-b oklch(0.9 0.04 232)
Ink --ink oklch(0.34 0.06 235)
Soft ink --ink-soft oklch(0.43 0.04 235)

Clay

Stone paper, terracotta and mist, espresso ink.

Paper --paper oklch(0.98 0.01 70)
Warm block --block-a oklch(0.9 0.07 42)
Cool block --block-b oklch(0.91 0.028 160)
Ink --ink oklch(0.33 0.045 50)
Soft ink --ink-soft oklch(0.43 0.03 50)

Semantic roles

Components only use these names. The swatches follow the palette and mode you have on now.

Surfaces

Four surfaces, and every component sits on all of them. Outline and ghost treatments use the current text colour, so they turn over with the surface. On the ink card the main button switches to secondary.

Paper with a hairline

Hellebore ‘Ice n’ Roses’

38 pots in the shade house, in bud and flowering from December. $18.50 each.

Warm block

Hellebore ‘Ice n’ Roses’

38 pots in the shade house, in bud and flowering from December. $18.50 each.

Cool block

Hellebore ‘Ice n’ Roses’

38 pots in the shade house, in bud and flowering from December. $18.50 each.

Ink card

Hellebore ‘Ice n’ Roses’

38 pots in the shade house, in bud and flowering from December. $18.50 each.

Type

Manrope for headings, labels and big numbers; DM Sans for reading. Sentence case everywhere, and tight tracking only on display sizes.

.display-1
Manrope 800 · 60px, 104px from md · line 0.95 · tracking -0.04em

Once per page, on the landing hero.

Frost tonight
.display-2
Manrope 800 · 38px, 56px from md · line 1 · tracking -0.04em

Page titles and section titles.

Rose pre-orders are open
.display-3
Manrope 800 · 26px · line 1.1 · tracking -0.03em

Card, dialog and component titles.

Hellebore ‘Ice n’ Roses’
.display-4
Manrope 800 · 20px · line 1.25 · tracking -0.02em

Small titles inside blocks.

Delivery on Tuesday, October 27
.row-title
Manrope 800 · 18px, 30px from md · line 1.25 · tracking -0.02em, -0.03em from md

The title of a row in a hairline list.

Order #4471, Hal Jennings
.lead
DM Sans 400 · 16px, 18px from md · line 1.5

The first paragraph under a page or section title.

We grow most of what we sell in two polytunnels behind the shop, a short walk from the river.
.figure
Manrope 800 · 40px, 48px from md · line 1 · tracking -0.04em

Prices and the one number a block is about.

$43.50
text-base
DM Sans 400 · 16px · line 1.5

Body text.

Witch hazel: Sun or part shade, neutral to acid soil. Scented flowers in January.
text-[0.9375rem]
DM Sans 400 · 15px · line 1.5

Controls, menu items and table cells.

The vans go out on Tuesday, Thursday and Saturday.
text-sm
DM Sans 400 · 14px · line 1.43

Descriptions and captions.

Bronze fennel seeds itself everywhere. Cut the heads off in August if you want fewer.
text-xs
DM Sans 400 · 12px · line 1.33

Fine print and meta.

Prices exclude 6.25% sales tax, added at the till. Stock counted Tuesday, October 20.

Manrope Variable

800 for headings and figures, 700 for buttons, labels and links. One variable file covers both.

800 · Foxglove, sea holly and bronze fennel

700 · ABCDEFGHIJKLM nopqrstuvwxyz 0123456789

DM Sans Variable

400 for running text, 500 for small labels and anything that needs a little more weight at 12 or 14px.

400 · Bare-root roses arrive on Tuesday, November 10.

500 · ABCDEFGHIJKLM nopqrstuvwxyz 0123456789

Radius and rhythm

Every radius step has a job. The small steps are fractions of the 20px card radius; colour blocks use their own 28px.

Radius scale

rounded-xs 6px Checkbox, kbd, inline code
rounded-sm 8px Small chips and swatches
rounded-md 12px Menu items, tabs, tooltips
rounded-lg 20px Cards, popovers, dialogs
rounded-xl, rounded-block 28px Colour blocks and the ink card
rounded-full 999px Buttons, inputs, badges

Spacing

Gutter: wrap 20px on phones, 64px from md. Content stops at 1440px.
Section gap: section-gap 64px on phones, 112px from md, between bands.
Inside a page: py-8 md:py-12 32px, then 48px from md, above and below each hairline section.

Control heights

sm · h-10 · 40px

default · h-12 · 48px

lg · h-14 · 56px

Inputs, selects and toggles use the same three heights, so they line up with buttons in a row.

Hairlines and blocks

Lists use hairlines, not cards. A colour block holds the one thing on the page that needs attention.

Hairline list: border-t, then border-b per row

Hal Jennings #4471 · 3 × Bare-root rose ‘Gertrude Jekyll’ $65.25
Bram Kowalczyk #4478 · 3 × Hellebore ‘Ice n’ Roses’, 2 × Bronze fennel $66.30
Marguerite Lowe #4479 · 2 × Hellebore ‘Ice n’ Roses’ $43.50
Dev Anand #4480 · 8 × Lavender ‘Hidcote’, 4 × Sea holly $86.40

Colour block: rounded-block on bg-accent

Rose pre-orders are open

Bare-root rose ‘Gertrude Jekyll’ arrives on Tuesday, November 10, at $21.75. So far 9 are reserved.

Motion

Two speeds. Motion shows that something changed, then stops. Nothing moves on its own.

150ms, ease-out: Routine state changes: hover tints, toggles, checks, row selection.
200-300ms: Overlays: dialogs, sheets, popovers and menus. Ease-out in, ease-in out. They enter from 95% scale and transparent, never from zero.
Named properties: transition-[background-color,color] or transition-opacity. Never transition-all or a bare transition.
Reduced motion: The base layer cuts every animation and transition to near zero when the system asks for it.
Not used: Lifts on hover, count-ups, looping decoration, entrances on scroll.

Both speeds: the row tints in 150ms, the note fades in over the scrim in 200ms

Marguerite Lowe

3 Mill Row, Hollin Bridge

#4479, Open 2 × Hellebore ‘Ice n’ Roses’ $43.50
#4474, Out for delivery 2 × Witch hazel, 4 × Foxglove ‘Pam’s Choice’ · $113.00

Leave by the side gate if nobody is in.

Typography

Styles for running text: care guides, policies, help pages. Use the components in ui/typography, or put typographyVariants classes on plain elements.

A care guide

Planting bare-root roses

Bare-root roses arrive dormant, with no soil on the roots. Ours land on Tuesday, November 10. Plant them within a week, while the ground is cold but not frozen.

Before you plant

Soak the roots in a bucket of water for two hours. If you cannot plant the same day, heel them into a trench or keep them wrapped in a cool shed for up to a week.

What you need

A spade and a garden fork
One sachet of mycorrhizal fungi per rose
About a bucket of well-rotted compost per hole
A stake, if the bed catches the wind off the river

The till sells all four as one kit for $16.80. Ask for KIT-ROSE-2.

Planting

Depth

Set the graft union, the knobbly join where the stems meet the roots, 2 inches below the soil. Firm the soil with your heel and water it in, even if it is raining.

Most of the roses we lose in the first year die of drought next summer, not frost in January. Tomasz Brandt, grower

On pre-order

Variety	Habit	Height	Price
‘Gertrude Jekyll’	Shrub	5 ft	$21.75
‘Albertine’	Rambler	15 ft	$22.00
‘Munstead Wood’	Shrub	3 ft	$26.75
‘The Generous Gardener’	Climber	10 ft	$25.40

Pre-order prices. Every variety lands on Tuesday, November 10.

On the cool block

Collecting from the shop

Collect from the yard gate on any open day, at no charge. Give the order number, for example #4481, at the gate.

Open Tuesday to Sunday, 9:00 AM to 5:00 PM. Closed on Mondays.

Swatch	Token	Used for
	`--background` `bg-background` The page, cards and floating layers.	The page, cards and floating layers.
	`--foreground` `bg-foreground` Body text and headings.	Body text and headings.
	`--primary` `bg-primary` Primary buttons, the ink card, checked controls.	Primary buttons, the ink card, checked controls.
	`--primary-foreground` `bg-primary-foreground` Text and icons on primary.	Text and icons on primary.
	`--secondary` `bg-secondary` The warm block: page intros and secondary buttons.	The warm block: page intros and secondary buttons.
	`--accent` `bg-accent` The cool block, and text selection.	The cool block, and text selection.
	`--muted` `bg-muted` Quiet fills: hovered rows, skeletons, empty tracks.	Quiet fills: hovered rows, skeletons, empty tracks.
	`--muted-foreground` `bg-muted-foreground` Secondary text: descriptions, captions, table heads.	Secondary text: descriptions, captions, table heads.
	`--border` `bg-border` Hairlines and input outlines. Input and ring use the same value.	Hairlines and input outlines. Input and ring use the same value.
	`--destructive` `bg-destructive` Errors and actions that delete. The one colour outside the palette.	Errors and actions that delete. The one colour outside the palette.
	`--overlay` `bg-overlay` The scrim behind dialogs, sheets and drawers.	The scrim behind dialogs, sheets and drawers.
	`--chart-1` `bg-chart-1` The series the chart is about.	The series the chart is about.
	`--chart-2` `bg-chart-2` Second series, usually the comparison.	Second series, usually the comparison.
	`--chart-3` `bg-chart-3` Third series.	Third series.
	`--chart-4` `bg-chart-4` Fourth series.	Fourth series.
	`--chart-5` `bg-chart-5` Fifth series, or the empty part of a track.	Fifth series, or the empty part of a track.
	`--sidebar` `bg-sidebar` The sidebar, with its own foreground, primary, accent and border.	The sidebar, with its own foreground, primary, accent and border.