Skip to content
games for brands

Brand and design system.

Everything needed to keep Games for Brands consistent across the site, decks, social and event builds. Tokens live in src/app/globals.css, content in src/lib/site.ts.

Positioning

What we are

A UAE studio that makes brands playable: branded mini-games, gamified campaigns and game activations that run online and on-ground.

Who it's for

Brand and marketing teams, and the agencies that serve them, trying to reach Gen Z and young millennials in the GCC.

Why us

Arabic-first games, one game across phone, kiosk and LED wall, and first-party data delivered properly. Built by people from live events.

Brand line

Make your brand playable.

Support lines

  • Ads get skipped. Games get played.
  • Give your audience something to do.
  • People remember what they do.

Voice

We sound like

  • A games producer explaining a mechanic to a brand manager
  • Short sentences, plain verbs, sentence case
  • Specific: “live in two weeks”, not “fast turnaround”
  • Playful in the games, clear in the business

We avoid

  • Hype words: revolutionary, cutting-edge, next-level
  • Stats or client names we cannot prove
  • All-caps labels and exclamation-heavy copy
  • Gamer slang that brand managers will not get

Logo

games for brands
games for brands

The glyph is a controller d-pad inside a brand tile: a game control placed where a logo would sit. The wordmark is set in lowercase Unbounded Bold. Keep clear space equal to the glyph's corner radius. Use the glyph alone for favicons, avatars and game loading screens.

Colour

Controller

#3A2BF5 token: ultra

Primary brand colour, hero and section fields, primary buttons

Ink

#17143A token: ink

Text, outlines, sticker shadows, dark sections

Paper

#F5F6FB token: paper

Page background

Lemon

#FFE45C token: lemon

Calls to action, rewards, highlights

Bubblegum

#FF8FD0 token: bubble

Focus rings, alerts, playful accents

Mint

#4FE3B0 token: mint

Success, wins, live states

Text pairs: white on Controller and Ink, Ink on Paper, Lemon, Bubblegum and Mint. Never put Lemon text on Paper or white backgrounds.

Typography

Display XL

Unbounded 800, clamp(42–100px), -2% tracking

Make it playable.

Display L

Unbounded 700, clamp(32–60px)

Section headline

Display M

Unbounded 700, clamp(24–34px)

Card and service title

Body L

Readex Pro 400, 20px / 1.6

Lead paragraphs that explain the offer in plain words.

Body

Readex Pro 400, 17px / 1.6

Running text, lists, form fields and descriptions.

Small

Readex Pro 600, 14px

Labels, chips, captions

Unbounded is wide and blocky, like a game title screen, and is used only for display. Readex Pro covers Latin and Arabic in one family, so bilingual pages and games stay consistent.

Components

Buttons

Pill shape with a hard sticker shadow that presses flat on click, like an arcade button.

Chips

Small, square-ish, for tags and attributes. Never clickable unless they look like buttons.

No app downloadPlay demoLive

Radius by hierarchy

Chip 8px, tile 20px, panel 32px, button full pill.

Game frame

Every playable sits in the same cabinet: 2px ink outline, 8px sticker shadow, white status bar.

Score 1224s

Motion and principles

  • Let them play first

    The most important thing on any page is something to try, not something to read.

  • One loud thing per screen

    Spend colour and motion on one element. Keep everything around it quiet.

  • Motion answers a tap

    Buttons press, cards flip, wheels spin. Avoid decorative scroll animations.

  • Respect reduced motion

    All animation collapses for people who turn motion off.