Brand System

Smally Loyalty brand assets and usage guidelines.

This page defines the approved fonts, color palette, and logo assets for Smally Loyalty so every marketing and product surface stays consistent, legible, and professional.

Typography

Use a consistent hierarchy: `Sora` for headings and `Manrope` for body and interface copy.

Heading Font

Sora Bold 700

Recommended for headlines, section titles, and key short labels where stronger visual authority is needed.

Body Font

Manrope 400-700

Recommended for paragraphs, long-form supporting copy, form fields, and UI controls to keep text readable and warm.

Colour Palette

These are the core Smally Loyalty brand colours. Keep high contrast for text and reserve accent colours for primary actions and highlights.

Smally Teal#008080
Teal Deep#0F5F63
Teal Soft#DFF7F4
Ink#16353A
Sand#F7F1E8
Cream#FCFAF6
Orange#F4A261
Orange Deep#E76F51
Primary GradientTeal to Orange

Core Assets

Approved brand files for common placements.

Smally Loyalty bar logo

Horizontal Logo

Use for navbars, page headers, and footer branding where horizontal space is available.

File: `smally-loyalty-bar-clear.png`
Smally Loyalty stacked logo without background

Stacked Logo (Clear)

Use the transparent stacked lockup when you need compact branding without an added background block.

File: `smally-loyalty-stacked-clear.png`
Smally card icon

Card Icon

Use for app-touch points, wallet references, and icon-only contexts where the full logo is too detailed.

File: `smally-card-icon.png`

Asset Guidelines

Keep assets clear, readable, and consistent across all Smally Loyalty surfaces.

Do

  • Use the clear PNG assets exactly as provided with original proportions.
  • Keep generous clear space around logos to avoid visual crowding.
  • Place logos on calm, high-contrast backgrounds for readability.
  • Use the card icon for compact UI contexts, not long-form page headers.

Do Not

  • Stretch, squash, rotate, or recolor logo files.
  • Add drop shadows, outlines, or extra effects directly on the logo artwork.
  • Place logos on busy photography without a contrast-safe container.
  • Swap heading/body fonts away from Sora and Manrope on brand-critical surfaces.