Grubflip Design System v1.0

Brand Identity

Grubflip is meal trading for restaurant workers. The brand should feel warm, energetic, and peer-to-peer. Think food truck meets modern fintech. Approachable and fun, but trustworthy enough to handle trades.

Grubflip

Swap meals. Skip the line.

Voice

Casual, friendly, a little playful. We're kitchen people, not corporate.

Feel

Warm but clean. More farmer's market than fast food. Fresh, trusted, community.

Not

Not stuffy. Not corporate. Not cluttered. Not another food delivery app aesthetic.

Color Palette

Three-color system: warm orange for action/CTA, deep green for trust/balance, golden yellow for highlights and rewards.

Core Colors

#FF6B35

Primary — Warm Orange --gf-primary: #FF6B35

#2D6A4F

Secondary — Deep Green --gf-secondary: #2D6A4F

#FFBA08

Accent — Golden Yellow --gf-accent: #FFBA08

Semantic Colors

Success

Success#2ECC71

Warning

Warning#F39C12

Error

Error#E74C3C

Info

Info#3498DB

Neutral Scale

50

100

200

300

400

500

600

700

800

900

Typography

Headings: Plus Jakarta Sans (geometric, warm, modern). Body: Inter (clean, highly legible, great for UI). Both free via Google Fonts.

Display / Hero — 3rem / 800

Swap meals with your crew

Plus Jakarta Sans · 48px · Extra Bold · -0.03em tracking

H1 — 2.25rem / 700

Today's available meals

Plus Jakarta Sans · 36px · Bold

H2 — 1.5rem / 700

Your active trades

Plus Jakarta Sans · 24px · Bold

H3 — 1.125rem / 600

Grilled chicken bowl — posted 2h ago

Plus Jakarta Sans · 18px · Semibold

Body — 1rem / 400

Post your staff meal, browse what others have, and flip trades with people at nearby restaurants. No money changes hands — just good food swapping between kitchen workers who get it.

Inter · 16px · Regular · 1.6 line-height

Small / Caption — 0.813rem / 500

Posted by Marcus K. · 0.3 mi away · Expires in 4h

Inter · 13px · Medium

Spacing Scale

4px base unit. Consistent spacing creates rhythm and polish across all screens.

--gf-space-1 (4px)

--gf-space-2 (8px)

--gf-space-3 (12px)

--gf-space-4 (16px)

--gf-space-6 (24px)

--gf-space-8 (32px)

--gf-space-10 (40px)

--gf-space-12 (48px)

--gf-space-16 (64px)

--gf-space-20 (80px)

Buttons

Rounded corners (0.75rem), bold weight. Primary orange for main CTAs, green for confirmations, outline for secondary actions.

Variants

Sizes

States

Form Inputs

Clean, spacious inputs. Orange focus ring to match primary brand. Error state uses red with tinted background.

Text Input

Meal name

What did you make today?

Description

Error State

Meal name

Meal name is required

Location

Cards

Cards are the primary content container. Meal cards are the hero component — they need to look appetizing and scannable.

Available

Grilled Chicken Bowl

Posted 2h ago · 0.3 mi away

Gluten-free High protein

Rice, grilled chicken, roasted veggies, chimichurri. Made fresh tonight — staff meal from the dinner service.

MK

Marcus K.

Pending

Spicy Pork Tacos (x3)

Posted 45m ago · 0.1 mi away

Spicy Pork

Three tacos with house-made salsa verde, pickled onions, and cotija. Corn tortillas from this morning.

JR

Jamie R.

Generic Content Card

For non-meal content: profiles, settings, info

Use this base card style for any boxed content that isn't a meal listing. Same radius, shadow, and hover treatment — just no image or badge.

Tags & Badges

Use tags for dietary info, cuisine type, and meal attributes. Pill-shaped, tinted backgrounds.

High protein Vegetarian Gluten-free Spicy Pork Seafood Vegan Chef's Pick Dairy-free

Alerts

Contextual feedback. Left border accent for quick scanning.

Trade confirmed! Meet Marcus at Blue Line Kitchen in 30 minutes.

New match: Someone nearby wants to trade for your chicken bowl.

Heads up: Your posted meal expires in 1 hour.

Trade cancelled. The other person withdrew their offer.

Avatars

Initials-based by default. Three sizes for different contexts.

A

MK

JR

TS

Navigation

Desktop top bar + mobile bottom tab bar. Keep it minimal — Grubflip has only a few core screens.

Desktop Nav Bar

Mobile Tab Bar (390px)

Feed Trades Post Chat Profile

Design Guidelines

Rules of the road for anyone building Grubflip UI.

DO

Use generous whitespace between cards
Keep meal images or emoji large and appetizing
Use orange for primary CTAs only
Use green for confirmation/success states
Round corners (0.75rem+) for friendly feel
Mobile-first — design 390px screens first

DON'T

Use red/orange for non-interactive elements
Cram content — this isn't a data dashboard
Use more than 2 font weights per section
Mix Payfrit teal with Grubflip orange
Hard shadows — keep everything soft
Tiny text — minimum 13px for body copy

Token Reference

All CSS custom properties use the --gf- prefix. JSON tokens available at brand-tokens.json for native app integration.

      /* Import in your CSS */

      --gf-primary: #FF6B35;

      --gf-secondary: #2D6A4F;

      --gf-accent: #FFBA08;

      --gf-font-heading: 'Plus Jakarta Sans';

      --gf-font-body: 'Inter';

      /* Kotlin/Swift: use brand-tokens.json */

      /* colors.primary.base → #FF6B35 */

      /* colors.secondary.base → #2D6A4F */