# Rescube brand rules for AI tools and developers

Read this before you design or build anything for Rescube: a web page, an app screen, an email, a deck, a social post or print. Follow it unless the person asking says otherwise. The full brand guide lives in the Rescube Figma file (pages "Brand guide", "Offline brand guide" and "Packaging").

## Who we are

Rescube makes chef-made frozen dinners from rescued ingredients, cooked in Dubai and ready in 7 minutes in a pan. Every 450 g bag rescues about 150 g of food that would otherwise be wasted. Rescube.ae is the UAE business today; Rescube.com is the plan to take it global.

The feeling: fresh, confident, a little cheeky, honest about food. Never corporate, never preachy about waste.

## Colour

Use these exact values. On the web they exist as CSS variables.

| Name | Hex | CSS variable | Use for |
|---|---|---|---|
| Green | `#59D165` | `--color-green` | The loud moment: main buttons, the hero, a badge. One green moment per screen. |
| Deep green | `#178622` | `--color-green-deep` | Hover states, links, savings, small green text on white |
| Forest | `#183B21` | `--color-forest` | Heritage dark green: print, packaging seal bands, stands, merch. A warmer dark surface than black. |
| Black | `#000000` | `--color-ink` | Text, dark bands, claim pills, the pricing band |
| White | `#FFFFFF` | `--color-paper` | Page background, cards, photo borders |
| Frost | `#EEF5EF` | `--color-frost` | Quiet surfaces and panels |
| Soft green | `#DFF5E1` | `--color-green-soft` | Selected states, tags, the rescue chip |
| Line | `#DFE7E0` | `--color-line` | Borders and dividers |
| Muted | `#56615A` | `--color-muted` | Secondary text |

Rough balance on a page: mostly white, then green, then black, a little frost. On screens black is the default dark; Forest is mainly for print and packaging.

Text on Green or on bag colours is Black. On Black or Forest use White or Green. Never put Black text on Forest.

### Bag colours

Every meal has its own bag colour, taken from the packaging. Use it only as a small accent tied to that meal: a stripe under its photo, a dot in a list, the little bags that fill the box. Never as a page background and never for text.

Butter Chicken `#D8A83C`, Spaghetti Bolognese `#E46060`, Chicken Fried Rice `#D8B49C`, Chicken Pesto Pasta `#C0F0A8`, Asian Stir Fried Beef `#C0606C`, Keto range `#B49C84`, Lamb Stew `#248490`, Vegan range `#189054`, Sweet & Sour Chicken `#786090`, Tikka Masala `#E4CC54`. The live value for each meal comes from Shopify (`bagColor` on the meal).

## Type

| Role | Font | Style |
|---|---|---|
| Headlines, buttons, prices, big numbers | Barlow Condensed | ExtraBold or Bold, UPPER CASE, line height about 0.9, tight letter spacing |
| Body, labels, forms | Inter | Regular 16 px on the web, Semi Bold for emphasis, line height about 1.5 |
| Arabic headlines | Noto Kufi Arabic | 600 to 700, line height 1.3, no letter spacing |
| Arabic body | IBM Plex Sans Arabic | 400 and 600 |

Rules:
- A headline is at least 3 times the body size. Let size and space create hierarchy, not boxes and lines.
- Never Barlow Condensed for long text. Never Inter in capitals for headlines.
- Arabic is right aligned and mirrors the layout (use `dir="rtl"`). Arabic headlines get more line height than English ones.
- Print minimums: headlines 14 pt, body 9 pt, legal text 7 pt.

## Logo

- The wordmark is lower-case "rescube". Files: `headless/public/logo-green.svg` and `logo-white.svg`. Never retype it in a font.
- Green logo on Black, Forest or White. Black logo on Green or any bag colour. White logo on photos only with a dark band behind it.
- The app icon and favicon are the "r" alone. The app icon is a white "r." on Green.
- Clear space around the logo: at least the height of the letter r. Minimum 25 mm wide in print.
- Never stretch, outline, add shadows, rotate or recolour the logo outside the colours above.

## Shapes and signature elements

