Mobile Data Mart — brand kit
================================

Everything here is generated from one source, so the whole kit stays in step
when the brand changes. Do not edit these files by hand: the next build
overwrites them. To change the art, edit the mark or the palette in the
repository and re-run `npm run brand:assets`.

Colours
-------

  Brand 400    #23C58A   The bright green — the mark's light stop and the accent on dark.
  Brand 500    #0FA968   The primary brand green. Buttons and the mark's flat tile.
  Brand 600    #0B8A56   The dark green — the wordmark's "Mart", links on a light surface.
  Brand 700    #0A6E4F   The mark's darkest gradient stop.
  Accent 400   #C6F24E   The lime dot above the mark's tallest bar. Use sparingly.
  Ink 900      #0E1815   Body ink on a light background.
  Ink 950      #070F0D   The near-black behind every social image.

Type
----

  Display   Bricolage Grotesque (600 for the wordmark, 800 for headlines)
  Body      Plus Jakarta Sans (500/600)
  Mono      JetBrains Mono

Both display faces are open source (SIL Open Font License) and free to use in
print, on the web and in advertising.

Which file to use
-----------------

  logo-horizontal.svg        Mark + wordmark, side by side. The default.
  logo-horizontal-dark.svg   The same, for a dark background.
  logo-stacked.svg           Mark above the wordmark. For a square space.
  logo-stacked-dark.svg      The stacked lockup, dark background.
  logo-horizontal.png        Transparent PNG, if a tool will not take an SVG.
  logo-stacked.png           The same, stacked.

  mark.svg                   The app-icon tile on its own.
  mark-glyph.svg             Monochrome; recolour it to suit the surface.
  icon-512.png               App icon. Square and opaque.
  icon-192.png               Android home screen.
  favicon-32.png             Browser tab.
  favicon-16.png             Smallest tab size.

  social-avatar-1080.png     Profile picture. Facebook, Instagram, X, LinkedIn,
                             WhatsApp Business. Crops to a circle cleanly.
  social-cover-facebook-*.png  Facebook Page cover (1640x856).
  social-cover-x-*.png         X / Twitter header (1500x500).
  social-cover-linkedin-*.png  LinkedIn company banner (1584x396).
  social-post-square-*.png     Feed post, square (1080x1080).
  social-post-portrait-*.png   Feed post, portrait (1080x1350).
  social-story-*.png           Story / Reel cover (1080x1920).
  social-link-preview-*.png    The card a shared link unfurls to (1200x630).

Video (in the video/ folder)
----------------------------

  video/compare-story-1080x1920.mp4   9:16, 6s loop. The comparison claim.
  video/no-account-story-1080x1920.mp4  9:16, 6s loop. Guest checkout.
  video/delivery-story-1080x1920.mp4  9:16, 6s loop. Automatic delivery.
  video/compare-feed-1080x1350.mp4    4:5, 6s loop. The same, for the feed.
  video/*-poster.jpg                  The settled frame, for a thumbnail.

  Every clip is silent and loops, so it autoplays in a feed. They are generated
  by `npm run brand:video` and are only present in this archive if that ran
  before the kit was packaged.

Using the logo
--------------

  - Give it room. Keep clear space around it of at least the height of the mark.
  - Never stretch, rotate, recolour or add effects to the mark.
  - Use the light lockup on pale backgrounds and the dark one on dark
    backgrounds. Do not put the light lockup on a mid-tone photograph.
  - The smallest the mark should be drawn is 16px; the smallest the full lockup,
    24px of mark height. Below that, use the mark alone.
  - The name is always two words with two capitals: Mobile Data Mart.

What the mark is
----------------

Three ascending bars — signal strength, and data rising — with a lime dot above
the tallest, reading as the peak of the signal. It is deliberately not in any
network's colours: the marketplace is independent, and a mark that echoed MTN,
Airtel, Glo or 9mobile would imply an endorsement that does not exist.

Questions
---------

  [COMPANY: contact email]
  /brand
