← All work07 / 09

Brand identity & website · 2026In progress

Ihya

A whole brand, from logo system to brand kit, and a website built in it.

Ihya runs workshops and training for madrasahs, schools, charities and Muslim organisations across the UK. We built the brand around their logo: the logo system, palette, type, guidelines and a complete brand kit. Then we built the website in it, and the print and social templates that keep everything consistent.

Brand identityGuidelines & brand kitWebsitePrint & social templates
Visit ihyaproject.vercel.app↗
Ihya website
3
logo lockups, each in four colours
5
brand colours in fixed proportions
6
workshops ready to enquire about
35
ready-made social media templates

01 · The challenge

Ihya had a clear message and very little to carry it. The logo existed only as artwork, there was no settled palette or type, and an organisation wanting to book a session had nowhere to see what was on offer or ask for it.

02 · What we built

We turned the mark into a full logo system: three lockups in four colours, a five-colour palette with set proportions, two typefaces, photography direction and a layout made of full-bleed colour blocks, all written up as guidelines and a brand kit. The site runs on that system, with a workshop library visitors add to a single enquiry. The same copy feeds the social templates, flyer, certificate, name badges and facilitator slides.

Inside the product

Ihya, from every side.

Replicas of real screens, rebuilt here so you can see how it works for the people who use it. Names and data are made up.

01 · Brand

The brand kit, as delivered

The identity, the wordmark and favicon at every size, brand essence, colour, typography, photography, print and the digital system, in one kit the team works from.

brand/brand-kit
Ihya brand kit 2026: identity, wordmark and favicon, digital, brand essence, colour, typography, print, photography and system

Swipe to see the full screen

02 · Brand

One logo, five approved pairings

The logo in each colour pairing the guidelines allow, with the palette proportions and type alongside. Click a pairing to hold it.

brand/logo
Logo · curved lockup01 / 05
The Ihya Project curved logo

Lavender on navy

The signature pairing

Colour pairings

Proportion

  • Navy 40
  • Paper 30
  • Lavender 15
  • Lilac 10
  • Lime 5

Lime is the one key action in a view, never a surface.

Type

Revival into action.

DM Serif Display for headlines, Karla for everything you read.

Swipe to see the full screen

03 · Organisation

A library you can add to

Schools and madrasahs browse the workshops and tap the lime button to add one. The count follows them in the header and a bar invites them to enquire.

ihya/workshops
The Ihya Project

Workshops.

Browse the library, open any session for the full details and add the ones you like to your enquiry. Every workshop can be tailored to your audience, the setting and the time you have.

Workshop 01Who cares about politics?
More info
Workshop 02Reclaiming Our Minds
More info
Workshop 03The Alternative Careers Guide
More info
Workshop 04You think you know Palestine…?
More info
Workshop 05I see you: Thinking Critically & Doing Differently
More info
Coming soonBecoming an Ummah: An Educator’s Guide
More info

Swipe to see the full screen

04 · Organisation

One enquiry, from a phone

The chosen workshops arrive in the form as chips, ready to send with the group's details. One lime button, as the guidelines ask.

The Ihya Project

Get in touch.

What are you enquiring about?One of your workshops
Which workshops?
    Add another workshop
    NameAmina Hussain
    OrganisationNorthfield Youth Circle

    05 · Facilitator

    A kit that keeps up with the site

    Flyers, certificates, slides and social posts in the same system. Add a workshop to the site and its post, story and flyer follow.

    brand/templates

    Templates

    Print and social, from the site’s own copy.

    ihya
    Workshop flyer · A4
    Certificate of participation
    Story · new workshop
    Post · question
    Facilitator slides
    Post · statement

    One source

    Workshop titles and descriptions live once, in the site. The posts, stories and flyers are rebuilt from them.

    Swipe to see the full screen

    Workshop photos via Wikimedia Commons: Julian Herzog (CC BY 4.0); British Library (CC0); Refa’at Bayezeh (CC BY-SA 4.0); Godot13 (CC BY-SA 4.0); chensiyuan (CC BY-SA 4.0); Radosław Botev (CC BY 3.0 PL).

    What it does

    1. 01

      A logo system with rules

      Curved, stacked and wordmark lockups in navy, lavender, lime and paper, with clear space, minimum sizes and approved pairings.

    2. 02

      A palette that stays balanced

      Navy, paper, lavender, lilac and lime in a set ratio, with every text pairing checked against WCAG contrast.

    3. 03

      An enquiry basket

      Visitors add workshops from the library as they browse. The picks follow them to one enquiry form and are remembered on their device.

    4. 04

      Pages that share properly

      Every page and every workshop has its own address, and shows a proper title and preview image when shared on WhatsApp or social media.

    5. 05

      Templates from the site's copy

      Posts, stories, carousels, a flyer, a certificate, badges and slides are rebuilt from the website's text, so they never drift apart.

    6. 06

      Accessible by default

      Full keyboard access, visible focus, reduced-motion support, and colour never used as the only sign of a state.

    What we did

    Brand identity · Guidelines & brand kit · Website · Print & social templates

    Built with

    React · TypeScript · Vite · Node template generators

    Next project

    Masjid E Vali→

    Community website