June 25, 2026

Our design system — Feast Hall

title: "Our design system — Feast Hall" description: "How we picked Spectral + Hanken Grotesk + DM Mono, gold candlelight over fitness-app neon, and warm photography." date: "2026-06-25" author: "The Bragi team" tags: ["design", "build-notes"]

The first decision we made for Bragi's brand was the one most calorie apps get wrong: don't look like one. The category default is bright greens, shouting numbers, and gym imagery. Food is none of those things.

We rebuilt the whole brand around one image: a feast hall at night, lit by candlelight, where good meals find good people. The system is called Feast Hall.

Palette

We use six colours with intent:

• Gold (#E7AE48) — candlelight. The brand mark, the primary CTA, every celebration moment. Never the background.
• Pine (#15251F) — the feast hall at night. The immersive ground: the streak hero, the cook-mode timer, the log/camera screen, the dark tab bar.
• Bone (#ECE7D8) — the reading paper. Home feed, recipe body, settings, anything you sit and read. Never pure white.
• Fern (#5FA873) — alive. Fresh, healthy, community, success.
• Berry (#D85F73) — appetite pop. AI sparks, emphasis, the "now" marker. Errors too — we ban red app-wide because nutrition shouldn't feel alarming.
• Ink (#16241E) — body text on bone.

Two layers, not just light/dark mode: the raw palette stays static and the app mixes pine-ink immersive surfaces next to bone reading surfaces on the same screen. Most screens have both.

Typography

• Spectral for display — the host's voice. Warm serif, italic for first-person moments ("Pull up a chair, Sam.").
• Hanken Grotesk for body — every UI label, every button, sentence case.
• DM Mono for numerals — calories, macros, timers. Receipt feel, not dashboard feel.

Headlines use Spectral at tight letter-spacing because the goal is "magazine spread" not "lab report."

Photography

The non-negotiable: no AI-generated marketing images. People can tell. Bragi commissions real food photography from collaborators in Yerevan, Lyon and Brooklyn. Overhead, natural light, soft shadows.

Motion

• Web: Framer Motion. Page transitions fade + rise 8px, 220ms. No bounce — we explicitly avoid springy/playful motion. The brand is warm, not playful.
• Mobile: Reanimated 3. Same vocabulary, native timing.
• Haptics: light on taps, medium on log-meal, heavy on hit-daily-goal.
• Everything wrapped in useReducedMotion/AccessibilityInfo.

Voice

Bragi speaks like a warm host. "Plenty of room left for a real dinner." "The table's set. Add your first meal." "320 over today's goal. Tomorrow's a new day." Never punishing. Sentence case, plain verbs, body-neutral.

You can browse the full tokens at our open-source design package, @bragi/design-tokens. The light + dark CSS variables are there for anyone building Bragi clients.