YENNI
All projects

04 / 05

KŌIKEI

Category
Food & hospitality · Interactive menu
Site language
English
Status
Independent concept project

A sushi bar where dishes break out of the grid and the menu is arranged like a landscape.

View Live Project
Fig. 01Main screen — “A little ocean. A lot of flavour.”

Question

What happens when food is allowed to break the grid?

Idea

A fictional contemporary sushi bar. The name means “fish landscape”: glossy salmon, deep red tuna, warm rice and crisp nori arranged like scenery.

Visual language

Expressive food photography and cut-out dishes over warm rice tones, bold grotesque type with Japanese characters, and a pinned scene that composes a plate as you scroll.

01

A plate composed by scroll

Seven pieces gather on one board, unfold into a labelled cast and finally close up on a single slice — three states of one pinned scene.

1 / 3

Fig. 03Arrangement, state 1 — seven pieces gathered on one board

2 / 3

Fig. 04Arrangement, state 2 — the plate unfolded and labelled

3 / 3

Fig. 05Arrangement, state 3 — close-up, “Made to disappear”

02

A menu you can actually use

Six categories, fourteen dishes, quantities and a selection drawer saved in the browser. Clear prices, no checkout pretending to be real.

Fig. 06Menu — categories and the first dish
Fig. 07Menu — dishes with prices and quantity controls

03

Four signature dishes

Each signature gets its own colour field, oversized type and annotations that point at the food itself.

Fig. 08Signature 01 — Kōikei Salmon with annotations
Fig. 09Signature 02 — Pink Tide
Fig. 10Signature 03 — Midnight Tuna
Fig. 11Signature 04 — Kōikei Selection

04

The same appetite on a phone

Dishes still break the frame on mobile; the category filters become a horizontal strip you can swipe.

Fig. 12Mobile — main screen
Fig. 13Mobile — menu
Fig. 14Mobile — signature dish

05

Craft and the bar

The craft section walks through seven moves in a horizontal sequence; the bar is described through materials — dark wood, glazed ceramic, cold glass.

Fig. 15Craft — rolling and shaping, two of seven moves
Fig. 16The bar — materials and atmosphere

06

The sign-off

A wordmark in Latin and Japanese, with full photo credits right in the footer.

Fig. 17Footer — wordmark and photo credits

Design details

  1. 01Cut-out dishes float across sections and break the grid
  2. 02Japanese and Latin display type set side by side
  3. 03Warm, appetising palette with ink-dark contrast blocks

Interaction

  1. 01Category filters and quantity controls
  2. 02A selection drawer that never takes orders or payments
  3. 03Pinned scenes fall back to native scroll on touch screens

Technology

  • React 19
  • TypeScript
  • Vite
  • CSS

Image credits

The KŌIKEI screens above contain food photography from Wikimedia Commons. Images were resized and cropped; cut-outs had their backgrounds removed. Modified versions keep the licence of each original.

Show all 31 credits
  1. Nigiri Sushi (26478725732).jpg — Tim Reckmann from Hamm, Deutschland, CC BY 2.0 (modified: background removed, cropped)
  2. Sushi mit Lachs (26545054116).jpg — Tim Reckmann from Hamm, Deutschland, CC BY 2.0 (modified: background removed, cropped)
  3. Sushi vegetarisch (25966206524).jpg — Tim Reckmann from Hamm, Deutschland, CC BY 2.0 (modified: background removed, cropped)
  4. Maki Sushi (26478758172).jpg — Tim Reckmann from Hamm, Deutschland, CC BY 2.0 (modified: background removed, cropped)
  5. Sushi (14930650292).jpg — Tim Reckmann from Hamm, Deutschland, CC BY 2.0 (modified: background removed, cropped)
  6. Nigiri Sushi (26478732232).jpg — Tim Reckmann from Hamm, Deutschland, CC BY 2.0 (modified: background removed, cropped)
  7. Nigiri Sushi (26505096851).jpg — Tim Reckmann from Hamm, Deutschland, CC BY 2.0 (modified: background removed, cropped)
  8. Sashimi of São Paulo.jpg — Wilfredor, CC BY-SA 4.0 (modified: resized, cropped)
  9. Sushi platter.jpg — chidorian from Japan, CC BY-SA 2.0 (modified: resized, cropped)
  10. Colorful sushi lunch.jpg — Robbie Vize, CC BY 3.0 (modified: resized, cropped)
  11. Maguro Otoro (fatty tuna) Nigiri.jpg — Zheng Zhou, CC BY-SA 4.0 (modified: resized, cropped)
  12. Two types of Tuna nigiri, hakami and chutoro, at Uchi Houston location in July 2026.jpg — Gatorfan252525, CC BY-SA 4.0 (modified: background removed, cropped)
  13. Kasugodai (Baby red snapper) (16220715963).jpg — City Foodsters, CC BY 2.0 (modified: resized, cropped)
  14. Sushi searing.jpg — Original uploader was Jason Ruck at en.wikipedia, CC BY-SA 3.0 (modified: resized, cropped)
  15. Roll sushi making.jpg — bandita, CC BY-SA 2.0 (modified: resized, cropped)
  16. SushiPreparation-10.jpg — Guy Kawasaki, CC BY-SA 4.0 (modified: resized, cropped)
  17. P. binghamiae,Haba-nori,Katsuura-city,Japan.JPG — katorisi, CC BY-SA 3.0 (modified: resized, cropped)
  18. Rice, Sushi Bar Montparnasse, Paris 001.jpg — Guilhem Vellut from Paris, France, CC BY 2.0 (modified: resized, cropped)
  19. Maguro - Shira Nui AUD4.50 each - photo by David (4760493730).jpg — Alpha from Melbourne, Australia, CC BY-SA 2.0 (modified: background removed, cropped)
  20. Panfried Salmon Nigiri - Shira Nui AUD4.50 each (4759206623).jpg — Alpha from Melbourne, Australia, CC BY-SA 2.0 (modified: resized, cropped)
  21. Salmon fillet.JPG — BrokenSphere, CC BY-SA 3.0 (modified: resized, cropped)
  22. Edamame (5700539494).jpg — cyclonebill from Copenhagen, Denmark, CC BY-SA 2.0 (modified: resized, cropped)
  23. Miso Soup 001.jpg — Ocdp, CC0 (modified: background removed, cropped)
  24. Matcha (6328677556).jpg — cyclonebill from Copenhagen, Denmark, CC BY-SA 2.0 (modified: background removed, cropped)
  25. Unfiltered Sake at Gyu-Kaku.jpg — Marshall Astor from San Pedro, United States, CC BY-SA 2.0 (modified: resized, cropped)
  26. Eingelegter Ingwer (25966203794).jpg — Tim Reckmann from Hamm, Deutschland, CC BY 2.0 (modified: background removed, cropped)
  27. Wasabi 002.jpg — https://publicdomainq.net/wasabi-japanese-horseradish-0000353/, CC0 (modified: background removed, cropped)
  28. Day 051 - Photo365 - Fresh (15973465233).jpg — UnknownNet Photography, CC BY-SA 2.0 (modified: background removed, cropped)
  29. Avocado Hass - single and halved.jpg — Ivar Leidus, CC BY-SA 4.0 (modified: background removed, cropped)
  30. Salmon caviar on a spoon.jpg — TypeZero, CC BY-SA 4.0 (modified: resized, cropped)
  31. 氷見 2017 (36947113335).jpg — akiko yanagawa, CC BY-SA 2.0 (modified: resized, cropped)
View Live Project
All projects
Next project — 05 / 05NŌCTILMusic · Audio-visual experience← Previous: MONOLITH

1 / 1