Black/Black
#0A0908
The page and every section
Black/Black 60%
#12100E at 60%
Shade over photos and the film
Black/Black 15%
#12100E at 15%
Hairlines on paper and saffron
White/White
#CCC4B8
Paper surfaces
White/White 30%
#EFE8DD at 30%
Form borders, the transition’s lines
White/White 15%
#EFE8DD at 15%
Hairlines and empty photo frames
Text/White
#EFE8DD
Text on the dark page
Text/Black
#12100E
Text on paper and saffron
Brand/Saffron
#FFB86B
Lines that draw, markers, the booking cell
Brand/Vermilion
#C8371E
The seal on Our Story
Name
Cormorant Garamond Light, capitals
300 on wide screens, 248 desktop, 168 tablet, 89 and 72 phone
The restaurant’s name in the home hero
Sagara
H1
Cormorant Garamond Light, capitals
115 / 84 / 56 px
The page title, one per page
An evening at Sushi Sagara
H2
Cormorant Garamond Light, capitals
65 / 52 / 40 px
Section titles
H2 Small
Cormorant Garamond Light, capitals
44 / 38 / 32 px
Large figures and titles inside a section
H3
Cormorant Garamond Regular, capitals
26 / 24 / 22 px
Names of dishes, rooms, steps and occasions
H4
Cormorant Garamond Regular
22 / 21 / 20 px
Quieter titles in sentence case
Body Large
Satoshi Regular
18 px
Leads under titles, longer paragraphs
Body Medium
Satoshi Medium
15 px
Body text, rows and details
Small
Satoshi Medium
13 px
Labels, captions, dates and notes
Button
Satoshi Medium, capitals
14 px
Buttons and the nav strip
Button
Primary for the main action, Secondary as a text link, Light and Ink for other grounds. Fill Label and Link; the size never changes on hover.
Submit Button
The booking form’s button. The form shows Sending while a request goes out and Sent afterwards; the Ink versions sit on paper.
Strip Cell
The actions in the top bar’s strip: Label, Link and Icon (Menu Card, Calendar, Place Setting or Chopsticks). Saffron marks the booking; the icon draws itself on hover.
Button - Arrow
The round arrows beside the guest reviews, Left and Right. The ring brightens and the arrow nudges on hover.
Row - Nav
One row per page in the full-screen menu (Navigation - Index, in the Main Layout): Label, Note, Link, Photo. Compact is the phone size.
Brand/Saffron
#FFB86B
Lines that draw, markers, the booking cell
Swatch
One colour style with its name, value and use, for this page.
Heading - Bracket
Every section’s heading: Label, Title, Place, Lead. Wide on desktop, Stacked on tablet and phone.
Heading - Split
A section heading with a photo set into the title: Top, Bottom, Title Start, Title End, Image, Lead.
Band - Reserve
The booking band that closes a page: Title, Lead, Button Label, Button Link.
How long is the meal?
About two hours in the dining room, two and a half at the counter.
How long is the meal?
About two hours in the dining room, two and a half at the counter.
FAQ Item
One question per item in an FAQ List: Question, Answer. Open is the primary; the first row is Open, the others Closed.
Footer - Half
The footer under every page, in the Main Layout: the name beside a photo, the addresses, the booking and the page links. Name, Seam Name, Photo, Note.
Nolita
88 Kenmare Street
Row - Footer
A label and value in the footer, such as the hours: Label, Value.
Link - Footer
A page link in the footer’s contents: Label, Link. Its line draws in on scroll and runs out on hover.
Kinmedai
Sushi and Sashimi
$10
Card - Dish
A signature piece: Image, Name, Second Name (drawn top to bottom), Category, Price. Large, Medium and Small.
Source
Shiireru
Fish from Toyosu three times a week and from local boats, wagyu from one ranch in Miyazaki, rice from Niigata.
Card - Step
One step of the craft: Second Language, Reading, Title, Text, Image. Column or Row.
Card - Way
A way to spend the evening, with a number and a photo: Number, Unit, Name, Line, Button, Link, Photo.
Card - Moment
A moment of the evening in the scrolling reel: Name, Line, Photo.
Opening Window
The opening times sentence with a photo that opens out of it on scroll: Time, Start, End, Image, Caption, Detail. Here it rests closed.
The best two and a half hours we spent in New York this year.
Daniel R.
Google review, October
Voice Slide
One guest review in the slider: Quote, Name, Detail, Photo.
Marcus T.
Resy review
The black cod alone is worth the trip downtown.
Card - Voice
One guest review: Name, Source, Quote, Photo. In the reviews section the slider reads each card and shows its quote large in the Voice Slide; the card shows who said it.
Chef’s signature
Signature Mark
The chef’s hat beside a signature dish on the menu; its Label shows on hover.
Row - Dish
A dish on the menu: Name, Second Name, Description, Price, Image, Link, Signature, Ingredients. Bound to the Menu Items CMS.
Row - Year
A year on the timeline: Year, Title, Text, Image. The dot lights as the year passes the middle of the screen.
Chef Profile
One chef in the tabs: Portrait, Name, Station, Role, Quote. Tab is the name in the row of tabs, Tab Panel the rest.
In season, or not at all
The menu follows the market.
Row - Belief
One belief: Statement, Text. The beliefs appear one at a time as you scroll.
Fish from
Toyosu
Toyosu, Tokyo
Tuesday, Thursday and Saturday
Bought at the morning auction by our buyer, packed on ice and on the evening flight to New York.
Place
Where an ingredient comes from: Word, Name, Place, When, Note, Photo. Pointing at a name shows its photo behind the whole section.
Upstairs at Kenmare Street
The Hinoki Room
Fourteen seated
A private room for kaiseki dinners and celebrations, booked whole.
The Hinoki Room
Room Stop
A stop on the walk through the rooms: Where, Name, Seats, Text, Photo.
Kenmare Street
Nolita, Manhattan
88 Kenmare Street, New York
Tuesday–Sunday · 5:30–10:30 pm
House
One restaurant in the booking: Name, Area, Address, Hours, Phone, Email, Photo and their links. Choosing a name switches the photo and the details.
Card - Call
A restaurant’s number at the top of Contact: Label, Number, Number Link, Address, Hours. Divided adds a line on its left.
Branch Row
A restaurant in Find us on Home. Tapping it opens the map, getting here, access and the buttons. Open, Closed and their phone versions.
Visit Route
Getting here, one per restaurant in the tabs on Contact: the map, the walk in up to three steps, hours, access and contacts. Empty fields hide.
Row - Contact
A shared address that belongs to no single restaurant: Label, Text, Link, Action.
Card - Room
A way to spend the evening: Photo, Name, four facts (Label and Fact 1 to 4), Button, Link. Empty facts hide.
Seasonal menu
$150 a guest
Seven courses for the table, planned with the chef.
Card - Package
An event package: Name, Price, Text.
Row - Occasion
A private function that opens in place: Japanese, Name, Guests, Where, Line, Included, Book, Photo, Button, Link. Pairs of Open and Closed for each size.
A toast of sakurayu, the salted cherry-blossom tea poured at Japanese weddings
Row - Included
One line of what an occasion includes, repeated from Row - Occasion’s Included list.
Row - Space
A room for private dining: Second Language, Name, Line, Guests, Notice, Where, Image.
Card - Event
An evening on the events page: Date, Image, Title, Summary, Seatings, Price, Seats, Button, Link. Empty facts hide. Add an evening by duplicating a card in the Events stack.
Card - Gift
The card a guest buys: Logo, Amount, Line, Japanese Word. Large and Small; it rests tilted and turns flat on hover.
Row - Amount
An amount to choose: Amount, Covers, Link (the provider’s page). Compact on phones.
Step - Time
A step on the gift card timeline: Number, When, Title, Text, Link Label, Link. Across in a row, Down on phones.
Row - Note
A note in the journal list: Title, Excerpt, Date, Category, Read Time, Image, Link. Bound to the Journal CMS.
The fat does the work. My job is to get the skin crisp before the inside goes dry.
Pull Quote
A quote inside an article’s text, placed from the CMS editor: Quote, Name. Name hides when empty.