Style Guide

The design language behind Coren’s next-generation web presence.

Use this guide to maintain consistency across every touchpoint—web, mobile, proposals, and digital experiences.

Information Architecture

Primary Navigation

  • Home
  • About
  • Services
  • Projects
  • Contact

Supporting Pages

  • Service Detail Template
  • Style Guide
  • Careers / Work With Us
  • Privacy & Terms

Call-to-actions

  • Request Consultation
  • Book a Workshop
  • Schedule a Call

Colour Palette

#FFFFFFPure White
#222939Dark Slate
#1D1D1BDeep Ink
#DC151APrimary Red

Typography

Rabar Bold · 3rem

Use for hero statements and major headings.

Rabar SemiBold · 2.2rem

Section headings on all inner pages.

Rabar SemiBold · 1.5rem

Card titles, navigation emphasis, form titles.

Body copy · Rabar Regular · 1rem

Line-height 1.6 for comfortable reading across devices.

UI Components

Buttons

Primary CTA Ghost CTA Outline CTA

Cards

Service Card

Pairs a concise description with clear call-to-action for further exploration.

Learn more

Form Elements

Future Enhancements

Phase 1 · Next 3 months

  • Multilingual toggle (English / Arabic) with mirrored layout support
  • Launch insights & news centre with CMS integration (Headless / WordPress)
  • Newsletter pop-up with CRM automation

Phase 2 · 6 months

  • Client portal for project dashboards and document exchange
  • Interactive project map showcasing geographic footprint
  • AI-powered search assistant for service discovery

Phase 3 · 12 months

  • BI integration for sustainability metrics and live KPIs
  • Immersive 3D asset tours using WebGL and sensor data
  • Marketplace integration for vendor onboarding