The carrots are the reason we came back.
A short menu where everything has a reason to be on it. We ordered most of it between four people and argued about the last piece of flatbread.
Alder Table style guide
One system, every page.
Every colour, size and component on this page comes from Automatic.css settings and the kit's component classes. Change a setting and the whole kit follows. This page ships with the kit so your client can see the system too.
01
Colour
Primary is the one brand colour and it sits on interactive things only: buttons, links, eyebrows, icons. Accent saffron is for star ratings and the marker stroke. Everything else is charcoal and cream.
- –primaryButtons, links, eyebrows
- –primary-hoverHover
- –primary-ultra-lightLight bands (bg–light)
- –primary-lightText on dark bands
- –primary-darkRarely: pressed
- –accentStar ratings, highlights
- –base-ultra-darkText, ultra-dark bands
- –base-darkDark bands
- –neutral-ultra-lightPage background (paper)
- –neutral-lightLines, dividers
- –neutral-semi-lightDisabled, placeholders
- –whiteCards, inputs
Paper
Heading on ultra-light
Body text and a button take their colours from the band, not from the component.
Reserve a tableLight
Heading on light
Body text and a button take their colours from the band, not from the component.
Reserve a tableDark
Heading on dark
Body text and a button take their colours from the band, not from the component.
Reserve a tableUltra dark
Heading on ultra-dark
Body text and a button take their colours from the band, not from the component.
Reserve a table02
Type
Wood fire, short menu.
Around fifteen things, cooked properly.
Ember-roasted carrots
Card title and small headings
Lead text sits under a headline and says the one thing the section is about, in a sentence or two.
Body text is Karla at 18px on desktop and 17px on phones, line height 1.55, for reading at arm's length. Headings are Newsreader at weight 600 with tight tracking. Inline links look like this link to the services page, underlined so nobody has to guess.
Small text for captions, notes under buttons and legal lines. Never lighter than this.
Eyebrow label, the literal section heading03
Buttons
Three weights: primary for the one ask on a page, outline for the alternative, text link for everything else. Verb plus noun labels. At least 48px tall. Hover lifts nothing here, it darkens; the pressed and focus states are in ACSS.
On a dark band
04
Section intro
Every section starts with this component: the literal heading as an eyebrow, the headline as a paragraph, an optional lead and buttons. Alignment and the band colour are props.
Menu
Around fifteen things, cooked properly.
The menu changes with the farms, usually on a Wednesday.
05
Cards
Review cards
Camille R., Google review Loud enough to feel alive, quiet enough to talk.
We booked the back room for my father's seventieth. They wrote the menu with us and nobody had to wave anyone down all night.
Jonah M., Google review
Process cards
Tell us the date and the number
The back room seats up to 24. The whole restaurant takes 70.
We write a menu with you
Three or four courses for the table, built around what the farms have that week.
One price a head
Food, service and the room in a single number. Drinks are on a tab or a package.
We look after the night
One lead for your party from the first drink to the last coat.
06
Talking points
07
Contact details and FAQ
Do you take walk-ins?
Yes. The eight counter seats and the bar are never booked. Tables are held for reservations until fifteen minutes past the time.
Can you cook for allergies?
Tell us when you book and again when you sit down. The kitchen handles nuts, gluten, dairy and shellfish, so we cannot promise a trace-free plate.
Is there parking?
Street parking on Haywood Row and a public deck two blocks north. We are a five-minute walk from the Grove Arcade.
08
Media
Images are always in a figure. Cards fix the ratio (4:3), heroes use 3:2, square tiles are square. Corners come from the ACSS auto radius, so the client cannot upload a square-cornered photo by mistake.
