---
title: "IslamicOpenFinance™ brand guide | Logo, colours, type and notifications"
description: "The IslamicOpenFinance™ brand guide: the logo and its usage rules, colours with their codes, Alexandria and Geist Mono type, icons, notification samples and downloadable files."
url: https://islamicopenfinance.com/brand/
lang: en-GB
source: "IslamicOpenFinance"
---

# IslamicOpenFinance™ brand guide

> The IslamicOpenFinance™ brand guide: the logo and its usage rules, colours with their codes, Alexandria and Geist Mono type, icons, notification samples and downloadable files.

Brand guide

## The IslamicOpenFinance™ visual identity

Logo, colours, type and usage rules, for teams, partners and the press.

Logo Colours Type Icon Clear space and size Usage Notifications

![IslamicOpenFinance™ logo](https://islamicopenfinance.com/brand/logo-full.png)

**Primary logo** Wordmark in its rails, with the Arabic line [Download PNG](https://islamicopenfinance.com/brand/logo-full.png)

![IslamicOpenFinance™ logo on a dark background](https://islamicopenfinance.com/brand/logo-footer-dark.png)

**On dark backgrounds** Type in white; the green is lightened so it holds on black [Download PNG](https://islamicopenfinance.com/brand/logo-footer-dark.png)

![Compact wordmark](https://islamicopenfinance.com/brand/logo-nav.png)

**Compact wordmark** For the navigation bar, products and documentation [Download PNG](https://islamicopenfinance.com/brand/logo-wordmark.png)

![The mark](https://islamicopenfinance.com/brand/logo-mark.png)

**The mark** The octagon-and-gold tile inside the rails; for avatars and app icons [Download PNG](https://islamicopenfinance.com/brand/logo-mark.png)

The logo has two parts: the **wordmark** and the **rails**. "Islamic" is green and "OpenFinance" black, written as one word. The rails are not decoration: they stand for connection, routes and open infrastructure, with a circular node at each joint.

**Warm green** `#1F9D55`"Islamic", the leading rail, big headings, large accents and green on black **Deep green** `#167A42` Primary buttons, links, eyebrows, chips, labels and every small green text **Hero green** `#1B8749` Behind the hero and the closing cover: the warm green darkened only as far as small white text needs **Gold** `#D6A631` The squares of the tile and small highlights only; never behind text **Black** `#0B0B0B`"OpenFinance", headings, body text, dark surfaces **Rail grey** `#B8B8B8` The trailing rail, neutral infrastructure lines **Secondary grey** `#6B6B6B` Tagline, metadata and secondary text **Warm white** `#FAFAF7` Page background, documents and slides **Dashboard** `#F7F7F4` Dashboards and recessed panels

_Warm white 55%_ _Black 25%_ _Green 14%_

Click a colour to copy its code. Status colours carry meaning only: success `#127436`, warning `#A24A08`, error `#B91C1C`. Every text meets WCAG AA (4.5:1): white on the warm green is only 3.5:1, so it carries big type and large surfaces, never a button label or small text. Buttons are deep green with white labels (5.4:1, darker still on hover); small green text is deep green on white or warm white (5.4:1 and 5.2:1); the hero's white copy sits on the hero green (4.6:1).

Display · Alexandria ExtraBold

Build the product before every integration is in place.

Section heading · Alexandria Bold

Model the contract and the approval first.

Body · Alexandria Regular

IslamicOpenFinance™ separates the product from the provider.

Tagline · Alexandria Regular, secondary grey

Open infrastructure for Islamic finance.

Code · Geist Mono

POST /v1/murabaha/contracts

Alexandria and Geist Mono are under the SIL Open Font License and self-hosted. Avoid decorative calligraphy, serif faces and gradients inside letters. The identity is bold, geometric, minimal and legible.

![App icon](https://islamicopenfinance.com/brand/app-icon-512.png)

**App icon** The mark on a white rounded tile [Download PNG](https://islamicopenfinance.com/brand/app-icon-512.png)

![Maskable icon](https://islamicopenfinance.com/brand/app-icon-maskable-512.png)

**Maskable icon** Full bleed, the mark inside the safe zone [Download PNG](https://islamicopenfinance.com/brand/app-icon-maskable-512.png)

**Favicons** 48 px uses the full mark; 32 and 16 px a simplified mark: the central octagon and its four gold squares inside the rails [Download PNG](https://islamicopenfinance.com/brand/favicon-32.png)

![Logo clear space](https://islamicopenfinance.com/brand/logo-nav.png) _2X_ _2X_ _2X_ _2X_

The base unit **X** is the diameter of one of the rail's circular nodes. Keep at least **2X** clear on all four sides; no text, image, border or interface element enters it.

- **180 px** Minimum width of the primary logo (digital)
- **120 px** Minimum width of the compact wordmark
- **16 px** Minimum icon size (simplified mark)
- **35 mm** Minimum width of the primary logo in print

Correct use

Recolouring the words or rails

Stretching or changing proportions

Shadow or glow

**Do**

- Write the name as one word: IslamicOpenFinance™.
- Keep the rails as part of the logo.
- Keep the logo flat, without effects.
- Respect the clear space and minimum sizes.
- Use gold only where the logo and tile use it.

**Don't**

- Abbreviate the name or split it into three words.
- Break the rails unevenly or add nodes.
- Put gradients, shadows or glows on the logo.
- Set text in gold or on a gold background.
- Use the logo to suggest a partnership or endorsement that does not exist.

IslamicOpenFinance™ notifications share one language across products: a circular status node, a short title, a one-sentence explanation, at most two actions and a time rail along the bottom. The surface is dark and flat: no glass, coloured shadows or gradients. Hover a notification to pause its timer; on a phone, swipe it away.

Success Info Warning Error Brand

```
IslamicOpenFinanceNotify.show({
  type: "warning",
  title: "Holiday expected",
  message: "Instalment 3 may move by one business day.",
  actions: [{ label: "Open the calendar", onClick: openCalendar }]
});
```