Do / Don’t
The rules on one page.
The short list a designer or agency checks before anything ships. Each rule points back to its section.
The board
Six decisive do/don’t pairs and the rule index for every system
Loading board
The official board from the package, rendered live. Use “Open full size” for 1:1 detail on small screens.
Every rule, by system
The Do and Don’t lists of all 20 guidelines, with the page where each system is documented.
Do
- Use the off-white plate on dark/red/photo grounds
- Request official white and one-colour masters from the owner
Don’t
- Recolour the logo (no unofficial white or black versions)
- Invent an Arabic wordmark
- Use the old MAKANAK PNG
Do
- Use the pairing matrix (03) at real sizes
- Keep one red event per surface
Don’t
- “Text on red is always black” — replaced by the matrix
- Tints of red as brand colours
- Mixed red/black words in one headline
Do
- Tabular figures for numbers
- Arabic line-height 1.5–1.9
- Isolate Latin names inside Arabic lines
Don’t
- All-caps headlines
- More than one bold phrase
- Synthetic bold/italic
Do
- Align to the grid even when it is not drawn
- Choose the mode before placing devices
Don’t
- A visible frame on every surface
- An info block on every surface
Do
- Use larger steps between groups than within
- Keep 44 px touch targets
Don’t
- Arbitrary values
- Tight text against the frame
Do
- Crop to the architecture
- Keep faces and key details clear
Don’t
- Full scrims, filters, AI/stock images
- Logos floating on photos
Do
- One message, one visual, one signal
- Mark samples as samples
Don’t
- The same frame on every post
- Devices stacked from several modes
Do
- Start with no device; add only what the message needs
- One signature per surface
Don’t
- Frame + info block + plan + chips together
- Dimension lines without a real value
Do
- Pair icons with labels
- Use one icon set only
Don’t
- Filled/duotone icons
- Emoji in brand artwork
Do
- Write Arabic natively
- Keep numerals consistent within a surface (policy N-7 open)
Don’t
- Mixing directions without isolation
- Latin fonts for Arabic
Do
- Plan the grid 9 tiles ahead
- Let heroes lead branch content
Don’t
- The same frame and info block on every tile
- Identical modes adjacent
Do
- End with the only CTA
- Keep the rule at the same height
Don’t
- Changing templates mid-carousel
- CTA on every slide
Do
- State terms in the caption
- Approved prices only
Don’t
- Countdowns, fake urgency
- Placeholder prices in market
Do
- Greeting first; offer as a separate, secondary piece
- Slow the motion for Ramadan
Don’t
- Offers on national days
- Gold, green, clip-art, emblems merged with the logo
- Forcing the occasion into a service template
Do
- Cut more than you transition
- One element moving at a time
Don’t
- Bounce, elastic, spin, glitch, 3D, whooshes
- Animated logo parts
Do
- Subtitle every video
- Design the cover
Don’t
- Text in platform UI zones
- Karaoke captions
- Permanent watermarks
Do
- Visible focus on everything
- Status text with every colour
Don’t
- Pills, card shadows
- Red links or red error text
Do
- Placeholders marked until Legal/Finance supply text
- Sign schedule per branch
Don’t
- Watermarks, red headers
- Red sign panels
Do
- Choose the mode from the message
- Vary modes across a feed or campaign
Don’t
- Combining devices from several modes
- Using E for everyday content
Do
- Start from the story, then add components
- Test covers at thumbnail size
Don’t
- Use every component in one Reel
- Chips over faces or key architecture