Website interface guide.

CHAPTER 01

The catalogue is the street, not a shop.

Etalase: the catalogue is a row of shopfronts. The frame is the building — black, white and one vermilion accent — and its loop mark hangs on the fascia of every catalogue page, in the footer and as the browser icon. Each theme hangs its own sign in its own type and colours. Pick a shop, put your brand on it. The original Syafrilverse asset identifies the maker.

CHAPTER 02

Ink, white and one vermilion.

These are the live semantic tokens of the frame; they follow the light and dark themes. The frame never borrows a theme colour: colour on this site belongs to the shop signs, which keep their own palette in both themes.

CHAPTER 03

A directory voice; the shops bring their own type.

IBM Plex Mono is the frame’s voice: headings, labels, shop numbers and controls, like a building directory. Inter Tight carries reading text. Each sign is set in the theme’s own display face from its content file. All faces are OFL and served from this site.

CHAPTER 04

The street sets the rhythm.

Every shopfront has the same anatomy: sign, awning, window, then the record. The homepage street hangs four shops per row on a desktop, three on a tablet and two on a phone, so the work fills the first screen; catalogue cards take three, two or one. Windows hold real captures, square to the page.

CHAPTER 05

The frame belongs to the catalogue; the sign to the shop.

This is the actual catalogue card. Roti Pagi’s sign, awning and window come from its content file and capture; the ink frame, record line, save action and links belong to the catalogue.

012

Roti Pagi: Roti Pagi

Food & drinkEditorialSave

Croissants, sourdough and cinnamon buns, counted on one pickup list.

FrauncesTry it out

CHAPTER 06

A consistent family of signs.

Named Lucide icons accompany navigation and controls, with a 1.6 px stroke and 16–20 px sizes. Icon-only actions have accessible names and contextual help.

CHAPTER 07

Respond to a decision.

Hover and focus turn a shop’s frame vermilion; nothing zooms or slides. Save actions show their state immediately and filtered results settle in briefly. Reduced-motion preferences remove positional movement. No automatic slideshow or scroll takeover.

Visible focus, readable contrast and complete labels are part of the interface. Selects and tooltips support keyboard interaction, including Escape and focus return.

CHAPTER 08

Complete the interface details.

These select, tooltip and scroll-area specimens use the same primitives as the catalogue. Demo books apply their own visual contracts to the shared interaction behavior.

CHAPTER 09

Find a screen in a working theme.