From ae81986c7dfde6cb66801d1f0e2e523fe80d163d Mon Sep 17 00:00:00 2001 From: Ava Date: Wed, 25 Mar 2026 17:34:41 +0000 Subject: [PATCH] =?UTF-8?q?Add=20Grubflip=20design=20system=20v2.0=20?= =?UTF-8?q?=E2=80=94=20brand=20tokens=20+=20component=20styles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Full design token file with colors, typography, spacing, shadows, breakpoints, animation, z-index, and component-level specs for: buttons, cards, inputs, badges, navbar, sidebar, tables, modals, toasts, avatars, menus, chips, ratings, and price tags. Co-Authored-By: Claude Opus 4.6 (1M context) --- grubflip/design-system/brand-tokens.json | 355 ++++++ .../design-system/grubflip-design-system.html | 1079 +++++++++++++++++ 2 files changed, 1434 insertions(+) create mode 100644 grubflip/design-system/brand-tokens.json create mode 100644 grubflip/design-system/grubflip-design-system.html diff --git a/grubflip/design-system/brand-tokens.json b/grubflip/design-system/brand-tokens.json new file mode 100644 index 0000000..2367a8f --- /dev/null +++ b/grubflip/design-system/brand-tokens.json @@ -0,0 +1,355 @@ +{ + "brand": "Grubflip", + "version": "2.0.0", + "created": "2026-03-25", + "updated": "2026-03-25", + "author": "Ava (Designer)", + + "colors": { + "primary": { + "base": "#FF6B35", + "light": "#FF8F66", + "dark": "#D94E1F", + "bg": "#FFF3ED", + "description": "Warm orange — appetite, energy, action" + }, + "secondary": { + "base": "#2D6A4F", + "light": "#40916C", + "dark": "#1B4332", + "bg": "#EDF5F0", + "description": "Deep green — fresh food, trust, growth" + }, + "accent": { + "base": "#FFBA08", + "light": "#FFD166", + "dark": "#E0A100", + "bg": "#FFF8E1", + "description": "Golden yellow — highlight, badges, stars" + }, + "semantic": { + "success": { "base": "#2ECC71", "bg": "#EAFAF1" }, + "warning": { "base": "#F39C12", "bg": "#FEF5E7" }, + "error": { "base": "#E74C3C", "bg": "#FDEDEC" }, + "info": { "base": "#3498DB", "bg": "#EBF5FB" } + }, + "neutrals": { + "50": "#FAFAFA", + "100": "#F5F5F5", + "200": "#E5E5E5", + "300": "#D4D4D4", + "400": "#A3A3A3", + "500": "#737373", + "600": "#525252", + "700": "#404040", + "800": "#262626", + "900": "#171717" + }, + "background": { + "default": "#FFFFFF", + "subtle": "#FAFAFA", + "muted": "#F5F5F5", + "dark": "#1A1A2E" + } + }, + + "typography": { + "fontFamily": { + "heading": "'Plus Jakarta Sans', sans-serif", + "body": "'Inter', sans-serif", + "mono": "'JetBrains Mono', monospace" + }, + "scale": { + "xs": { "size": "0.75rem", "lineHeight": "1rem" }, + "sm": { "size": "0.875rem", "lineHeight": "1.25rem" }, + "base": { "size": "1rem", "lineHeight": "1.5rem" }, + "lg": { "size": "1.125rem", "lineHeight": "1.75rem" }, + "xl": { "size": "1.25rem", "lineHeight": "1.75rem" }, + "2xl": { "size": "1.5rem", "lineHeight": "2rem" }, + "3xl": { "size": "1.875rem", "lineHeight": "2.25rem" }, + "4xl": { "size": "2.25rem", "lineHeight": "2.5rem" }, + "5xl": { "size": "3rem", "lineHeight": "1" } + }, + "weight": { + "regular": 400, + "medium": 500, + "semibold": 600, + "bold": 700, + "extrabold": 800 + } + }, + + "spacing": { + "unit": "0.25rem", + "scale": { + "0": "0", "1": "0.25rem", "2": "0.5rem", "3": "0.75rem", + "4": "1rem", "5": "1.25rem", "6": "1.5rem", "8": "2rem", + "10": "2.5rem", "12": "3rem", "16": "4rem", "20": "5rem", + "24": "6rem" + } + }, + + "borderRadius": { + "sm": "0.375rem", + "md": "0.5rem", + "lg": "0.75rem", + "xl": "1rem", + "2xl": "1.5rem", + "full": "9999px" + }, + + "shadows": { + "sm": "0 1px 2px rgba(0,0,0,0.05)", + "md": "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)", + "lg": "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)", + "xl": "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)", + "card": "0 2px 8px rgba(0,0,0,0.08)" + }, + + "components": { + "button": { + "primary": { + "bg": "#FF6B35", + "text": "#FFFFFF", + "hoverBg": "#D94E1F", + "activeBg": "#B8421A", + "disabledBg": "#FFB899", + "disabledText": "#FFFFFF", + "borderRadius": "0.5rem", + "paddingX": "1.5rem", + "paddingY": "0.75rem", + "fontSize": "1rem", + "fontWeight": 600, + "transition": "all 0.2s ease" + }, + "secondary": { + "bg": "transparent", + "text": "#FF6B35", + "border": "2px solid #FF6B35", + "hoverBg": "#FFF3ED", + "hoverText": "#D94E1F", + "hoverBorder": "#D94E1F", + "borderRadius": "0.5rem", + "paddingX": "1.5rem", + "paddingY": "0.75rem", + "fontSize": "1rem", + "fontWeight": 600 + }, + "ghost": { + "bg": "transparent", + "text": "#737373", + "hoverBg": "#F5F5F5", + "hoverText": "#404040", + "borderRadius": "0.5rem", + "paddingX": "1rem", + "paddingY": "0.5rem", + "fontSize": "0.875rem", + "fontWeight": 500 + }, + "sizes": { + "sm": { "paddingX": "1rem", "paddingY": "0.5rem", "fontSize": "0.875rem" }, + "md": { "paddingX": "1.5rem", "paddingY": "0.75rem", "fontSize": "1rem" }, + "lg": { "paddingX": "2rem", "paddingY": "1rem", "fontSize": "1.125rem" } + } + }, + + "card": { + "bg": "#FFFFFF", + "borderRadius": "0.75rem", + "shadow": "0 2px 8px rgba(0,0,0,0.08)", + "hoverShadow": "0 4px 12px rgba(0,0,0,0.12)", + "padding": "1.5rem", + "border": "1px solid #E5E5E5", + "transition": "box-shadow 0.2s ease" + }, + + "input": { + "bg": "#FFFFFF", + "text": "#262626", + "placeholder": "#A3A3A3", + "border": "1px solid #D4D4D4", + "focusBorder": "#FF6B35", + "focusRing": "0 0 0 3px rgba(255,107,53,0.15)", + "errorBorder": "#E74C3C", + "errorRing": "0 0 0 3px rgba(231,76,60,0.15)", + "borderRadius": "0.5rem", + "paddingX": "1rem", + "paddingY": "0.75rem", + "fontSize": "1rem", + "lineHeight": "1.5", + "transition": "border-color 0.2s ease, box-shadow 0.2s ease" + }, + + "badge": { + "variants": { + "default": { "bg": "#F5F5F5", "text": "#525252" }, + "primary": { "bg": "#FFF3ED", "text": "#D94E1F" }, + "success": { "bg": "#EAFAF1", "text": "#1B8A4A" }, + "warning": { "bg": "#FEF5E7", "text": "#B87A0D" }, + "error": { "bg": "#FDEDEC", "text": "#C0392B" }, + "info": { "bg": "#EBF5FB", "text": "#2471A3" }, + "accent": { "bg": "#FFF8E1", "text": "#B8860B" } + }, + "borderRadius": "9999px", + "paddingX": "0.75rem", + "paddingY": "0.25rem", + "fontSize": "0.75rem", + "fontWeight": 600, + "textTransform": "uppercase", + "letterSpacing": "0.05em" + }, + + "navbar": { + "bg": "#FFFFFF", + "height": "4rem", + "shadow": "0 1px 3px rgba(0,0,0,0.08)", + "linkColor": "#525252", + "linkHover": "#FF6B35", + "linkActive": "#FF6B35", + "linkFontWeight": 500, + "logoHeight": "2rem" + }, + + "sidebar": { + "bg": "#1A1A2E", + "width": "16rem", + "collapsedWidth": "4.5rem", + "textColor": "#D4D4D4", + "activeItemBg": "rgba(255,107,53,0.15)", + "activeItemText": "#FF6B35", + "hoverItemBg": "rgba(255,255,255,0.05)", + "sectionTitleColor": "#737373", + "sectionTitleSize": "0.75rem" + }, + + "table": { + "headerBg": "#F5F5F5", + "headerText": "#525252", + "headerFontWeight": 600, + "headerFontSize": "0.75rem", + "headerTextTransform": "uppercase", + "headerLetterSpacing": "0.05em", + "rowBg": "#FFFFFF", + "rowAltBg": "#FAFAFA", + "rowHoverBg": "#FFF3ED", + "cellPadding": "0.75rem 1rem", + "borderColor": "#E5E5E5", + "fontSize": "0.875rem" + }, + + "modal": { + "overlayBg": "rgba(0,0,0,0.5)", + "bg": "#FFFFFF", + "borderRadius": "1rem", + "shadow": "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)", + "padding": "2rem", + "maxWidth": "32rem", + "headerFontSize": "1.25rem", + "headerFontWeight": 700 + }, + + "toast": { + "borderRadius": "0.5rem", + "shadow": "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)", + "padding": "1rem 1.5rem", + "maxWidth": "24rem", + "fontSize": "0.875rem", + "variants": { + "success": { "bg": "#EAFAF1", "border": "1px solid #2ECC71", "icon": "✓" }, + "error": { "bg": "#FDEDEC", "border": "1px solid #E74C3C", "icon": "✕" }, + "warning": { "bg": "#FEF5E7", "border": "1px solid #F39C12", "icon": "⚠" }, + "info": { "bg": "#EBF5FB", "border": "1px solid #3498DB", "icon": "ℹ" } + } + }, + + "avatar": { + "sizes": { + "xs": "1.5rem", + "sm": "2rem", + "md": "2.5rem", + "lg": "3.5rem", + "xl": "5rem" + }, + "borderRadius": "9999px", + "fallbackBg": "#FF6B35", + "fallbackText": "#FFFFFF", + "fallbackFontWeight": 600 + }, + + "menuItem": { + "bg": "#FFFFFF", + "hoverBg": "#FFF3ED", + "activeBg": "#FFE5D6", + "text": "#262626", + "secondaryText": "#737373", + "padding": "0.75rem 1rem", + "borderRadius": "0.375rem", + "fontSize": "0.875rem", + "iconSize": "1.25rem", + "iconColor": "#737373" + }, + + "chip": { + "bg": "#F5F5F5", + "text": "#525252", + "selectedBg": "#FF6B35", + "selectedText": "#FFFFFF", + "borderRadius": "9999px", + "paddingX": "0.75rem", + "paddingY": "0.375rem", + "fontSize": "0.875rem", + "fontWeight": 500, + "gap": "0.5rem" + }, + + "rating": { + "starSize": "1.25rem", + "filledColor": "#FFBA08", + "emptyColor": "#D4D4D4", + "gap": "0.125rem" + }, + + "priceTag": { + "fontSize": "1.25rem", + "fontWeight": 700, + "color": "#2D6A4F", + "strikethroughColor": "#A3A3A3", + "discountBg": "#FDEDEC", + "discountText": "#E74C3C", + "discountFontSize": "0.75rem" + } + }, + + "breakpoints": { + "sm": "640px", + "md": "768px", + "lg": "1024px", + "xl": "1280px", + "2xl": "1536px" + }, + + "animation": { + "duration": { + "fast": "150ms", + "normal": "200ms", + "slow": "300ms" + }, + "easing": { + "default": "cubic-bezier(0.4, 0, 0.2, 1)", + "in": "cubic-bezier(0.4, 0, 1, 1)", + "out": "cubic-bezier(0, 0, 0.2, 1)", + "bounce": "cubic-bezier(0.34, 1.56, 0.64, 1)" + } + }, + + "zIndex": { + "dropdown": 1000, + "sticky": 1020, + "fixed": 1030, + "modalBackdrop": 1040, + "modal": 1050, + "popover": 1060, + "tooltip": 1070, + "toast": 1080 + } +} diff --git a/grubflip/design-system/grubflip-design-system.html b/grubflip/design-system/grubflip-design-system.html new file mode 100644 index 0000000..8b8f9ea --- /dev/null +++ b/grubflip/design-system/grubflip-design-system.html @@ -0,0 +1,1079 @@ + + + + + +Grubflip Design System v1.0 + + + + + + + +
+

+ + + + + + + + Grubflip + +

+

Design System v1.0 — Brand, Components & Guidelines

+

Created by Ava · March 25, 2026

+
+ +
+ + +
+

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
+
+ + +
What did you make today?
+
+
+ + +
+
+
+
Error State
+
+ + +
Meal name is required
+
+
+ + +
+
+
+
+ + +
+

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 */ +
+
+ +
+ + +
+ Grubflip Design System v1.0 · Ava · March 2026
+ Part of the Payfrit product family +
+ + +