قQeema

UI/UX and design system

The clickable product, the flow behind it, and the rules every Qeema screen follows. Built so a designer, a developer or Claude Code can pick it up and stay consistent.

Open

The appProfile, tender, verdict, review, export and ICV. Use the Demo box to switch scenarios.Open → UX flowEvery screen in order, with and without an ICV certificate.Open → Position mapHow company and tender resolve to five ICV positions.Open → Brand systemColour, type, components, and what the brand refuses.Open → Product flowEach step with the use case behind it.Open →

The rules

One hueAzure 208 carries every state, at four steps.

Gold means moneyOnly beside a riyal figure. Nowhere else.

Shape, not colourEvery status reads in greyscale. People are initials.

Light for everyoneNever follows the system dark setting.

Right to left readyLogical CSS only. Arabic ships in Rubik.

Empty stays emptyNo source means no answer, said plainly.

Use with Claude Code

git clone https://github.com/vibecoder223/qeema-uiuxflow.git
cd qeema-uiuxflow && claude

# CLAUDE.md loads automatically · run /qeema-design for any screen
python3 scripts/audit.py path/to/file.html

All company names, people and figures are fictional.