Design Tokens

Introduction

Why Design Tokens?

Design Tokens are the foundation of the Sharjah Design System. They define the visual properties used throughout every digital experience, creating a single source of truth for both designers and developers. By standardizing values such as colors, typography, spacing, borders, shadows, and sizing, design tokens ensure consistency, scalability, and maintainability across all Sharjah Government digital platforms.

Design tokens eliminate inconsistencies by replacing hard-coded values with reusable design decisions. Instead of defining colors, spacing, or typography individually for every interface, teams reference shared tokens that remain consistent across every project.

Using design tokens enables:

Consistent user experiences across government websites
Faster design and development workflows
Easier maintenance and future updates
Better collaboration between designers and developers
Scalable implementation across multiple digital products

Tailwind Integration

The Sharjah Design System adopts Tailwind CSS as the underlying implementation framework. Rather than creating a separate token system, our design language follows Tailwind’s architecture, making it familiar for developers and reducing implementation effort.

By aligning with Tailwind:

Designers and developers share the same design language.
Design decisions translate directly into production-ready code.
Components are easier to build, maintain, and extend.
Teams benefit from Tailwind’s scalable utility-first architecture while preserving the Sharjah visual identity.

This approach significantly reduces the gap between design and development, enabling faster delivery and greater consistency across projects.

Color Tokens

Define the primary, secondary, neutral, semantic, and supporting colors used throughout the interface.

Typography Tokens

Standardize font families, font sizes, weights, line heights, and text styles.

Spacing Tokens

Standardize elevation and depth using predefined shadow values.

Sizing Tokens

Control component dimensions, icon sizes, containers, and layout widths.

How Tokens Work

Every visual decision in the Sharjah Design System references a design token rather than an individual value. This ensures that a single update to a token automatically propagates across all components and templates, reducing maintenance effort while preserving consistency.

For example:
Updating a primary color token will automatically update every button, link, banner, and component that references that token.

Primary HEX: #924C2D

Current
Main brand color used for primary actions and key elements

Effected UI Elements:

Button

Service Catalog

Primary HEX: #009247

Changed to:
Main brand color used for primary actions and key elements