ClarityMenu | Editorial Digital Menus

Color Palette

Strictly limited palette, used with intent.

#FAF7F2

Background

#FFFFFF

Surface (Card)

#1A1A1A

Ink (Primary)

#5C5C5C

Ink (Secondary)

#8A8A8A

Ink (Tertiary)

#10B981

Emerald Green (Accent)

#2F7D5B

Success

#EDE8E0

Border

Typography

Fraunces for headings, Inter for UI, JetBrains Mono for data.

Display (Fraunces)

text-7xl (72px)

Your menu. Smarter.

text-4xl (36px)

Experience the menu.

text-2xl (24px)

Crispy Calamari

Body (Inter)

text-[17px] leading-[1.6] max-w-[62ch]

Transform your restaurant’s physical menu into an elegant digital experience. Handcrafted aesthetics, designed to suggest the perfect pairings. We care about the details.

text-sm

Mono (JetBrains)

text-sm tabular-nums

£ 24.50£ 138.00£ 9.95

Components

Restyled shadcn elements. No rounded-full pills, flat by default.

Buttons

Inputs

Default Input

Disabled Input

Focus an input to see the 2px emerald green ring.

Cards

Flat Editorial Card

Hover over this card to see the border darken.

Cards are flat by default with a 1px #EDE8E0 border. They do not have drop shadows unless they are interactive lifted elements like modals.

Motion

Subtle, physics-based, purposeful. Easing: [0.22, 1, 0.36, 1]

Entrance Animation

Hover state transitions are quick (150ms) and affect color, never scale transforms.

Interactive Row