The Sharjah Design System (SDS) is a unified visual and experience framework that brings consistency, clarity, and elegance to all digital services across the Government of Sharjah. It provides a shared language of components, patterns, and guidelines that help teams design and build interfaces with efficiency and confidence.

By aligning every touchpoint—websites, mobile apps, and portals—the Sharjah Design System ensures citizens and government employees enjoy seamless, accessible, and user-friendly experiences. It is more than just design rules—it’s a foundation that strengthens digital quality, reflects Sharjah’s identity, and accelerates innovation across the entire ecosystem.

Resources

Assets and tools

The UI kit offers a complete set of design assets built to streamline workflow and accelerate interface creation. It includes all core components, styles, tokens, and layouts—fully aligned with Sharjah’s visual standards. Designers can quickly assemble pages with pre-configured elements, ensuring consistency, reducing rework, and enabling faster delivery of high-quality digital experiences.

Download SDS in Figma Format

Version 1.0

Published on December 2025

Core Guides

Guidelines Foundation

The Guidelines Foundation defines the core principles that shape every interface designed within the Sharjah Digital ecosystem. It outlines how typography, color, spacing, iconography, and layout should work together to create harmony and usability across all products.

Typography

Defines a clear hierarchy and improves readability across all interfaces.

Color System

Creates visual harmony and reinforces Sharjah’s identity across all products.

Iconography

Delivers clear, modern symbols that enhance understanding and guide user actions.

Layout and spacing

Establishes structure and balance, ensuring content feels clear, organized, and easy to follow.

Input & Fields

Standardizes form elements to ensure smooth, clear, and accessible data entry.

Buttons

Provide clear actions and guide users through tasks with consistency and ease.

Accessibility

Ensures every design is usable and inclusive for all individuals, regardless of ability.

Responsive

Adapts seamlessly to different screen sizes, ensuring a smooth and consistent experience across all devices.

Content Design

Ensures every design is usable and inclusive for all individuals, regardless of ability.

Introduction

UI Components Overview

Every component is consistent, accessible, and technically optimized—reducing development time and eliminating repetitive work. With clear guidelines and dependable behavior across all platforms, these components empower designers and developers to deliver high-quality government experiences with greater speed and confidence.

Header

A top navigation bar containing the organization logo, primary links, and quick actions.

Breadcrumbs

A navigation element that shows the current page location within the site hierarchy.

Sticky Bar

A persistent bar that remains visible while scrolling, keeping key actions within reach.

Footer

A structured footer that provides essential links and information in a consistent layout.

Banners

Prominent messaging areas used for announcements, promotions, and important alerts.

Content Blocks

Structured text blocks that organize headings and body copy for comfortable reading.

Cards

Flexible containers that group related content and actions in a compact, scannable format.

Services

Card layouts for presenting government services with clear titles and quick entry points.

Filters

Controls that let users refine lists and search results by category or attribute.

FAQs

Expandable question-and-answer sections that surface helpful information on demand.

Media Carousel

A slideshow for cycling through images and media with intuitive navigation controls.

Gallery

A responsive grid for presenting collections of images and visual media.

Pagination

Navigation controls for splitting long lists of content into manageable pages.

Tables

Structured rows and columns for comparing and scanning detailed data sets.

Tabs

Switchable panels that organize related content within a single view.

Badges

Compact labels that highlight status, categories, or counts at a glance.

Stepper

A progress indicator that guides users through multi-step processes.

Statistics

Numeric highlight blocks that showcase key figures and achievements.

Templates

Ready made templates

By using these templates, designers and developers can reduce setup time, maintain alignment with Sharjah’s digital standards, and focus more on delivering meaningful, high-quality experiences.