Colors and palettes

Fenómenus works from a palette rather than from free-form colors. Individual settings choose a slot in that palette, which is what keeps a menu looking like one design instead of a collection of decisions.

Where the palette comes from

The setup assistant builds it from three answers:

• Light or dark — the background, main text and link colors;
• Highlight color 1 — the primary color family;
• Highlight color 2 — the secondary color family.

From the two highlight colors it derives five shades each, and adds a fixed set of neutrals from white through greys to black. It also generates the standard button styles — filled primary, filled secondary, dark and light outline, and dark and light underlined.

Changing the palette later

Re-running the setup assistant's color step regenerates the palette and the button styles. That is a site-wide change: every menu, every navigation element and every generated stylesheet follows.

Treat it as a deliberate redesign rather than an experiment, and re-check every menu afterwards.

What you tune per menu type

Under Settings → Restaurant settings → Content settings → Content settings, three groups of palette settings:

Category navigation

• divider color;
• text color, used by links and the active indicator;
• background color, used behind the bar and its side fades.

Contact dock toggle

• text color, for the label and icons;
• background color, for the floating button and its label.

Contact dock options

• inactive option background and text;
• active option background and text.

Each of these picks a palette slot, not an arbitrary color.

Choosing colors that work in a dining room

• Start from the room. The walls, the tableware, the logo. A palette that exists physically in the restaurant always looks intentional.
• Dark or light is a room decision. A dark menu suits a dark dining room and is harder to read on a sunlit terrace.
• Contrast is not optional. Menus are read on phones at arm's length, often in low light, often by guests who did not bring their glasses.
• The active state must be obvious. If the active dock option and the inactive ones look similar, guests lose track of which menu they are reading.

The light/dark choice reaches further than you think

Several layouts adapt their card backgrounds, shadows and overlays to whether the site background is light or dark. Switching after the menus are built changes more than the background color, so check every layout afterwards.

Colors in the PDF

The printable menu has its own color settings, per menu type, chosen as explicit values rather than palette slots: category heading color, item heading color and item text color.

They do not inherit from the site palette, so a printed menu can diverge from the digital one unless you set them to match. See Typography and colors in the PDF.

Check it

• [ ] Text is legible on the background, on a phone, in the room's real lighting.
• [ ] Prices are as legible as the dish names.
• [ ] The active category and the active dock option are unmistakable.
• [ ] Allergen icons are visible against the background.
• [ ] Buttons are recognizable as buttons.
• [ ] Every menu type looks like the same restaurant.
• [ ] The PDF colors are deliberate, not left at their defaults by accident.