- **Corners:** cards 20 px, photos and pouches 24 px, buttons and pills fully round (999 px). Never sharp corners on cards.
- **Spacing:** 8 px grid only (8, 16, 24, 32, 48, 64, 96, 128). Web sections 96 to 128 px apart. Max content width 1200 px.
- **Buttons:** pill shaped, at least 52 px tall, Barlow Condensed upper case. Primary is Green with Black text (hover Deep green with White). Dark is Black with White text. Ghost is a 2 px Black outline.
- **The seal (crimp edge):** the zigzag heat-seal of our bags, 7 px teeth every 14 px, where a colour band meets the page. Use it to end a coloured band, at most once or twice per page.
- **Photo prints:** a meal photo with a white border and the dish name underneath, tilted a few degrees, like a photo on a kitchen table.
- **The box fills up:** meals shown as small rounded bags in their bag colours filling a box.
- **Claim pills:** black pill, green tick, white Barlow text ("High in protein"). The rescue claim is a green pill with black text.
- One strong image per section. Lots of white space; white is part of the brand.

## Photography

- Real Rescube food only, the way it comes out of the pan. No stock photos, no dishes we don't sell, no garnish that isn't in the bag.
- Bright, natural daylight, warm and fresh. No dark moody food styling.
- Product shots: the pouch, the plate, the pan. People shots: real UAE homes and real customers, never posed stock models.

## Icons

Simple line icons, 2 px stroke on a 24 px grid, round ends (Lucide is the base set). Black on light, White on dark. Always pair an icon with a word. No filled, 3D or emoji icons in the product UI or on print, except the seasonal theme motifs.

## Voice

Short, plain, a bit cheeky. Write like a friend who cooks, not like a brand.

- Say the number: "7 minutes", "42 g protein", "150 g rescued", "AED 34 a meal".
- Lead with dinner, then the rescue story. People buy dinner; the rescue is the reason to feel good about it.
- Good: "Dinner sorted.", "Straight into the freezer.", "Up to 3 meals free in every box."
- Avoid: "guilt-free", "superfood", "clean eating", "revolutionary", exclamation marks everywhere, and AI-sounding phrasing such as em dashes.
- English is UK spelling (flavour, colour). Prices in AED with the amount after: "AED 34".
- Every customer-facing text also needs an Arabic version, checked by a native speaker.

## Motion

Short and physical: things drop, bounce and seal like a bag. Springy, under a second for UI feedback, up to about 2.5 s for a celebration. Always respect reduced motion. Confetti only for real moments (an order, a new badge).

## Seasons

The site and apps switch to season themes (Halloween, Ramadan, National Day and so on) by date from the editor. A season adds its accent colour and a motif. It never replaces the logo, the type or the core Green and Black.

## Do and don't

Do:
- Use real food photos and real numbers.
- Keep one green moment and one dark surface per screen or piece.
- Leave space.

Don't:
- Use bag colours as backgrounds or text.
- Put the logo on a busy photo without a band.
- Use gradients, drop shadows on text, gold, foil or glassy effects in print.
- Invent claims, reviews, prices or figures. Ask, or leave a clear placeholder like `[price]`.

## For code

- Website: Next.js plus Tailwind. Use the existing CSS variables and classes in `headless/src/app/globals.css` (`.btn`, `.btn-primary`, `.btn-dark`, `.btn-ghost`, `.display`, `bg-green`, `text-ink`, `bg-frost`, `text-muted`) instead of new hex values.
- Texts the team edits come from the CMS (`headless/src/lib/cms/fields.ts`); add new texts there with English and Arabic defaults.
- iOS app: SwiftUI colours `Color.rcGreen`, `.rcGreenDeep`, `.rcInk`, `.rcFrost`, `.rcMuted`, `.rcLine`; fonts via `.barlow(size, weight:)` and `.display(size)`.
- Android app: Jetpack Compose with the same colour values and fonts.
- Accessibility: contrast at least 4.5:1 for body text, touch targets at least 44 px, visible focus states (3 px Deep green outline), alt text on every food photo.