Section 01
Brand overview
Supy's positioning, purpose, and target audience at a glance.
Positioning
Intelligent by design · Data-driven yet human · Dependable operational partner for hospitality
Purpose
Empower hospitality teams with AI-powered insights that reduce waste, increase profitability, and simplify daily operations.
Platform
AI-powered SaaS for hospitality and food-service — covering purchasing, inventory, recipes, and performance analytics.
Target audience
Restaurant owners
Operators and multi-site groups seeking scalable control.
Finance managers
Procurement and finance professionals managing cost and suppliers.
Kitchen managers
Operations leads handling inventory and recipes daily.
Section 02
Logo
Usage rules, clear space, and approved formats for the Supy wordmark.
On light backgrounds
On dark backgrounds
✓ Do
- Use the purple wordmark on white or light neutral backgrounds
- Use the white wordmark on dark purple (#321e57 or #503390) backgrounds
- Maintain a minimum clear space equal to the height of the "S" around the logo
- Always use provided SVG or approved PNG assets
- Minimum display size: 80px wide
✕ Don't
- Stretch, rotate, or distort the wordmark
- Apply a drop shadow or outline effects
- Place on busy photographic backgrounds without a clear contrast layer
- Recreate the wordmark in any other typeface
- Use a grayscale or off-brand color version
Section 03
Color system
Click any swatch to copy its hex value to clipboard.
Primary
Dark Purple
Logo Purple
Bright Purple
Light Purple
Secondary
Yellow
Green
Blue
Orange
Red
Monochrome
Light Grey
Dark
White
Section 04
Typography
Noto Sans is the primary typeface for all English copy. Noto Kufi Arabic for RTL.
Import: Noto Sans (weights 300, 400, 500, 600, 700) via Google Fonts · Arabic: Noto Kufi Arabic · Monospace: SF Mono / Fira Code
Type scale
AI powered inventory software for multi-site restaurants
AI powered inventory software for multi-site restaurants
AI powered inventory software for multi-site restaurants
AI powered inventory software for multi-site restaurants
AI powered inventory software for multi-site restaurants
AI powered inventory software for multi-site restaurants
AI powered inventory software for multi-site restaurants
$2,171,123.88 · 22.89%
Case rules
- ✓ Sentence case for all body, UI labels, headings
- ✓ Title Case for formal document titles only
- ✓ Always write "Supy" — capital S, lowercase rest
- ✕ Avoid ALL CAPS in running text or UI
- ✕ Avoid italics in UI or marketing copy
Fallback stack
/* English */
font-family: 'Noto Sans', -apple-system,
BlinkMacSystemFont, sans-serif;
/* Arabic */
font-family: 'Noto Kufi Arabic', sans-serif;
/* Monospace / data */
font-family: 'SF Mono', 'Fira Code', mono;
font-family: 'Noto Sans', -apple-system,
BlinkMacSystemFont, sans-serif;
/* Arabic */
font-family: 'Noto Kufi Arabic', sans-serif;
/* Monospace / data */
font-family: 'SF Mono', 'Fira Code', mono;
Section 05
Voice & tone
Clear, confident, and reassuring — never complex, loud, or sales-driven.
Clear and concise
Avoid unnecessary words. Every sentence should add value. Readers are time-poor — respect that.
Calm and confident
Sound authoritative without being aggressive. Supy helps teams feel in control, not pressured.
Supportive and human
Focus on outcomes, not features. Use language that operators actually use in their daily work.
Full messaging — by language
EN
Inventory · Procurement · AI Forecasting · Business Intelligence
AI-powered inventory for multi-site restaurants
Trusted by 3,500+ restaurants in 40+ countries
Book a demo
DE
Warenwirtschaft · Einkauf · KI-Prognosen · Business Intelligence
KI-gestützte Warenwirtschaft für Restaurants mit mehreren Standorten
Im Einsatz in über 3.500 Restaurants in mehr als 40 Ländern
Demo buchen
FR
Gestion des stocks · Approvisionnement · Prévision par IA · Pilotage des coûts
Logiciel de gestion des stocks propulsé par l'IA pour les restaurants multi-sites
Adopté par plus de 3 500 restaurants dans plus de 40 pays
Réservez une démo
粵
餐飲庫存管理 · 採購 · AI 預測 · 商業智能
專為 2+ 門市打造的AI 智能庫存系統
全球 40+ 國家、超過 3,500 家餐廳的一致信賴
預約系统演示
AR
إدارة المخزون · المشتريات · التنبؤ المدعوم بالذكاء الاصطناعي · الاستخبارات الاستراتيجية
برنامج إدارة المخزون المدعوم بالذكاء الاصطناعي للمطاعم متعددة الفروع
معتمد من قبل أكثر من 3500 مطعم في أكثر من 40 دولة
احجز عرضاً تجريبياً
Word bank — use ✓ / avoid ✕
Use these words
controlvisibilitystreamlinereduce wastereal-timeinsightsaccuracyefficientempower
Avoid these
revolutionarydisruptivegame-changerseamlesssynergyleveragecutting-edge
Section 06
Product imagery guidelines
Rules for creating and selecting product screenshots used on supy.io and in all marketing materials.
Reference UI example
Bistro Bruce
London
Review Orders
Smithfield Branch
$2,101.50
Edit Order
Confirm Order
Soho Branch
$1,245.50
Delivered
Generate Delivery Note
1
Always use authentic, industry-relevant data
Populate every screenshot with real-looking F&B data — restaurant names, supplier names, realistic order amounts, and inventory counts. Never use "Lorem ipsum", "Test User", or placeholder values. Data should read like a real operator's day.
✓ Bistro Bruce · London · $2,101.50
✕ Company ABC · $0.00 · Test
2
Show positive, active states — never empty or error states
Marketing imagery must show the product at its best. Use states that communicate value: filled tables, confirmed orders, delivered items, healthy food cost percentages. Avoid empty tables, error messages, warning toasts, or loading spinners.
✓ Delivered · Posted · Approved
✕ No data found · Error 500 · Loading…
3
Use the dot status system — no pill badges for statuses
The canonical status indicator is a small colored dot followed by the label in normal text — no background fill, no border, no pill shape. This keeps the UI data-dense and lets the dot carry all the colorimetric meaning.
Delivered
✓ Use this
Delivered
✕ Avoid
4
Background must be
#f4f1fa or white — never custom colorsThe app background is always the Supy light purple
#f4f1fa. When screenshotting for marketing use this exact background. For hero images on white pages, screenshots may sit on white with a subtle shadow. Never add custom gradients or dark overlays behind the UI.5
Primary CTA buttons must be visible and correctly coloured
Whenever a primary action button appears in a screenshot, it must use
#503390 fill with white label. Secondary actions use a light purple fill with purple text. Disabled or greyed-out states must not be the focus of the shot.Generate Delivery Note
Edit Order
Confirm Order
6
Crop to the feature — remove browser chrome unless context requires it
Prefer tight crops that isolate the feature being demonstrated. Omit browser address bars, OS toolbars, and unrelated navigation unless the crop is explicitly showing navigation context. A browser frame may be added only when the full-page scope is the point.
7
Show multi-location context where possible
Supy's core value is managing multiple branches from one place. Screenshots should ideally show 2–4 locations in a list or table to reinforce this. Single-branch views are only appropriate for deep-dive feature shots (e.g. an individual order detail).
✓ Smithfield Branch · Soho Branch · City Branch
✕ Single generic "Branch 1"
8
Apply a subtle drop shadow — never harsh or coloured shadows
When placing a UI screenshot on a white or light background, apply a single soft shadow:
0 4px 24px rgba(50,30,87,0.10). Rounded corners on the container should match the card radius: 12px. No coloured glows or harsh drop shadows.9
Export at 2× resolution — minimum 1440px wide for hero images
All product screenshots must be exported at 2× (retina) resolution. Hero banner images: minimum 2880 × 1800px. Feature card images: minimum 1200 × 800px. Save as PNG for screenshots with UI text; WebP for web delivery. JPEG is not acceptable for UI imagery.
✓ PNG · WebP · 2×
✕ JPEG · 1× · compressed
10
Never expose real customer data
All data visible in published imagery must be fictional but believable. Replace real supplier names, invoice numbers, email addresses, and phone numbers with invented F&B-appropriate equivalents before any screenshot is used externally. Use the demo environment or a sanitised staging account.
Section 07
Buttons & tables
Core interactive components and data display patterns used across the Supy product.
Table formatting
Header row uses
#f4f1fa background with all-caps 10–11px labels. Data rows alternate on hover with #faf9fe. Row height 36–40px. Dividers use #e8e0f5.Header bg —
#f4f1faRow divider —
#e8e0f5Hover row —
#faf9feStatus — dot + label, no pill
Numbers — monospace, right-aligned
Status dot
A small coloured dot followed by the status label in normal foreground colour — no pill, no fill, no border. The dot does all the colorimetric work.
Section 08
Events branding
Visual system for trade shows, conferences, and event social cards — built on the Supy decorative wave pattern in brand secondary colours.
Event colour palette
Wave & accent
Teal
#40c798
Yellow
#fcd34d
Logo Purple
#503390
Blue
#109ae7
Dark Teal
#0ea87a
Background Shades
Dark Purple
#321e57
Logo Purple
#503390
Bright Purple
#7b51bf
Do's and don'ts
✓ Do
- Use the deep purple gradient as the base background on all event cards
- Keep all 5 wave colours in their fixed order (teal → yellow → purple → blue → dark teal)
- Use the white Supy wordmark — never purple or dark on dark backgrounds
- Place the person photo in an arch (rounded-top rectangle) frame anchored to the bottom
- Overlay venue photography at 15–25% opacity only — background must remain legible
✕ Don't
- Use the wave pattern on a white or light background — it's designed for dark purple only
- Place wave elements over the subject's face or key headline text
- Swap, remove, or reorder wave colours — the 5-colour sequence is fixed
- Use more than one photo on a single event card
- Reproduce event cards without the Supy logo and event badge present
Section 09
Asset downloads
Upload brand assets for your team, or download the official Supy brand kit.
Brand Asset Library
Everything your team
needs to build on-brand
Logos, templates, color palettes, icon sets and more — all in one place.
Brand assets — Google Drive
SVG · PNG
Logo
All official logo files — white, purple, and favicon variants across SVG and PNG.
TTF · OTF
Font
Noto Sans font files — all weights and styles for English and Arabic.
PNG
Backgrounds
Branded background patterns and textures for presentations and digital use.
PNG
Virtual BG
Branded virtual backgrounds for video calls, webinars, and team meetings.
Skill
Claude Skills
Saved Claude AI skill files and prompt templates used across the Supy team.
PNG
LinkedIn Cover Photos
Branded LinkedIn profile and cover banner images sized for the Supy team.
JPG · PNG
Profile Pic
Official team profile pictures for use across LinkedIn, email signatures, and internal directories.
PPTX · PDF
Sales Presentation
Sales deck templates and pitch presentations for client and prospect meetings.
PDF
One Pager
Concise one-page overview of Supy for sales outreach and investor introductions.
PPTX
Presentation Templates
On-brand slide decks for sales, investor, and internal presentations.
JPG
Founder Pictures
Official founder and leadership photos for press, bios, and speaking engagements.
PNG
Product Imagery
High-resolution product screenshots cleared for marketing, sales, and documentation.
MP4
Product Animations
Motion assets and animated product demos for marketing and presentations.
PNG
Client Testimonials
Approved customer quote cards and testimonial graphics for social and sales use.
PNG
Images of Website
Website design assets, screenshots, and web-ready export files.
PDF
Business Card
Print-ready business card design files for the Supy team.
AI
T-shirt Design
Branded merchandise design files for Supy team apparel.
HTML
Email Signature
On-brand HTML email signature templates for the Supy team.