Living Design System & Content CMS Guide

Branding & Content Customization System

The complete architectural reference for colors, bilingual typography, UI components, and step-by-step developer instructions on how to modify any aspect of the Hawas Cultural & Art Cloud platform.

Museum Editorial Color Palette

Click any color swatch to copy its Hex code or Tailwind class directly to your clipboard.

13 Semantic Tokens

Obsidian Basalt (Base)

#0F1115 · RGB(15, 17, 21)

Core background across entire application, mimicking polished dark basalt museum floors.

bg-obsidian

Obsidian Surface

#171A21 · RGB(23, 26, 33)

Elevated card surfaces, glassmorphic dropdowns, and modal dialog containers.

bg-obsidian-surface

Obsidian Border

#262B36 · RGB(38, 43, 54)

Subtle divider lines, table row borders, and inactive card outlines.

border-obsidian-border

Charcoal Dark

#161920 · RGB(22, 25, 32)

Secondary dark containers for simulator controls and terminal shells.

bg-charcoal

Burnished Gold (Brand Core)

#C5A059 · RGB(197, 160, 89)

Primary luxury brand key accent for buttons, icons, highlights, and active tabs.

bg-gold / text-gold

Gold Light (Hover)

#D8B26E · RGB(216, 178, 110)

Interactive hover highlights and bright radiant stops on metallic gradients.

bg-gold-light / text-gold-light

Gold Dark (Shadow)

#8E6F32 · RGB(142, 111, 50)

Deep shadow gradient stops and engraved border lines.

bg-gold-dark / text-gold-dark

Museum Alabaster (Text)

#F7F4EF · RGB(247, 244, 239)

Primary light text against obsidian dark mode; canvas background for museum catalog cards.

text-alabaster / bg-alabaster

Papyrus Parchment Sand

#EAE3D5 · RGB(234, 227, 213)

Archival hierarchy badges, table headers, and historical codex parchment trims.

bg-papyrus

Papyrus Paper Border

#DCD3C1 · RGB(220, 211, 193)

Crisp borders for certificates, print views, and physical card simulators.

border-papyrus-border

Museum Wax Crimson

#8C2D19 · RGB(140, 45, 25)

Official cryptographic wax seals, urgent conservation alerts, and legal status indicators.

bg-crimson / text-crimson

Emerald Provenance

#1F6B4F · RGB(31, 107, 79)

Verified Spectrum 5.1 compliance tags, authenticated artwork badges, and active server telemetry.

bg-emeraldProvenance / text-emeraldProvenance

Lapis Lazuli Telemetry

#1B4D89 · RGB(27, 77, 137)

IoT vitrine NFC pulses, live RFID beacons, and active network telemetry badges.

bg-lapisTelemetry / text-lapisTelemetry